Galleries
Pictures in a grid, each opening full size, with thumbnails made by the build.
Making one#
A gallery is pictures between <div class="gallery"> and </div>, in a page or a post, each with a blank line before and after:
<div class="gallery">
</div>
The words in brackets describe each picture for screen readers, and the words in quotes are its caption. A gallery holds only pictures: anything else in it stops the build. The gallery page is an example, with a hundred and eighteen.
How it looks#
The pictures stand in a grid of tiles of one shape, three wide to four high, which spreads wider than the text on a wide screen. The more pictures a gallery holds, the smaller its tiles: from 25, and again from 61. Pointing at a tile, or moving to it with the keyboard, lifts it and shows its caption.
Two other looks are a word away:
<div class="gallery columns">: each picture whole, in its own shape, in columns, with its caption under it. Pointing at one lifts it off the page and darkens its caption.<div class="gallery squares">: square tiles, with captions only when opened.
Opening a picture#
A tile opens its picture as large as the window allows, over the page, with its caption and links to the previous and next pictures. The arrow keys move through them and Esc closes it. Focus moves into the picture and back to its tile, and while it's open the page behind it is out of reach, as behind any dialog, so Tab and a screen reader stay with the picture. It works without JavaScript too: the links do everything, and the back button closes it.
Thumbnails#
Give each picture at full size. The build makes a thumbnail of every JPEG and PNG for its tile, so a page of many pictures loads quickly and fetches a full picture only when it's opened. A thumbnail is as large as its tile needs on a sharp screen, measured on its short side: 400 pixels in a gallery of up to 24, 320 from 25, 260 from 61, and 400 in columns. Thumbnails are kept in .cache/thumbs/ between builds, so only new or changed pictures take time. A picture already smaller than a thumbnail is used as it is.
An animated GIF's tile is a still of its middle frame, so the grid holds still; it plays only when opened, and readers who ask for less motion see the still there too.
A link around a picture, [](/images/large/a.jpg), opens the picture it links to instead, and that one is thumbnailed.