Media, composed once

Every example on this page uses the same semantic media renderer, the same catalog, and the same responsive delivery policy. Resize the page, open the gallery, or disable JavaScript—the content remains complete.

Seven card outcomes, one shared primitive

Arrangement, aspect, fit, and logical position change the result without creating separate card components.

Three golden sourdough loaves above the stacked card copy.
Bakery photography with a landscape crop.

Image above

A stable stacked composition keeps the image before the copy at every container size.

Warm artisan bakery storefront placed before the card copy.
Storefront photography in a responsive split card.

Image before

The split composition becomes horizontal only when its own container has enough room.

Image after

Copy remains first in reading order while the image follows it visually and in the document.

Artisan baker shaping sourdough placed after the card copy.
Workshop photography preserves meaningful source order.
Portrait of Ana presented in a vertical editorial frame.
Portrait aspect with cover fit.

Portrait editorial

The portrait profile selects a narrower responsive-image policy and a deliberate vertical crop.

Three artisan bakers behind high-contrast overlay copy.
Overlay media retains its own caption.

Readable overlay

Text sits over media only through a controlled dark surface and readable overlay recipe.

Baker shaping dough in a warm workshop, presented as a wide feature.
Featured workshop photography spans the parent grid.

Featured span

A featured card occupies the available grid recipe while keeping the same media and content slots.

Full photograph of sourdough loaves contained inside a square frame.
Square frame with the complete photograph visible.

Contained photograph

Contain fit keeps the full photograph visible so its behavior can be compared directly with cropped cover treatments.

Semantic figure and catalog credit

When a caption or credit belongs to an image, the shared renderer emits a real figure and figcaption. Credit text comes from the media catalog rather than duplicated page copy.

Goldkorn’s three bakers presented as a standalone semantic figure.
One image, one caption, and catalog-owned provenance. OpenAI

Static-first galleries

Every gallery item is present in source order. The scroll-snap track and native-dialog lightbox add convenience without hiding content behind JavaScript.

Scroll snap with lightbox

On a narrow container, swipe or scroll through the complete row. On wider containers, the same figures settle into a grid. Activate any image to open the accessible lightbox.

Static portrait grid

This gallery omits the lightbox entirely. All figures and captions remain available with no client-side behavior.

Built for speed

The page demonstrates the delivery policy as well as the visual outcomes. Lighthouse verifies the deployed result after every implementation pass.

Right-sized sources

Named rendition profiles generate bounded source widths and accurate sizes hints instead of sending one oversized image everywhere.

Intentional loading

Only the first showcase image is eager and high priority. Every later image is lazy-loaded and decoded asynchronously.

Small enhancement

The gallery ships complete HTML first. One isolated script enhances direct links with a native dialog, keyboard controls, and focus return.