Editing a Photo

Main Edit Screen for a Photo

You're presented with a host of toolbar and block sidebar options when editing a photo. Let's go over how to modify the photo block using the available options.

The Main Block Toolbar

The Main Block Toolbar

1. Block Alignment Options

Blick Alignment Options

If you have a block-ready theme, you can change the block's alignment behavior by using the block alignment options. On none-block-ready themes, these will have no effect.

2. Image Alignment Options

Image Alignment Options in Action

You can align the image left, center, or right within the block's container.

3. Caption Appender Visibility

Admittedly, not everyone wants a caption for their photo, and the caption appender can get in the way, so there's a toolbar option to hide the caption appender.

Hide or Show the Caption Appender

4. Crop the Photo

Crop Option in the Toolbar

Clicking the Crop button will take you to the Crop screen.

Cropping a Photo

5. Replace the Photo

Replace the Photo and Go Back If You Need to Return to the Photo

Clicking "Replace" will take you back to the initial upload screen, where you can upload a new photo.

You can always click the "Back" button in the toolbar if you make a mistake.

Uploading a Photo

6. Accessibility Options

Accessibility Options for the Photo

You can use this toolbar option to set the photo's Title and alt text. Any title or alt text entered here will be automatically saved to the photo.

7. Linking Options

Linking Options for the Photo

The linking options allow you to set the link to your image. The default is no link.

You can:

• Choose No Link

• Link to the full-sized version of the photo

• Link to the photo's attachment page in WordPress

• Link to a custom URL

If you choose "The full size photo", you're able to add the image to a lightbox.

Lightbox Options for the Full Size Photo

You're also able to add a caption to the lightbox.

For the Advanced panel, you can set the various link attributes.

Link Advanced Options

With the advanced options for linking, you can:

• Open up a new window

• Set the title of the link

• Set the CSS class of the link

• Set the link's anchor ID, which will be wrapped around the image

The Block Sidebar

The bulk of the image customization options are within the block sidebar. Let's review what's in the sidebar and how it can help you edit the image.

Global Styles

Global Style Options

If you have any saved global styles, they'll show up at the top of the block sidebar.

You're able to select and remove global styles in this section.

See Global Styles for more information.

Global Styles

Accessibility and Image Size Options

Acessibility and Image Size Options in the Block Sidebar

In the "Photo Settings" panel, you can adjust the accessibility options and image size.

Any title or alt text entered in this section is saved back to the original image.

Available Image Sizes

For image sizes, it'll pick up any sizes that a plugin or theme has registered. Selecting a new size will reload the image.

Image Styles

Adjust the Image Styles in the Sidebar Options

Within the Image Styles panel, you can:

• Add a background color to the image (useful if the image is transparent)

• Adjust the opacity of the image

• Add a blur to the image

• Add a drop shadow

Drop Shadow Options

The drop shadow options allow you to add a nice 3D effect to your images.

Example Image With Drop Shadow Applied

CSS Styles

Available CSS Gram Styles

Photo Block uses CSS Gram for its image styles. There are 26 styles available, and a live preview of what the image will look like is displayed when hovering over the item.

Padding, Margin, and Border Options

Padding, Margin, and Border Options in the Block Sidebar

You can adjust per breakpoint:

• Padding

• Margin

• Border

• Border Radius

If overlaying a caption, the overlay will go over the image and will ignore the sizing options.

You can enter the values all at once if "synced" is selected or "unsync" and enter the values individually.

A demo of this is below:

Adjusting the Padding Options

For the border, the controls are a bit more compact. Here's a demo below of the border options.

Demo of Border and Border Radius

Container Sizing Options

Sizing Options for Photo Block

You can create a custom image size and adjust the image's object fit for image sizing.

With the sizing options, you can:

• Set the width per breakpoint

• Set the height per breakpoint

• Set the min-width per breakpoint

• Set the min-height per breakpoint

• Set the max-width per breakpoint

• Set the max-height per breakpoint

• Set the object positioning

• Set the object fit

For example, I can create a 400x400 image and then set the object position to cover to ensure a good fit.

Here's a demo of that below:

Setting the Width and Height of the Photo and Setting Object Positioninig

Global Styles

Global Style Options

At the bottom of the block sidebar above Advanced, you can adjust the global style options.

You can:

• Save or override global styles

• Edit and rename existing global styles

• Refresh the global stylesheet

• Clear any block stylies for the block and set back to defaults

For more on Global Styles, please visit the link below:

Global Styles

Advanced Options

For Advanced, there are several useful options to customize the image further.

Advanced Options for Photo Block

For example, you can add a custom CSS class to the figure tag and a separate CSS class for the img tag.

Data Attributes for the Image

In addition, you can add custom attributes to the img tag if needed.

Additional Advanced Options

Additional advanced options allow you to:

• Skip lazy loading - This sets an attribute that tells browsers and caching plugins to not lazy-load the image.

• Enable Image Protection - This prevents users from using the Right+Click button to save their images locally.

• Hide on Mobile|Tablet|Desktop - Hide the image for various breakpoints.

Editing Conclusion

The Photo Block has numerous ways to edit the photo, so your imagination is the limit.