Editing 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

1. Block 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

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.

4. Crop the Photo

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

5. Replace 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.

6. Accessibility Options

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

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.

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

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

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

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.

Accessibility and Image Size Options

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.

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

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

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

CSS 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

You can adjust per breakpoint:

• Padding

• Margin

• Border

• Border Radius

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:

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

Container Sizing Options

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:

Global Styles

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:

Advanced Options

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

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

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

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.