Photo gallery

A page of photographs, laid out as a wall where each column is filled to the same depth rather than in Ghost's default rows. Tap a photograph and it opens full screen, with swipe, zoom and arrow keys.

Create the page

How many columns

The wall decides for itself: one column on a phone, two on a tablet, three on a wide screen. There is no setting to tune, and nothing to get wrong.

The columns balance themselves: each new photograph goes into whichever column is currently shortest, so a mix of portrait and landscape shots does not leave one column hanging.

Building a big wall

Ghost's nine-image limit is per card, not per page, and Quiet joins cards up for you.

The page is still a normal page

Everything else in the Ghost editor works. Write an introduction above the pictures, break the wall up with headings, drop in a quote. Quiet honours the editor's Show title and feature image switch too, so you can lead with a full-width photograph or start straight into the wall.

The full-screen viewer

Tap or click any photograph in the wall.

• Move between photographs with the arrow keys, a swipe, or the on-screen arrows.
• Zoom by clicking, pinching, or using the zoom button.
• Close with Esc, the close button, or a downward swipe.

Captions in the viewer

• A caption on a single image card appears under that photograph.
• A caption on a gallery card appears on every photograph in that set, because Ghost stores one caption for the whole card.
• Alt text is not shown as a caption. It is there for screen readers, which also hear the position in the set, for example "Image 2 of 11".

Press Esc while a caption is showing and it is dismissed for the rest of the visit, which helps a reader who wants the photograph and not the words.

Photographs that do not open

Two cases, both deliberate:

• An image linked to something else follows its link. Linking a photograph to a shop page, a post or an external site keeps that behaviour.
• SVG files never open. They are usually logos and diagrams rather than photographs.

An image linked to its own file becomes a zoom link, which is what Ghost's own "link to original" gives you.

Loading

Photographs below the fold load as the reader comes to them, and the viewer's own code is fetched the first time someone opens a picture. A long gallery page costs a visitor who never opens a photograph almost nothing.