Blocks

Blocks » Image Block

Use the Image block to insert an image onto your page or post. This guide describes how to insert an image and use all the available settings to control how the image appears.

Table of Contents

Video Tutorial

↑ Table of Contents ↑

Add the Image Block

To add the Image block, click on the + Block Inserter icon and search for “image”. Click it to add the block to the post or page.

Screen recording on how to add an image block.
Inserting an Image block using the Block Inserter.

💡

Using your keyboard, you can also type /image on a new line and press Enter or click on the Image option in the menu to quickly add a new Image block.

How to add an image block.
Insert an Image block by typing /image on a new line.

For more, visit our detailed instructions on adding blocks.

Once you add the block, you will be presented with three methods to select your image:

  • Upload: Choose an image from your computer or device to add to your site. See supported file types.
  • Select image: Select an image from:
  • Insert from URL: Paste a link to an image from the web.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear:

Image block toolbar
Image block toolbar

The icons on the Image block toolbar, starting from the left, are:

Align Images

Use the alignment options to make the image appear on the left, the right, or in the center. Additionally, you may see options for wide width and full width, if those are supported by your theme.

Further reading: Align Images With Text

The link settings allow you to hyperlink your images. You may choose whether clicking on the image opens an attachment page, the original media file, or a custom URL of your choice.

To link to a specific URL, enter the URL you want the image to link to in the text box that appears. If you click the downward arrow next to that box, you can choose whether or not to have the link open in a new tab.

Alternatively, if you wish to link an image to a page or post on your site, start typing the title of the page or post. You can then select it from the results and link the image to that page or post.

Adding a link to an image
Your image can link to a custom URL, Attachment Page, or Media File.
Crop and Other Image Editing Tools

Click on the Crop icon in the toolbar and a selection of editing tools will appear:

Image block editing tools showing the zoom ,aspect ratio, rotate, apply, and cancel options.

From left to right, these are:

  • Zoom: You can zoom in on your image up to 300% and click and drag to control which part of the image is zoomed in.
  • Aspect Ratio: Crop the image to specific ratios of an image’s width to its height. Available options are:
    • Original
    • Square
    • Landscape: 16:10, 16:9, 4:3, 3:2
    • Portrait: 10:16, 9:16, 3:4, 2:3
  • Rotate: Rotate your image by 90°, 180°, 270°, or 360°.
  • Apply: Commit your changes to the image.
  • Cancel: Exit the image editing tools, abandoning your changes.

Here is a demonstration of how the zoom feature works:

Use the Zoom tool to crop the image to the size and content you wish to see.

Edits you make to your image will create a new copy of the image in the Media Library. This ensures that if the image is used elsewhere on your site, it won’t be affected. It also means you still have the original image if you need it.

Duotone Filter

The duotone filter option allows you to set image colors from the block toolbar. Think black and white photos, but in any color combo of your choosing. To get started, select the Duotone Filter button in the toolbar, then choose from the examples shown, or set your own colors.

A gif of an image being clicked in the Editor, then applying several different Duotone Filters to see how it looks.

To set your own colors, select the dots within the color bars:

A screenshot highlighting where to click on the Duotone filter setting to set a custom color, on the color bar.

↑ Table of Contents ↑

Resize Images

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

Resizing an image by dragging its handles.
Resize an image by dragging its handles.

To resize an image, click it to reveal the resize handles that look like blue dots around the image. Then, click on a resize handle and drag the image to your desired size.

Alternatively, you can adjust the width and height dimensions in the block settings on the right-hand side. There are also convenient options here for setting the image to 100, 75, 50, and 25% of its original size.

Image size controls in the block settings
Image size controls in the block settings

↑ Table of Contents ↑

Captions

To add a caption, type it in the caption space below the image in the editor:

A screenshot on how to add a caption on an image block

If you have written a caption for an image in the Media library and then add the Image block, the Image block will show the caption you wrote. However, if you add a caption to the image in the Media library after adding the Image block, that caption will not appear in the Image block. In that case, you can either type the caption manually on the Image block or remove and re-add the block so that it will use the caption from the Media library.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click the ⚙️ icon to reveal the block settings
Image block settings
Image block settings

The Image block settings contain the following options:

Styles

Choose the style of the image, which can be set to:

  • Default, so the image appears as you inserted it.
  • Rounded, so the image appears as a circle (if your image was originally square) or a capsule/oblong shape (if your image was originally a rectangle).
  • With a bottom wave or a top wave.
Image Settings
Advanced

The Advanced tab lets you add a title attribute, an HTML anchor, and additional CSS classes to your block.

A screenshot  of the Image Block Advanced tab.

Not quite what you're looking for?

Get Help