Example post

This example post includes the Here's an example image with a caption:

Manga panel of a man saying "I am a scientist who has trusted in human science and industrial civilization. But what now?" — Here's what an image caption looks like. If you don't need to caption the image, don't include the `<figure>` or `<figcaption>` elements.

And here's an example image gallery. Click a numbered button to see that image (all galleries start showing the first image).

Gallery title

A photo of alpine mountains, blanketed in misty forests. — Here's the caption for the first image (alpine mountains).

A close-up photo of an older kitten with brown and white fur, looking directly into the camera. — And the caption for the second image (a cat).

A photo of the Eiffel Tower on a grey winter's day. — And finally, the third image's (the Eiffel Tower) caption.

The gallery CSS takes care of the label and caption numbers.

You can add more images to the gallery by adding more <input /> and <figure> elements (including the <img /> and <figcaption> inside the figure) and adding matching <label> elements in the gallery-controls element.

Each gallery on a single page needs a unique name. Each label-input pair needs a unique ID.

These galleries are CSS-only, no javascript.

If you don't plan on using image galleries, or have a different solution, then you can cut about 1.3 KB from the default Zonelots stylesheet by deleting the section headed "gallery".