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
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:
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.
Last updated
