Thursday, January 03, 2008   —   Vienna 0 Comments

This article will show you how to create thumbnails dynamically. For example, these three images have been dynamically generated from the same source.

The above images are generated with a URL like this one: www.petrosalema.com/blog/articles/burger_thumb_100.jpg; where 100 is changeable.

The benefits of being able to dynamically generate images of varying size from a single source file are too obvious to get into. But I will mention that I'v done some research and websites like Amazon, Wikipedia, IMDb, iStockPhoto, and Flickr, where there are large numbers of images to manage, all use this approach.

Below are images of varying size dynamically generated image from Wikipedia using this URL pattern: upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Hamburger_sandwich.jpg/100px- Again, to generate each image 100 is simply changes to the desired width which in this case was 200 and 300.

Let get straight to the code.

list($w, $h) = explode("_", $target);

$filename = $src;

$image_info = @getimagesize($filename);

if(!$image_info) { header("HTTP/1.0 404 Not Found"); return; }

list($src_w, $src_h, $type) = $image_info;

switch($type)
{
	case IMAGETYPE_GIF: $src_img = imagecreatefromgif($filename); break;
	case IMAGETYPE_JPEG: $src_img = imagecreatefromjpeg($filename); break;
	case IMAGETYPE_PNG: $src_img = imagecreatefrompng($filename); break;
	default: return false;
}

if(!$src_img) { return false; }

//w and h are target dimensions
$scale_w = (!$w || !is_numeric($w)) ? 1 : $w / $src_w;
$scale_h = (!$h || !is_numeric($h)) ? 1 : $h / $src_h;

if($w && $h)
{
	$scale = ($scale_w < $scale_h) ? $scale_w : $scale_h;
}
else
{
	$scale = $w ? $scale_w : $scale_h;
}

$dst_w = $src_w * $scale;
$dst_h = $src_h * $scale;

$dst_img = imagecreatetruecolor($dst_w, $dst_h);
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dst_w, $dst_h, $src_w, $src_h);

$path_info = pathinfo($filename);

header("Content-type: {$image_info["mime"]}");

switch(strtolower($path_info["extension"]))
{
	case "gif": imagegif($dst_img, null, 100); break;
	case "jpg":
	case "jpeg": imagejpeg($dst_img, null, 100); break;
	case "png": imagepng($dst_img, null, 100); break;
	default: return false;
}

imagedestroy($src_img);
imagedestroy($dst_img);

Okay, so our script takes two parameters; a string $target containing the width and height we want to scale our image to, and a string $source, which is the image source file.

So to generate a scaled version of the Google logo like so: , we would call it like this: www.petrosalema.com/blog/articles/dyn_thumb?target=100_20&src=www.google.com/intl/en_ALL/images/logo.gif

Notice that the $target string is formatted width_height or width. In the latter case we scale the image respective to the width.

list($w, $h) = explode("_", $target);

First we take the parameter $target, split it using the explode function, and assign the peices to variables $w and $h.

if(!$image_info) { header("HTTP/1.0 404 Not Found"); return; }
list($src_w, $src_h, $type) = $image_info;

The getimagesize function does more than just fetch the height and width of the file. It also contains header info which will be useful in determining the type of image we have to output later on.

Then we create an image object using imagecreatefrom[gif|jpeg|png] based on the header info from our source file

//w and h are target dimensions
$scale_w = (!$w || !is_numeric($w)) ? 1 : $w / $src_w;
$scale_h = (!$h || !is_numeric($h)) ? 1 : $h / $src_h;

Here, we check whether we have passed a target width and height value. If a value does exist we determine the scale factor by dividing the target with the actual dimension. Otherwise the default scale factor for each is 1 (no scaling). So if no target parameter is passed then the image won't be scaled at all.

if($w && $h)
{
	$scale = ($scale_w < $scale_h) ? $scale_w : $scale_h;
}
else
{
	$scale = $w ? $scale_w : $scale_h;
}

$dst_w = $src_w * $scale;
$dst_h = $src_h * $scale;

If we supplied both a target width and height value then let's check to see which dimension of the source image will require most scaling. We use the biggest scaling factor on both the width and height to maintain the image's original width and height ratio. Otherwise it wouldn't be scaling, it would be squashing and stretching, right?

The new image dimension are derived by multiplying the source image's width and height with the biggest scale factor

$dst_img = imagecreatetruecolor($dst_w, $dst_h);
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dst_w, $dst_h, $src_w, $src_h);

Here is where the actual resizing is done.

$path_info = pathinfo($filename);

header("Content-type: {$image_info["mime"]}");

switch(strtolower($path_info["extension"]))
{
	case "gif": imagegif($dst_img, null, 100); break;
	case "jpg":
	case "jpeg": imagejpeg($dst_img, null, 100); break;
	case "png": imagepng($dst_img, null, 100); break;
	default: return false;
}

imagedestroy($src_img);
imagedestroy($dst_img);

Finally we flush out the image. Phew! That's it. Hoe you find this useful.