Blocks

Blocks »Image Block

Use the Image block to make a visual statement on your pages and posts.

Table of Contents

Add an Image Block

Add the Image block to a page by clicking on the Add Block button. Alternatively, you can type /image and press enter.

Add images with a hotkey command.
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.

Learn more about the Free Image Library here.


↑ 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 icons on the Image block toolbar, starting from the left, are:

  • Change block type
  • Move the block up or down
  • Change alignment (left, center, or right + wide and full-width options if supported by theme)
  • Apply fading and other effects
  • Insert Link
  • Crop the image
  • Replace the image
  • More Options

Align Images
Align an image within a paragraph block.
Align an image within a paragraph block.

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

Alignment buttons with Align Left highlighted

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.

A 'Wide' image in the editor.
A ‘Wide’ image in the editor.

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.

If you choose a Custom 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.

In addition, if you wish to link an image to a page or post on your site, in the search field, 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 an Attachment Page, Media File, or Custom URL.

↑ Table of Contents ↑

Resize Images

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

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

To resize an image, click it to reveal the resize handles. Then, click on the resize handles and drag the image to your desired size.

To resize an image, click it to reveal the resize handles. Then, click on the resize handles and drag the image to your desired size.

Alternatively, in the block settings on the right-side, adjusting the width and height dimensions will fine-tune the image size. There are also convenient options in the block settings for setting the image to 100, 75, 50, and 25% of its original size.


↑ 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 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 Replace → Edit button on the image block.


↑ 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

Images can be changed by percentages or pixel dimensions.

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

You can also change the width and height dimensions of an image in 25% increments, or with exact pixel dimensions.

There are many ways to change an image size from the WordPress editor.
There are many ways to change an image size from the WordPress editor.

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

Pages: 1 2 View All

Not quite what you're looking for?

Get Help