Gallery

Listing images in its frontmatter turns a page into a gallery. The pictures below are shown in the order given, alternating between a left and a right column on larger screens so each column stacks naturally whatever the image sizes. On small screens they form a single column. Click an image to expand it.

Adding a gallery #

Put the image files into priv/static/images and list their file names under images:

---
title: Gallery
images:
  - grain.jpg
  - donkey.jpg
  - cross.jpg
---

The markdown content of the page is rendered above the gallery, so a short introduction like this one works fine. Everything else about the page behaves as usual: it can have a rank to appear in the menu, tags, a banner, or be Protected with a secret.

JPEG, PNG, GIF, WebP and AVIF files are supported.

Lightbox #

Clicking an image opens it in a full-screen overlay on a dark background. Clicking the image, the background or the close button dismisses it again.

Blur-up placeholders #

Large photos take a moment to arrive. To avoid empty boxes and layout jumps, a tiny 20 pixel wide version of every gallery and banner image is generated when the server starts and embedded directly into the page as a blurred placeholder. The real image fades in over it once it has loaded, and the placeholder carries the aspect ratio, so the layout is stable from the first paint.

Images dropped into priv/static/images while the server is running are picked up by the file watcher and get their placeholder right away. Deleting an image removes it again. An unreadable image is logged and shown as it is.

The placeholders are created with libvips through the image library, which ships precompiled binaries for common platforms.