Storyboard

Usage

Storyboard is a composition block for editorial portfolio pages — project case studies, interior-design galleries, and any layout where copy should be dispersed among images rather than grouped in one column.

The parent Storyboard grid holds two kinds of children in a single two-column flow:

• Image — the core Image block (core/image)
• Storyboard Text — a story passage container for headings and paragraphs

Children appear left-to-right, then top-to-bottom, in the order you arrange them. Row heights vary naturally: a tall portrait image can set the height of its row while a shorter neighbour stretches to match. That uneven rhythm is intentional.

Insert a Storyboard block and add Image and Storyboard Text children (or duplicate the first pair) to build an alternating layout, then swap images and edit passages.

Parent and child blocks

Select the Storyboard parent to change grid-wide settings (gap, block width). Select a child to edit that image or text passage.

Use the block toolbar breadcrumb, parent button, or List View to jump between the grid and its children. Drag children to reorder them — visual order always matches DOM order so the editing experience stays predictable.

Add blocks using the inserter below the last child. Only Image and Storyboard Text are allowed inside the grid; the structure cannot be broken by inserting unrelated blocks.

Grid layout

• Desktop — two equal columns with a consistent gutter between items
• Mobile — collapses to a single column (breakpoint 781px)
• Odd child count — the last item may sit alone in its row with empty space beside it; this is expected
• Ordering — purely child order; there is no row wrapper block. Do not use dense grid packing — reordering in the editor must match what visitors see

Shorter cells vertically centre their content within the row (images via flex; text via the Vertical Alignment setting on Storyboard Text).

Storyboard Settings (parent)

Sidebar controls under Storyboard Settings:

• Gap — space between grid items (0–16, quarter-rem steps; default 4 = 1rem)

Images (core/image)

Images use the familiar core Image block — not a custom media block — so editors get the standard media library UI, aspect-ratio controls, and link options.

Natural height (default) — leave Aspect ratio unset. The image keeps its intrinsic proportions and can be the tall element that sets row height. This is the usual choice for editorial rhythm.

Matched pairs — when two images share a row and should align in height, set Aspect ratio on one or both images and choose Resolution → Cover in the image block settings. Cropping uses the attachment's focal point (set in the media library or via Dirigible AI tools) so portraits are not cropped from the centre.

Alt text is resolved from the attachment at render time site-wide, so updates from the Dirigible AI Alt Text generator flow to every placement of that image.

Storyboard Text (child)

Each Storyboard Text block is one story passage — a container for Heading and Paragraph blocks. Add, remove, and reorder paragraphs and headings inside the passage as needed.

Sidebar controls under Storyboard Text Settings:

• Vertical Alignment — Top, Center (default), or Bottom within the grid cell when a neighbouring image is taller

Content lives in nested core blocks (not a single custom attribute), so editors use the familiar heading and paragraph controls they already know.

Block width

Storyboard supports Wide and Full alignment from the block toolbar. With no alignment set, the block follows default content width.

Tips

• Start from the Storyboard Project pattern, then replace placeholder images with project photography.
• Alternate runs of two images with a text passage for the dispersed-narrative feel shown in Silverleaf-style project pages.
• Use natural-ratio images for most rows; reserve aspect-ratio + Cover for rows where two images should visually agree in height.
• Set focal points on portrait-heavy galleries before enabling Cover — the theme applies them automatically on the front end.
• Reorder children freely; the grid always reflects your drag order left-to-right, top-to-bottom.