Looking through the family photo diaries over at the Guardian website made me realise how much I like having thumbnails in picture galleries.
“Physician, heal thyself!”, I thought. “Ideally, my picture galleries should all have thumbnails too.”
The thing is, I’ve already got quite a few folders of images. It would be a lot of work to make thumbnails for each and every one. I also don’t want the added hassle of making thumbnails every time I have a new gallery I want to upload. As it is, when I add a new gallery all I have to do is upload a folder with the images and everything else is generated on the fly.
The way that my gallery script works, all you have to do is point it at a folder of images and it generates a link list. So if the folder has the images “01my_first_picture.jpg” and “02my_second_image.jpg”, a list would be generated with the link texts “My First Picture” and “My Second Picture” in that order.
I needed to replace the text with thumbnail images generated on the fly. Luckily, PHP allows me to do just that using its image functions.
The links in the unordered list now contain an image tag with the “src” attribute pointing to a PHP script. This PHP script takes a few parameters in the query string. There’s the “image” parameter which points to the image that needs to be manipulated. Then there’s a choice between sending a “percent” value to scale the image or else sending a “maxwidth” and “maxheight” in pixels.
I’ll show you what I mean. Let’s take the image that resides at /articles/writing/photoshop_actions/images/photograph.jpg
Here’s what you see if you pass a percent value of 10. Here’s what you get if you pass a maximum width and maximum height of 200. Try hacking the URLs to see different results.
For the random image in the sidebar, I’m simply generating the picture at 50% of the original size. For my picture galleries I decided to go with setting the maximum width at 56 pixels and the maximum height at 42. You can see it in action by looking at, for example, the pictures of Newgrange.
On the whole, the quality of the generated thumbnails is pretty good. There are some JPEG artefacts but that’s to be expected considering that most of the originals are already compressed at around 60% (I try to keep the file size down to around 15K).
I was pleased that I didn’t have to change the JavaScript for my picture galleries at all. As long the links have “title” attributes (in this case, it’s the text generated from the image’s filename), then there’s no problem using thumbnails instead of text for the links.