The image block enables you to add a single photo and have them custom aligned attractively and efficiently.
To add a image, click on the Add Block button and select the Image block. Alternatively, you can start typing
/image in a new paragraph block, then press enter.
Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.
Upon adding the image block, you have two options to chose from, Upload and Media Library. The upload button allows you to upload a single image from your device and media library allows you to select image that you’ve already uploaded to your site’s media library.
Once you’ve uploaded your image or have chosen them through the Media Library window, you will get the chance to caption the image afterward.
This is another option in the file block’s toolbar. Choosing the pencil icon will allow you to select a new image file for your block. Use this if you need to replace the image file in your image block, or change the Title or Alt Text.
Captions can be added to images within two possible ways:
If you wish to add a caption to a singular instance of an image, simply type it in the caption space below the image in the editor.
Or in case you would like for the same caption to be present across all instances of an image, you will need to add the caption to the image from the media library by clicking the edit button on the image block.
A block-specific toolbar will appear whenever you select the image block. Three of the options are for the block’s alignment, right, center, and left. Choosing the right or left will allow you to place another block alongside the image block moreover picking center will return the block to its default, taking up the full width of the post or page content.
You can resize and adjust the image alignment to better fit the surrounding content right after adding the image to the editor.
Clicking on the image will reveal the draggable resize handles. Then, you would be able to resize handles by dragging the image to your desired size.
The image size can be modified by adjusting width and height dimensions manually within the right-hand side block settings panel. There are also a few convenient options in the block settings for setting the image to 100, 75, 50, and 25% of its original size.
In addition to the options found in the block’s toolbar, you may locate the block specific settings in the editor sidebar panel. Clicking on the cog icon next to the publish button will toggle the visibility of this panel.
The image settings panel provides an option to alter the Alternative text description, which is essential for accessibility and SEO. In addition to that, you can also change the width and height dimensions of an image in 25% increments, or with exact pixel dimensions.
This control determines what happens when your visitors click on the images in your block. The following options are available with the drop-down select menu:
None: This makes your image unclickable, so they don’t link to anything at all.
Media File: This opens the image in a blank tab or window, which enables your visitors to go through one image at a time.
Attachment Page: This will lead anyone who clicks on your image to your site’s attachment page. This is an informational page about your image, which includes the image, the caption, the image description, and a comment field.
Custom URL: This will allow you to hyperlink your image to a custom URL of your choice.
This control offers left, right, and center alignment responsive classes that can be used to realign the block’s position with the same viewport width breakpoints as the grid system. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.