Clever Customization Turns Thumbnail Galleries Into Beautiful Image Montages


Web developer and photographer Nicholas Sherlock came up with a pretty cool customization recently. Inspired by Flickr’s image montage layout that does proper justice to landscape and portrait photos alike, he took a stab at writing some code that does the exact same thing to any thumbnail gallery.

He chose to implement and test out the idea first with SmugMug’s thumbnail galleries, because they’re so darn small. After putting together the code, he managed to turn a gallery that looks like this:


Into something that’s a lot more enjoyable to look at:


Even though he designed the code around SmugMug’s gallery, any gallery that doesn’t feature right-click protection could be converted properly by the code. The only other limitation is that his code doesn’t yet support pagination, but he’s willing to add it if people express enough interest.

You can check out a live demo over on his website by clicking here. Or, if you want to go ahead and try it out yourself (it’s only in beta, so implement at your own risk) you can find all of the necessary code and instructions over on the Digital Grin forum here.

(via Reddit)

  • ramanauskas

    This is a heck of an effort by one guy. Unfortunately, like Flickr, it drastically short-changes portrait-oriented photos. It wold be very complex to give portraits equal space, of course, since it would involve having some images span more than one row…

  • AdminHarald

    This is great that Sherlock did this. But like ramanauskas says: it’s still giving short shrift to Verticals. Flickr does the same by filling to the Height of the row. 500px (in Flow mode) is able to span rows with verticals, but they still crop the images. I was able to find a theme called Attracto that has a Portfolio function that gives Verticals their due: it fills images to a set Width (not Height), which makes Verticals the stars (at the expense of Horizontals!).

    What’s really needed is a “Smart Grid” that lets Verticals span rows when needed or some other kind of nifty logic that gives any aspect ratio a roughly equal footprint in pixel dims. Anyone doing it?