This afternoon I started a project that I’d been meaning to do for a while now, writing my own image gallery script. I have done similar systems before (see my PhotoLounge, for instance), but I had an idea recently for something a bit more like the way Google Images displays its images. I’ve actually almost finished it now, save for a bit more refining and some aesthetic improvements, but the basic core of the system is there. The code will now display all jpg images in a specified folder, creating thumbnails if they are not already present.

The thumbnails generation really is the clever bit. First of all the script goes through the whole of the folder of images you give it, and for each one looks to see if there as a thumbnail for it already there. If there isn’t, it creates one. This is done using the GD library in PHP, first getting the original image size with imagesx() and imagesy(), scaling appropriately (maximum thumbnail size of 120px, either in width or height depending on aspect ratio), creating a resampled image using imagecopyresampled() and saving with imagejpeg() (having already checked to make sure the thumbs folder exists, and creating it if it doesn’t).

For those for whom all of this is a foreign language, I apologise. You can, however, see a demonstration of this code so you can see for yourself what is going on – there’s the main gallery script, which generates a basic output, and also a container page that calls the gallery script and formats it nicely with some neat CSS. Next on the to-do list will be to refine the formatting slightly, add in some additional information about the image, and test the whole thing in some more browsers to make sure it’s all working as it should.

Whether I’ll use this on my PhotoLounge remains to be seen, as I quite like it as it is for now. But I may end up pulling in the script for various clients of mine who want galleries on their web sites, as this will be an easy and effective way of doing it. No complicated setup, no database to worry about, just upload some photos and the script will handle the rest. It would even be possible to generate mid-res versions too if there was a need for it, so you would click on the thumbnail to get a bigger preview, then on something else to download the whole thing in all its glory.

Categories: Technology


Simon · 2 November 2006 at 9:12 pm

Sounds great! I’d be very interested in getting a copy for my website when it is complete – if the price is right!

Phill · 3 November 2006 at 9:57 am

Nice, Matthew — I’ve been looking for something like that for the Fordham website. It would be good to have something simple without having to worry about creating databases and such things… (when it comes to photo galleries, my thinking is that simple is almost better. And if you have a large number of photos, uploading them all via FTP is a good idea, which you can’t always do with database-based photo galleries).

Matthew · 3 November 2006 at 1:01 pm

I’ve just been doing a bit more tweaking, adding in pagination (you can set how many pictures to display on each page) and generally tidying up the display slightly. The idea is that the main gallery script gives you a very basic unformatted output, which you include in another page which handles the layout and formatting through CSS. This should make it pretty powerful, because you can use exactly the same gallery code and display it differently depending on what you want to do with it. For instance, you could show one picture per page if you wanted to, like a slideshow.

If people are interested, I might release this as a Beta so you can try it out for yourself! It’s not complicated, but it can be quite powerful if you know what you’re doing.

Phill · 3 November 2006 at 1:45 pm

Yeah that would be cool 🙂

JRB Technology · 14 November 2006 at 11:58 pm

on display in the gallery…

I made a WordPress plug-in today that lets me upload an image everytime I post. It automatically scales the image to the width I specify ( 150 in this case ) and also lowers the quality by 10%. This way I can focus more on writing in this blog, then sc…

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.