Image

The Image block allows you to add and customize images within your content, enhancing visual appeal and engagement.

How to add an image block

Adding images to your content is a breeze! Here’s how.

  1. Click on the ‘+’ button and choose the Image block.
  2. Alternatively, type /image and press enter.

Block toolbar

After adding an Image block, you’ll find these handy tools in the block toolbar.

Transform to

The ‘Transform to’ button lets you change an image into other things like ‘Gallery’, ‘Columns’, ‘Cover’, ‘Group’ or ‘Media & Text’ easily. This button changes how your text looks so you can make your writing look just right with a simple click.

Drag & Move

Use the six-dot icon to drag your block, or the up and down arrow buttons let you move a block one position higher or lower.

Alignment

The ‘Alignment’ tool lets you adjust the width of your image in the image block. Simply click the icon, and a menu will appear with options. You can set your image to no alignment, max 1200px wide, or full width. This feature helps you customize your image to look exactly how you want with ease. Additionally, you can align your image to the left, center, or right.

Duotone

Add a duotone filter to apply creative effects to your images. This feature allows you to create a two-tone color effect without losing the details of your original image.

Add caption

Enhance your images by adding a caption. This feature allows you to provide context or additional information about the image, making your content more informative and engaging.

Easily insert links into your images by pasting a URL or typing to search for the desired link. You have several options for linking.

  • Link to image file: Direct viewers to the image file.
  • Link to attachment page: Direct viewers to the attachment page.
  • Expand on click: Scale the image with a lightbox effect for a more immersive viewing experience.

Crop

When you click ‘Crop’, you can zoom, adjust the aspect ratio, and rotate your image. After setting your desired adjustments, click ‘Apply’ to crop the image or ‘Cancel’ to discard the changes.

Add text over image

When you click ‘Add text over image’, the image block will convert into a Cover block, allowing you to overlay text on the image seamlessly.

Replace

Click the ‘Replace’ button to change the image. You can select a new image from the Media Library or upload a new one.

More Options

The More options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.

Block settings

Access the block settings from the editor sidebar, visible on the right side panel when you click on the block.

Settings

  • Alternative text: Describe the purpose of the image. Leave empty if decorative.
  • Aspect ratio: Adjust the width and height proportions of the image.
  • Width/Height: Set the specific pixel dimensions of the image.
  • Resolution: Select the size of the source image for optimal display.

Styles

Choose different styles such as ‘Default’ or ‘Rounded’.

Filters

You can select the Duotone filter to create a two-tone color effect on your image.

Border

Customize the image’s border radius by specifying units such as px, %, or rem.

Advanced

Add HTML anchors or CSS classes for unique styles or navigation. The HTML anchor settings allow you to create a unique anchor text for the Group block, enabling you to link it to another web page.

Additional resources