Image

<figure> + <img>Image with optional caption and responsive sources.

This page shows you how to add images to your pages using the Unblock Image block — including captions, responsive sizes, and dynamic sources.

What it does

The Image block gives you a standard HTML image wrapped in a figure element. This is the correct semantic markup for any content image — photos, illustrations, diagrams, or screenshots.

The figure wrapper lets you add a caption below the image, and the image itself supports all native attributes like alt, srcset, and lazy loading.

When to use

• Content images — Photos, illustrations, diagrams
• Responsive images — With srcset and sizes attributes
• Captioned images — Descriptions below the image
• Dynamic images — With expression-based src attributes

Key attributes

Attribute	Purpose	Example
src	Image URL	/images/hero.jpg
alt	Alternative text	Team photo
width	Image width	800
height	Image height	600
loading	Loading behavior	lazy
srcset	Responsive sources	img-400.jpg 400w, img-800.jpg 800w
sizes	Responsive sizes	(max-width: 600px) 100vw, 50vw

Common mistake

Always set the alt attribute on every image. Screen readers rely on it, and search engines use it for indexing. If the image is purely decorative, set alt="" (empty string) — but never leave it out entirely.

Dynamic images

Use expressions to pull image sources from your content dynamically:

<img src="{{ post.thumbnail.url }}" alt="{{ post.thumbnail.alt }}">

This is useful when building templates where the image changes per post or page.

Adding captions

Add a <figcaption> element inside the figure to display a caption below the image:

<figure>
  <img src="photo.jpg" alt="Sunset over the mountains">
  <figcaption>Sunset over the mountains</figcaption>
</figure>

HTML output

The Image block produces a <figure> with a nested <img>:

<figure data-unbk-figure>
  <img src="image.jpg" alt="Description">
</figure>

Preset styles

The data-unbk-figure attribute applies the following default CSS:

[data-unbk-figure] {
  margin: 0;
}

[data-unbk-figure] img {
  display: block;
}

You can override these defaults with your own selectors.

Next steps

• SVG — For vector graphics and icons
• Iframe — For embedded content