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:

Block toolbar that shows up above an Image block.

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 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.

If you wish to align an image within a paragraph so that text will wrap around it, insert the image just above the text. Click on the image and select left or right alignment so that the image appears alongside the Paragraph block. Finally, you can resize the image to your desired width and height.


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: Control the ratio 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°.
  • Appy: Commit your changes to the image.
  • Cancel: Exit the image editing tools, abandoning your changes.

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