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

4 responses to “Image gallery grid layout”

  1. shawn avatar

    It might be my eyes, but the last image in the collage is low-pixel stretched so blurry.?? At first I thought it was a progressive’jpeg but it still hasn’t snapped into focus. oops?

  2. shawn avatar

    umm.. it’s systematic,.. Jumping into the wedding grid has the same problem.. that last image is pixel-challenged but blown up anyway. At least clicking brings up the image in beautiful quality. :-)

  3. Mark Howells-Mead avatar
    Mark Howells-Mead

    That’s because the images are currently loaded at thumbnail resolution and are stretched up to the required dimensions in some cases. Thanks for the feedback though! I’ll be working on a Flickr image post-processing script soon, which will improve the overall image quality and loading times.

  4. Mark Howells-Mead avatar
    Mark Howells-Mead

    I’ve just tweaked the settings in the plugin to allow the final “row” to be incomplete. This will ensure that thumbnail images won’t be stretched up excessively.

Leave a Reply

Your email address will not be published. Required fields are marked *