Menu

Permanent Tourist

A personal website by Mark Howells-Mead

Image gallery grid layout

When Flickr launched the current version of their website, they joined a number of online photo sharing services in presenting images in a grid pattern, where all of the images – whether in horizontal, square or vertical format – all fit together nicely in a tidy column layout. I chose the basic idea of the layout as the basis for an improvement to my Flickr plugin for WordPress, through which individual galleries here on my website are presented.

(More details of the plugin will follow at some point during the next twenty years, when the code is clean enough to publish in public.)

The grid is a great solution because it gets around the problem of cropped images: layouts such as the former at 500px.com, in which images were cropped to a square, meant that portrait photographs were often presented without their heads in the grid display. This improved layout allows all of the images to be presented in their original proportions and has been implemented in varying forms across most social media websites since last year.

After a trial run with a JavaScript version of a complex mathematical solution by French programmer¬†Christopher Chedeau, which worked well in simpler layouts, I recently changed to a newer and simpler version by Ed Lea: CollagePlus. Where Christopher’s examples and explanations¬†of solutions in place at Google Plus, Facebook and so on are great and very useful – not to say cleverly engineered – I wanted a more robust and flexible version for the slimmer, simpler upcoming version 8 of my website layout.

The CollagePlus solution is based on JavaScript helper library jQuery and improves the layout of images in the grid; the basic HTML contains nothing but a list of <img> tags and simple CSS (display:inline-block) to make the images appear next to one another. The jQuery script then zips through the images, measures them, and applies a mathematical formula to ensure that they all appear in a tidy layout.

The layout is flexible and adjusted when a website visitor re-sizes the browser window, to ensure that the tidy layout is retained. Thanks to this script, the size of the screen on which you’re viewing my website is irrelevant: you’ll see a tidy and modern grid layout in the galleries.

Full-sized grid layout