Skip to content

Titles & Descriptions ​

Draw text on each tile — where it comes from, Classic or Overlay, and how to style it.

By default a gallery is images only. Content Settings turns on a title and a description per tile, pulled from the media's own text.

Where the text comes from ​

Each item carries an Alt Text, Title, Caption and Description, editable per gallery in the Edit Gallery modal. Content Settings decides which of those fields becomes which piece of on-tile text:

ControlChoicesDefault
Image Title SourceAttachment Title · Attachment CaptionAttachment Title
Image Description SourceAttachment Caption · Attachment DescriptionAttachment Caption

Don't point both at the caption

It's allowed, and it prints the same words twice. If your media only has captions, use the caption for the title and leave the description off.

Turning it on ​

  1. Open Content Settings in the inspector.
  2. Turn on Image Title. Pick a source and an HTML Tag (H1–H6 or Span — H4 by default).
  3. Turn on Image Description. Pick a source and a Description Limit.

Description Limit is worth a moment: it clamps the text by words or by lines, and it's responsive. Four lines on desktop and two on mobile is a sensible starting point.

Classic or Overlay ​

Content Display Style is the layout decision.

StyleWhat it looks likeGood for
ClassicText sits under (or above) the image, in the flow.Galleries people read — a portfolio with project names, a directory.
OverlayText sits on top of the image.Galleries people look at — the caption is a label, not the content.

Classic ​

Two more controls appear:

ControlWhat it doesDefault
Content PositionsTop or Bottom — text above or below the media.Bottom
Content AlignmentLeft / Center / Right.Left

Classic works on Justified, Grid, Masonry, Metro and Staggered. The image keeps its geometry and the tile grows by the height of its text, so a square grid tile stays square and its row simply gets taller.

Overlay ​

ControlWhat it doesDefault
Overlay StyleFull tints the whole tile, text centred. Position anchors a box to one edge.Full
Overlay Positions(Position) Center, Left, Right, Top, Bottom.Center
Overlay Size(Position) How much of the tile the box takes, 0–100 %.75
Content VisibilityAlways, or On Hover.Always
Overlay OpacityHow dark the tint is, 0–1.0.4

On Hover reveals from the anchor edge

With Position and On Hover, the box slides in from the edge it's anchored to — a bottom-anchored box rises from the bottom. Center and Full have no edge to come from, so they fade instead.

Overlay Opacity dims the tint, never the text

The tint is a separate layer behind the words. Turning it down makes the photo easier to see without making the caption harder to read — the same trade a photographer makes with a physical scrim.

Two layouts are Overlay-only ​

Thumbnails and Perspective don't show the Content Display Style control, and draw content as an overlay:

  • Perspective rebuilds its tiles into a rotating 3D plane and clones them to loop. A Classic text block there would be skewed with the plane, duplicated across every clone, and scrolled past before anyone read it.
  • Thumbnails could do Classic, but a slider's caption reads better over the slide than pushing it shorter. It's a design call, not a technical one.

Your stored choice isn't rewritten. Move the gallery to another layout and Classic comes back.

Styling ​

The Style tab holds the typography. The title's and the description's controls each appear only when the matching toggle is on — there's nothing to style otherwise.

ControlNotes
Title Typography · Title ColorFamily, weight, style, transform, decoration, responsive size, line height, letter and word spacing.
Description Typography · Description ColorThe same set.
Content Background StyleColour or gradient behind the content region. Always shown — it styles the box, not either text.
Border · Border Radius · PaddingThe content box.

Contrast, especially on Overlay

Text over a photograph is only readable if the tint does enough work. Set Overlay Opacity high enough that the palest image in the gallery still supports the text — not just the darkest one. Accessibility →

Things worth knowing ​

Blank fields produce blank tiles. If your images have no titles or captions, turning this on gives you a gallery of empty labels. Fill the text in first — the Edit Gallery modal is the fastest way.

Pick the heading tag deliberately. H4 is the default because a gallery is usually nested inside a page that already has an H1 and H2s. Twelve H2s in a row is a worse document outline than twelve H4s. If the text is decorative rather than structural, use Span.

Masonry measures captions. It packs columns from real heights, so it accounts for how tall each caption came out. Nothing for you to do — but it's why a masonry gallery with captions settles a fraction later than one without.

Staggered keeps its rhythm. The stagger offset is measured from the image height rather than the whole tile, so captions of different lengths don't knock the columns out of alignment.

Where to go next ​