Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the Inline Image Block

The Inline Image Block is one of six Image Block designs. It displays a plain image with an optional caption. This is our classic Image Block.

 

 

 

 

 

 

 

inline.jpg

Step 1 - Add an Inline Image Block

To add an Inline Image Block:

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Under Basic, select Image.
Tip: You can also switch layouts for an existing Image Block in the Design tab.

just-inline.jpg

Step 2 - Add an image

Click Add an image to upload an image from your computer, or click Getty to license a stock photograph. For more help, visit the Image Blocks overview.

Step 3 - Add text

Display text (a title and subtitle) over the image, so you can write directly on an image without adding text to the image file itself.

To add the text, click Write here to add a title and subtitle.

Tips:

  • If you don't see the Write here text, temporarily switch the caption style to Caption Below in the Design tab.
  • For the best display, keep the text short. Try to limit subtitles to one or two sentences. This maintains a nice balance between the words and the image. It also keeps the text visible on mobile devices.
  • The Inline layout automatically creates alt text to help search engines recognize your image. To add alt text but not a caption, add the caption text, and then select Do Not Display Caption in the Design tab.

inline-caption.jpg

Step 4 - Choose the caption display

In the Design tab, select a display option from the Caption drop-down menu:

  • Do Not Display Caption - No caption will display unless the image is viewed in lightbox.
  • Caption Below - Caption appears below the bottom-left corner of the image.
  • Caption Overlay - Caption appears over the image in a dark gray bar.
  • Caption Overlay on Hover - When the cursor hovers the image, a caption appears over the image in a dark gray bar.

Step 5 - Choose lightbox settings

Check Lightbox to have the image display in a lightbox when clicked.

  • Captions display in the lightbox even when set to Do Not Display Caption.
  • Using lightboxes disables clickthrough URLs.
  • Set your lightbox style by choosing Dark Overlay or Light Overlay from the drop-down.

Step 5 - Add an image link

To turn the image into a clickable link, in the Design tab, set a link from the Image Link drop-down menu. Choose from:

  • None - No link.
  • On Image - The entire image becomes a clickable link.

Use the Clickthrough URL field to set your link for the image. You can link your image to another page of your site, an external site, or a file.

  • Enabling the lightbox disables the clickthrough URL.
  • Unlike the other five layouts, the Inline layout doesn't support buttons.

Step 6 - Save changes

Click Apply to save your changes to the block.

Step 7 - Explore style options 

For the Inline layout, the caption style is set automatically. Unlike the other five layouts, there are no tweaks in the Style Editor specific to the captions. Instead, they typically follow the same font as your site's body text.

For information about how captions are styled in each template, visit Styling image captions.

Tip: For more style options, consider switching to the Stack Image Block layout.

Resize or crop the image

For the Inline Image block, if the image is narrower than the content area, the image will retain its width. You'll see blank space on both sides of the image within the block. This preserves the original image quality. To fill the blank space and display the image at the full width of the block, check Stretch in the image editor. Stretching an image may affect image quality.

There are several ways to adjust the size and cropping of the image:

Next steps

Once you've added an Image Block, you may want to explore the following options:

Was this article helpful?
1 out of 7 found this helpful
Using the Inline Image Block