How I created a photo book inspired image gallery

Ross Hall

December 13, 2021
(Updated on December 8, 2021)

Graphic showing multiple web pages across a tablet

Something that irks me on photo heavy websites is the way galleries work. I tire of clicking on thumbnails, trying to work out where the close button is and then click another. Given a part of my work is photography, I want a better way of presenting my work.

I want visitors to see them in their entirety.

How things used to be

All featured images on the site have their own WordPress post. With the image is the caption and links if they’re available for sale as prints. They’re given the category “Photography”, and this is used for the photo index. 

View the old index and you’d see a collection of square thumbnails. Click on the image and you get the full post.

Screenshot of the original image photo category section showing the ubiquitous square tiles
Screenshot of the original photo gallery when the site launched.

An online photo book

I wanted something more like a photo book. In these, you see a single image on a page with a caption. You flick through the pages and enjoy the images in all their glory. 

My basic layout for each image took this as inspiration. The user’s screen is treated as a single page, with one image and its caption on each canvas. It’s given a healthy border and space for the caption (the associated post’s title). The whole page is topped and tailed with a title page and footer.

Graphic showing side-by-side comparison of the original wireframe outline and final implementation of a single page photo
Comparing the original wireframe sketch and eventual implementation of the full screen image canvas

The image loading problem

The images are large, and in “standard” html, they’re loaded all at once. This slows the page down, makes it take a while to render on the screen and leaves the user with half-rendered images depending on how quickly they scroll.

Lazy loading solves this. It’s a technique where images are only loaded as and when they’re needed. Open the page and the first image loads. Scroll down and the second image loads and so on. It makes for a smoother experience.

There are two ways of doing this. The first is “native”, a way of writing the HTML code so the web browser does the work for you. This isn’t widely used, so the second way is to add some JavaScript.

<img loading="lazy" src="url-to-image" srcset="responsive-image-sizes" width="width_px" height="height_px">

Outline code for native lazy loading. Note the image width and height are given explicit values, which stops the page “shuffling around” as they wait to be loaded.

I use a plugin on the site for the JavaScript lazy load. When I built the page code, I had to change the way I coded index images to get the plugin to work properly.

<img loading="lazy" data-src="<?php echo $image_url; ?>" data-srcset="<?php echo $image_srcset; ?>" <?php echo $image_width_and_height; ?> data-sizes="auto" alt="<?php echo $image_alt_text; ?>">
    <img loading="lazy" src="<?php echo $image_url; ?>" srcset="<?php echo $image_srcset; ?>" <?php echo $image_width_and_height; ?> data-sizes="auto" alt="<?php echo $image_alt_text; ?>">

Code generating an image compatible with both native lazy load and the A3 plugin. Note the use of a “noscript” declaration for users with Javascript switched off in their browser.

Flicking through pages

Finally, there’s how to help the user view the images. An endless scroll makes it easy to zoom past individual photos and make for a frustrating experience. I want the scroll to stop for each image, almost like turning a page.

Two pieces of code do this. The first is “position: sticky”, a CSS declaration that fixes the image canvas to the top of the screen. As the page scrolls, the image comes into view. When its container reaches the top of the screen, it fixes there. That’s where it stays until the next one comes along.

position: sticky; top: 0;

CSS that makes the image canvas fix to the top of the page when scrolling down the page.

Only this doesn’t stop scrolling. The next canvas will float straight into view.

Buried in CSS are a set of declarations that stop scrolling. This means the scrolling stops when the canvas is at the top of the screen and the user has to scroll again to keep moving. Again, like flicking the pages on a book.

.container { overflow-x: hidden; overflow-y: scroll; }
.inner { scroll-snap-align: start; scroll-snap-type: y mandatory; scroll-snap-stop: always; }

CSS to stop the page scrolling when each image canvas is in place. Note the container should have overflow: scroll explicitly defined to work properly.

The final result

Four hours of work and a couple of cups of coffee later, I have a new way of presenting my photography on this site. It’s more akin to a photo book and presents the material in its best light without being a burden on the user’s experience.

I'm Ross, a digital editorial designer and content creator from the UK now living in Japan. I help growing companies plan, source, produce and promote a range of content. Find out more

Never miss an update - subscribe to my weekly email alert.