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.
<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.
Leave a Reply