Gallery Thumbnail Support using Imagick

Real Thumbnail Assets

Recently we improved our gallery offering for enhanced listings and the UI we use to show these gallery images displays them as 120x80px thumbnails with click to enlarge displaying the original image.

For our first release of the gallery we just set the height and width using CSS on the original image. This approach is simple although the gallery page can be slow loading due to it downloading full sized copies of the assets rather than scaled down versions.

Using imagick we created 180x180px thumbnails which gave us some big file size savings leading to much faster loading times of the main gallery. Some of the images have gone from 250Kb+ right down to between 10Kb and 20Kb.

Creating Existing Image Thumbnails

For creating thumbnail versions of images that have already been uploaded we wrote a basic PHP script to transverse the gallery directory and use imagick to convert them into their respective thumbnails.

We decided to use _small as a suffix for thumbnail images so if we had an image named image.png its thumbnail would be image_small.png we also have a fixed image name.

The command to convert the image is simple and only has a few parameters,

/usr/bin/convert -thumbnail 180 /path/to/image/image.png /path/to/image/image_small.png

The script we used was PHP but you could accomplish this using a simple bash script,

$baseDir = '/path/to/the/gallery';
$dh = opendir($baseDir);
while (($filename = readdir($dh)) !== false) {
    if ($filename != '.' && $filename != '..') {
        $fileArray = explode(".", $filename);
        $newFileName = $fileArray[0] . '_small.' . $fileArray[1];
        exec('/usr/bin/convert -thumbnail 180 ' . $baseDir . '/' . $filename . ' ' . $baseDir . '/' . $newFileName);
    }
}

Create Uploaded Image Thumbnail

When a user uploads an image to their gallery we also create a thumbnail of the upload using the imagick PHP module.

Another approach would be to use exec or passthru to execute the system command above although we feel using the module give us more control and we also do not need to make a system call etc..

$nameArray = explode(".", $filename);
$newFileName = $nameArray[0] . '_small.' . $nameArray[1];
$thumb = new Imagick($filename);
$thumb->thumbnailImage($width, $height);
$thumb->writeImage($newFileName);

It is as simple as that we decided not to use GD for creating the thumbnails although this is a possible path you could go down. One good thing about using GD is it has better support as a module if your using a shared host but we can install all the modules we need using APT.

Conclusion

Adding support for true thumbnails to our gallery offering has allowed us to decrease page load time and save bandwidth as well which are both good things. It also saves downloading 1Mb files that may not be viewed.

Soon we will be adding support for unlimited image uploads to enhanced listings so providers can then upload as many images as required so keep a look out for this in the new year.

On a side note this is our 50^th blog post and we will be writing a round up of 2013 by having a look at what has been release and the new features and products The Care Homes Directory offers.