Image block

Go to the List of Blocks

Use the Image block to easily add an image to your page.

Add an Image block

To add the Image block to a page, click the Add block button to open the block inserter pop-up window and choose the Image block.

You can also use the keyboard shortcut /image to quickly insert an Image block.

Detailed instructions on adding blocks

Block toolbar

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. 

• Transform to
• Block moving tools
• Align
• Apply duotone filter
• Link
• Crop
• Add text over image
• Add/Remove caption
• Replace
• More options

Adding an image

The media options panel will load with three options, Upload, Media Library, and Insert from URL.

Upload and Media Library will let you add or choose media from your library and embed it in your page.

Simply add the image from the Upload Files tab, then select it in the Media Library tab. Customizing the image attachment details, such as the Title, Caption, Alt Text, and Description, in the Media Library window can also be helpful for SEO and future navigation of your media library.

It is also possible to drop image into empty paragraph.

As well as choosing an image from Openverse, which will be uploaded to your site’s Media.

Openverse images can also be dragged from inserter to existing image block.

Importing external images

If you selected the “Insert from URL option” to add your image, you will see a button with an upward facing arrow. If you click on it, the image will be imported into your site’s local Media Library and the URL on the image block will be automatically updated to point at the new file.

If the imported image has a caption, it will be added automatically as well.

Please note that the “Upload External Image” feature might not work on all websites, as some of them restrict how their images are handled.

Resizing images

Once the image is added to the editor, you can resize and align the images to better fit the surrounding content.

To resize an image,

• Click on the image to reveal the draggable resize handles.
• Click on the resize handles and drag the image to your desired size.

Alternatively, on the right-hand side in the Block Settings, the image size can be fine-tuned by adjusting width and height dimensions. There are also some convenient options in the block settings for setting the image to 100, 75, 50, and 25% of its original size.

Aligning images

If you wish to align an image within a paragraph you will first need to insert the image just above the target paragraph block.

From there, click on the image and select left or right alignment, this will merge the image into the paragraph block.

Finally, resize the image to your desired width and height.

Wide and full width images

As support for the new editor is added to our themes, you will begin seeing icons for Wide and Full Width images. These two image sizes will allow you to expand the image beyond the theme’s usual content width.

Captions

If you wish to add a caption to a singular instance of an image, click on the Add caption button on the Block toolbar. Then enter your caption text into the space below the image. You can remove the caption by toggling the caption button off.

Link settings

The link settings allow you to hyperlink your images. You can enter a custom URL, link to the image file, link to an attachment page or choose to enlarge the image when the site visitor clicks on it.

Enlarge on click

The Enlarge on Click option creates a link in the image that opens it to a bigger size, as a dialog on the same page, when clicked. This is called the lightbox effect and it’s useful when you want the viewer to have the chance to see a certain image with more details.

Image editing

You can make quick crops without leaving the editor. Just hit the Crop button in the toolbar.

An expanded toolbar will appear. This will allow you to zoom an image.

There are also options to set the aspect ratio, such as to crop the image into a square.

You can also rotate the image if it comes in sideways.

After you make any changes, click Apply.

Undo changes

After applying changes to an image, you can revert them using the Undo option in the action notice.

Adding text overlay

A new feature allows you to convert image block to cover block so that you can add overlay text on the image.

Upon clicking the Add text over image button the block transforms immediately to a cover block with its placeholder paragraph.

Sometimes you use a tool like Google Docs to write or collaborate on posts. When you’re ready to put the content on your site, you may copy and paste them into the editor.

One problem is that those images are likely hosted somewhere else like Google and could easily become broken if a change is made.

So, If you copy and paste an image from a resource like Google Docs, a button will appear on the toolbar to upload it to the media library. Click that, and it will stay in the post, but also upload to your media library.

More options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

In addition to existing options, the More options now includes a Set as Featured Image option for Image block.

This allows you to directly set the selected image block as the featured image for the post or page, streamlining the workflow without needing to open the Post settings sidebar.

Block settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the Settings button next to the Publish or Save button.

Image settings

The image settings offer a text field to add an Alternative Text description, which is important for accessibility and SEO.

You can choose the Image size between thumbnail, medium, large and full size. You can also change the Image dimensions – width and height dimensions of an image in 25% increments, or in exact pixel dimensions. You can also choose the Resolution of your image with options that may include Full Size, Large, Medium and Thumbnail depending on your theme and the size of the originally uploaded image.

Style settings

Styles

Depending on your theme, you may have several styles for your image for example default or rounded.

Filter options

You can create a filter effect on images without actually changing the original image. The Duotone filter option allows you to add this filter color to your block content from the block toolbar.

Read more about the filter options.

Dimensions

The Image block provides dimension settings options to change margin size.

For details refer to this support article: Dimension settings overview

Border and shadow

The Image block provides border settings options to add border color, width, and radius. If there are custom border settings, custom border will be visible on image placeholder.

For details refer to this support article: Border settings overview

Advanced

HTML anchor allows you to make a unique web address for a particular Image block. Then, you’ll be able to link directly to an Image block of your page.

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

The Title Attribute can be used to describe the role of this image on the page, however note: many devices and browsers do not display this text.