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

Add an Image Block

Add the Image block to a page by clicking on the + icon and search for the Image block. Alternatively, you can type /image and press enter:

The text /image has been typed, and the option to quickly add an image block appears.
Add images with a slash command.

Detailed instructions on adding blocks can be found here.


↑ Table of Contents ↑

Add an Image

The media options panel will load with three options, Upload, Select Image, and Insert from URL.

There are three ways to add images – Upload, Select Image, and Insert from URL.
  • Upload allows you to choose an image from your computer and upload it to your site.
  • Select Image allows you to choose from the existing images on your site (Media Library) or choose from Google Photos or the Pexels Free Photo library.
  • Insert from URL allows you to use an image that is already live on the internet.

↑ Table of Contents ↑

Block Toolbar

Each block has its own block-specific controls that allow you to change the block right in the editor. Here is what the Image block toolbar looks like:

The Image Block toolbar has a series of buttons for options, including changing the block type and replacing the image.

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


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.

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 a wide width and full width, if those are supported by your theme.

GIF showing how to align an image to the left of a paragraph, as described in the text below this image.

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.

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.


↑ 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

You can add captions to images in two ways. If you wish to add a caption to a singular instance of an image, type it in the caption space below the image in the editor.

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

Each block has specific options in the editor sidebar that may provide more customization than the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
The block settings can be found in the sidebar.

↑ Table of Contents ↑

Image Settings

Image block settings

The Image block settings contain the following options:

  • Choose the style of the image, which can be set to Default (so the image appears as you inserted it) or 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.)
  • A text field to add an Alternative Text description, which is important for accessibility and SEO.
  • Image size options, described above.
  • A Replace button to swap the image for a different one.

↑ Table of Contents ↑

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the Image block as you see fit. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

↑ Table of Contents ↑

Additional AMP Options Available on Business and eCommerce Plans

On Business and eCommerce plans, the Image block includes the following options:

  • AMP noloading – Enable this option if you want to hide the loading symbol that shows while loading the embed on the AMP page.
  • AMP Lightbox effect – Enable this option to allow the AMP image lightbox component which lets AMP images to expand to fill the viewport.
AMP settings on Block image on Business and eCommerce site plans

Additionally, you have several options to set the AMP Layout settings. The AMP HTML Layout explains these attributes.

Not quite what you're looking for?

Get Help