Media
gallery and video-embed — pictures and film, without the weight.
gallery
A grid of images, each openable full size.
The theme set
Click any tile to see it full size.
type: gallery
heading: The theme set
subhead: Click any tile to see it full size.
columns: 3
lightbox: true
items:
- { image: assets/example/tile-1.png, alt: The rosette on a pale sea-green field, caption: Sea }
- { image: assets/example/tile-2.png, alt: The rosette on a warm clay field, caption: Clay }
- { image: assets/example/tile-3.png, alt: The rosette on a dusk-violet field, caption: Dusk }
- { image: assets/example/tile-4.png, alt: The rosette on a cool slate field, caption: Slate }
- { image: assets/example/tile-5.png, alt: The rosette on a deep ink field, caption: Ink }
- { image: assets/example/tile-6.png, alt: The rosette on an inverted sea field, caption: "Sea, inverted" }alt describes the image and is what a screen reader reads; caption is shown
and is editorial. They are different jobs — "Lisbon, 2024" is a caption, not a
description of a photograph.
video-embed
A self-hosted file or a YouTube/Vimeo URL.
See it in ninety seconds
type: video-embed
heading: See it in ninety seconds
src: "https://www.youtube.com/watch?v=aqz-KE-bpKQ"
poster: assets/example/poster.png
caption: Nothing loads until you press play.Nothing loads until the visitor presses play. A poster image and a play button is all that ships — which matters most for third-party embeds, where the alternative is loading a player and its trackers on every page view whether or not anyone watches.
Choosing between them
| You want | Use |
|---|---|
| A video the visitor chooses to watch | video-embed |
| Video as a backdrop with copy over it | media-panel with video: |
| Several images to browse | gallery |
| One image supporting an argument | zigzag or showcase |
| Images inside documentation | <Screenshot> in MDX |
Assets
Everything lives under assets/ in the content root and is referenced by a
path relative to it:
image: assets/gallery/office.pngzellij sync-assets copies the directory into public/_zellij/assets/, which
is what turns that authored path into a served one. Subfolders are yours to
organise.