Introduction
Depending upon how it's done, displaying a page of thumbnail images can be very cumbersome. Allowing the browser to resize images requires the client browser to download the entire, full-size image, then clumsily resize the image to a specified size. This causes the page to load very slowly and creates unavoidable distortion in the resulting images. The other option is to make separate thumbnail images for each individual image. This is fine if you only plan to display a few images, but becomes unrealistic on a large scale or a site involving dynamic images. Fortunately there are ways around these problems using the GD library in PHP.
This tutorial will outline how to write a PHP script to create thumbnail images on the fly. Since this requires the GD library, you will need an installation of PHP with at least GD 2.0.1 enabled (you can use older versions with a slight change which I will explain).
The script we will be writing receives one parameter on the query string which corresponds to the relative path of the full-size image. This address is to be placed as the src field of an image tag. An example image tag might look like this: <img src="/thumbnail.php?dir/image.png">. With no further ado let us procede to the source code.
Source Code
# Constants
define(IMAGE_BASE, '/var/www/html/mbailey/images');
define(MAX_WIDTH, 150);
define(MAX_HEIGHT, 150);
# Get image location
$image_file = str_replace('..', '', $_SERVER['QUERY_STRING']);
$image_path = IMAGE_BASE . "/$image_file";
# Load image
$img = null;
$ext = strtolower(end(explode('.', $image_path)));
if ($ext == 'jpg' || $ext == 'jpeg') {
$img = @imagecreatefromjpeg($image_path);
} else if ($ext == 'png') {
$img = @imagecreatefrompng($image_path);
# Only if your version of GD includes GIF support
} else if ($ext == 'gif') {
$img = @imagecreatefrompng($image_path);
}
# If an image was successfully loaded, test the image for size
if ($img) {
# Get image size and scale ratio
$width = imagesx($img);
$height = imagesy($img);
$scale = min(MAX_WIDTH/$width, MAX_HEIGHT/$height);
# If the image is larger than the max shrink it
if ($scale < 1) {
$new_width = floor($scale*$width);
$new_height = floor($scale*$height);
# Create a new temporary image
$tmp_img = imagecreatetruecolor($new_width, $new_height);
# Copy and resize old image into new image
imagecopyresized($tmp_img, $img, 0, 0, 0, 0,
$new_width, $new_height, $width, $height);
imagedestroy($img);
$img = $tmp_img;
}
}
# Create error image if necessary
if (!$img) {
$img = imagecreate(MAX_WIDTH, MAX_HEIGHT);
imagecolorallocate($img,0,0,0);
$c = imagecolorallocate($img,70,70,70);
imageline($img,0,0,MAX_WIDTH,MAX_HEIGHT,$c2);
imageline($img,MAX_WIDTH,0,0,MAX_HEIGHT,$c2);
}
# Display the image
header("Content-type: image/jpeg");
imagejpeg($img);
|
Explanation
We'll now proceed through the script and explain each block in excruciating detail. I hope you have caffeine ready, you may need it.
# Constants
define(IMAGE_BASE, '/var/www/html/mbailey/images');
define(MAX_WIDTH, 150);
define(MAX_HEIGHT, 150);
|
First we should define a few constants. IMAGE_BASE points to the directory from which images are to be served. Only images in or under this directory are available. MAX_WIDTH and MAX_HEIGHT specify the maximum size to which images will be shrunk. If an image is already smaller than these sizes, it is returned without modifications. Proportions are also retained so that if the width is reduced by a factor of 2, the height will be reduced by that same factor.
# Get image location
$image_file = str_replace('..', '', $_SERVER['QUERY_STRING']);
$image_path = IMAGE_BASE . "/$image_file";
# Load image
$img = null;
$ext = strtolower(end(explode('.', $image_path)));
if ($ext == 'jpg' || $ext == 'jpeg') {
$img = @imagecreatefromjpeg($image_path);
} else if ($ext == 'png') {
$img = @imagecreatefrompng($image_path);
# Only if your version of GD includes GIF support
} else if ($ext == 'gif') {
$img = @imagecreatefrompng($image_path);
}
|
The image location is passed as the entire query string as explained above. To prevent people from accessing images outside of the specified path, the string replace function is used to remove any "..".
The extension is checked to find out what type of image has been requested. GD has a number of different load functions. Each is of the form imageloadfrom[type](). I have included only the three most common image formats, though others can easily be added.
If the extension is unrecognized or the specified file does not exist, $img is left empty. When this occurs, an error is generated (see below). The @ before the load functions suppresses errors so that the user won't be shown a page of garbage.
NOTE: gif support isn't available in the newer versions of GD. If your version of GD does not support gif images, you should probably remove the lines for handling gif images.
# If an image was successfully loaded, test the image for size
if ($img) {
# Get image size and scale ratio
$width = imagesx($img);
$height = imagesy($img);
$scale = min(MAX_WIDTH/$width, MAX_HEIGHT/$height);
|
imagesx() and imagesy() return the width and height of the image respectively. The maximum size of the image is then divided by the actual size of the image. This results in a scaling ratio. This scaling ratio is multiplied by the actual image size in order to give the reduced size. This value is calculated for both the width and height seperately; though the smaller of the two is used. By using the same value for both width and height, we preserve the correct proportions.
# If the image is larger than the max shrink it
if ($scale < 1) {
$new_width = floor($scale*$width);
$new_height = floor($scale*$height);
# Create a new temporary image
$tmp_img = imagecreatetruecolor($new_width, $new_height);
# Copy and resize old image into new image
imagecopyresized($tmp_img, $img, 0, 0, 0, 0,
$new_width, $new_height, $width, $height);
imagedestroy($img);
$img = $tmp_img;
}
}
|
If the scale ratio is greater than or equal to 1 the image does not need to be modified in any way. Otherwise, the image must be reduced in size by that value. The new image size is generated by multiplying the scale by the current size.
Using these new dimensions a buffer image is created using imagecreatetruecolor(). If you are using a GD library prior to 2.0, you will need to change this function to imagecreate(). The true color version of this function was added in 2.0 to preserve color integrity when parts of an image are copied, which we are about to do. The older function will still work fine for many images, but high color photos and the like may not maintain the correct colors using the older function.
The original image is then resized into the buffer image. Since we will now be using this new image, we are able to free the original image with imagedestroy(). The buffer image is then renamed to $img.
# Create error image if necessary
if (!$img) {
$img = imagecreate(MAX_WIDTH, MAX_HEIGHT);
imagecolorallocate($img,0,0,0);
$c = imagecolorallocate($img,70,70,70);
imageline($img,0,0,MAX_WIDTH,MAX_HEIGHT,$c2);
imageline($img,MAX_WIDTH,0,0,MAX_HEIGHT,$c2);
}
|
As was explained earlier, if the image's extension was unrecognizable, or the file did not exist all together, $img was left empty. If this is the case, we need to generate a place holder image to notify the user that the image they requested was unavailable. We do this by drawing a black box with a gray X through the middle. You may want to make this more explicit, by adding text or even redirecting the browser to a premade image.
# Display the image
header("Content-type: image/jpeg");
imagejpeg($img);
|
The image is finally displayed to the user in jpeg format.
Conclusion
As you can see, adding on-the-fly generated thumbnails to your website is quite easy to accomplish with GD and PHP. Now if you're anything like me, all you need to do is find something worth displaying on your website. That's the part I can't help you with, sorry.
|
