Fed up of manually creating thumbnails of all your images prior to uploading? This tutorial goes through the basics of automatically creating a thumbnail image when an image is uploaded. This is a very useful and time-saving tool for any content management system.

We are going to use the GD library in PHP to create our thumbnails. Since PHP 4.3 the GD library has been built-in, however, you can download the latest version from www.boutell.com/gd. Check your hosting supports the GD library by printing out phpinfo() and check for support. We are only going to be creating thumbnails from JPEG images so you won’t require support for GIF or PNG.

The processes involved in creating our thumbnail image are:

1. Upload the image from a web form
2. Save the image to the server
3. Create the thumbnail
4. Save the thumbnail
5. Show both images to the user

The form

The image will be uploaded using a simple web form. The code below shows a basic form which allows the user to select an image and upload it. Be sure to include the enctype definition.

index.htm

<form name="upload" method="post" action="upload.php" enctype="multipart/form-data">

<input name="file" type="file" /> 
<br /> 
<input type="submit" value="Upload" />

</form>

The script

First and foremost we must check an image has been uploaded and it’s in the correct JPEG format. We use the MIME type value to check the format of the image.

upload.php

<?php

#check an image has been uploaded
if (empty($_FILES["file"]['name'])){
#no image uploaded - send the visitor back to the form
header("Location: index.htm");
break;
}

#check the image is in the correct format
$mime = $_FILES["file"]["type"];
if (!strstr($mime, "jp")){ 
#image not a JPEG - send the visitor back to the form
header("Location: index.htm");
break;
}

?>

Specify the folder in which the image is to be uploaded and the thumbnail created. Make sure you have the correct privileges set for this folder.

#set the folder for saving the images
$uploaddir = 'images/';

We are now going to save this image into the folder specified using the filename “image.jpg”.

#enter the filename of the image
$filename = "image.jpg";

#specify the complete directory
$uploadfile = $uploaddir.$filename;

#save the image
move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile);

Now the interesting part - creating the thumbnail image. We are going to create a 100 pixel wide thumbnail. The height will be relative to the original image to keep the aspect ratio in tact. You can change the JPEG quality of the thumbnail and the filename to use.

#set the width of the thumbnail in pixels
$width = 100;

set the quality of the JPEG image (0-100)
$quality = 80;

#set the name of the thumbnail file
$filename_thumb = "thumb.jpg";

In order to create the thumbnail we must work out the relative height of the image. We are using a fixed width of 100 pixels and the height will be in proportion to the width.

#get the uploaded image size
$imagesize = @getimagesize($uploadfile);

#width of uploaded image
$imagesize_w = $imagesize[0];

#height of uploaded image
$imagesize_h = $imagesize[1];

#calculate the relative height
$height = (100 / ($imagesize_w / $width)) * .01;
$height = @round($imagesize_h * $height);

The next step is to create the thumbnail image from the original image, using the width, height, and quality settings.

#create new instance of the image
$image = ImageCreateFromJPEG($uploadfile);

if ($image) {

#create the blank thumbnail image
$thumb = @ImageCreateTrueColor($width, $height);

#resize the image into the thumbnail image
@ImageCopyResampled($thumb, $image, 0, 0, 0, 0, $width, $height, $imagesize_w, $imagesize_h);

#save the thumbnail using the filename and quality
imagejpeg($thumb, $uploaddir.$filename_thumb, $quality);

}else{

echo 'Error creating thumbnail image';

}

Providing there are no errors the images will now be stored in the “images” folder. If an image already exists the image will be overwritten. We now redirect the user to a page displaying both the images.

header("Location: result.htm");
break;

Results

The results page displays both the uploaded and thumbnail images.

result.htm

<p>Uploaded Image</p>
<img src="images/image.jpg" />

<p>Thumbnail Image</p>
<img src="images/thumb.jpg" />

<p><a href="index.htm">Return to form</a></p>

All done!

That’s it - you have now created an automatic image re-sizing tool. Think of the time you will now save. For more information on the GD library or any of the code featured above visit www.php.net for the online manual.

PHP/MySQL Programming