Introduction

If you have a folder with images and want to show those images on your website, you will probably think about showing thumbnails of each of them. This way you will be able to better organize your content and minimize the download time on the page by considerably reducing the size of the images. Additionaly, the user will be able to see the full size image by clicking on the thumbnail picture.

Getting all images from a specific folder

We should be able to retrieve every image from a specific folder by calling the following functions:

First we check for every files in the folder if they are pictures. The $file array should contain every pictures within the $path folder.

Dimensionning and drawing the thumbnail image

The challenge in thumbnail dimensioning can be summarize in one question: How will I do to reduce picture, with different sizes, into the same pattern? To answer this question, you will have to consider some factors.

• An easy way would be to reduce the images with a constant factor for both width and height for each image. For instance, if you want to display an image "image1.gif" with 260px width and 400px height reduced by factor 5, you can do that:
  
  <IMG SRC="image1.jpg" width="52px" height="80px">
  
  
  
  Reduced image:
  
• The problem is if you do that for a lot of different images, you page will still have to load the full images size. if you need to display 30 thumbnails on a page, each image having 500k, the total size of the page will be 15mb! Avoiding loading and reducing the full image by using IMG tags properties width and height, helps your webpage to load faster. For this, you will need to create a new reduced image of the real one.
  
  The solution is to create a reduced copy for each image. To be even more performant, the copy will be done only once, and the reduced images will be stored on the server and accessed like the original one.
• If you want to show many thumbnails on the same page, like a mosaic, you will also have to consider a standard dimension for each thumbnail image so that they can look harmonious within the same shape. We will call this shape, the thumbnail pattern. Using a reduction factor to achieve that, is not a good idea, since if you use different size images, you would get different sized thumbnails
  
  Building the PHP coding that will allow your thumbnails to have a standard size (with maximum height or maximum width) in which each thumbnail image will fit is quite easy. It's like reducing the image until it fits in the thumbnail pattern!
  
  The thumbnail pattern dimensions should be considered as a rectangle where the thumbnail image should fit:
  
  
  
  //retrieve caracteristics of the image width, height, type of image and other attributes list($originalwidth, $originalheight, $type, $attr) = getimagesize($image); $thumbwidth = $originalwidth; $thumbheight = $originalheight; //getting the scale factor according to the maximal dimension if ($originalwidth > $patternwidth) $dividew = $originalwidth / $patternwidth; if ($originalheight > $patternheight) $divideh = $originalheight / $patternheight; //dividing original sizes by the biggest scale if ($dividew > $divideh) { if ($dividew > 0) { $thumbwidth = $patternwidth; $thumbheight = $originalheight / $dividew; } } else { if ($divideh > 0) { $thumbheight = $patternheight; $thumbwidth = $originalwidth / $divideh; } }
  
  At this point we are able to get the dimensions of the thumbnail picture $width and $height considering the maximum thumbnail size $thumbwidth and $thumbheight and we can show the thumbnail image:
  echo "<img id=\"$image\" src=\"".retrieveimagethumb($image, $width, $height, $originalwidth, $originalheight)."\" height=\"".floor($height)."px\" width=\"".floor($width)."px\">";
  
  Putting the code in a function we can have:
  function clearname($text) { $pos = strrpos($text, "."); if ($pos === false) $pos = strlen($text); $pos1 = strrpos($text, "/"); if ($pos1 === false) $pos1 = 0; return substr($text, $pos1 + 1, $pos - $pos1 - 1); } function drawthumb($patternwidth, $patternheight, $image) { echo "<TD>"; echo "<TABLE CELLPADDING=\"0\" CELLSPACING=\"0\" BORDER=\"0\" WIDTH=\"".$patternwidth."\" HEIGHT=\"".$patternheight."\">"; //header echo "<TR STYLE=\"background: lightgray;\" HEIGHT=\"5%\">"; echo "<TD COLSPAN=\"3\" WIDTH=\"".$PARAM['thumbwidth']."\">"; echo "</TD>"; echo "</TR>"; //sides let's define some margin $imagemaxwidth = $patternwidth * 0.9; $imagemaxheight = $patternheight * 0.8; //retrieve caracteristics of the image width, height, type of image and other attributes list($originalwidth, $originalheight, $type, $attr) = getimagesize($image); $thumbwidth = $originalwidth; $thumbheight = $originalheight; //getting the scale factor according to the maximal dimension if ($originalwidth > $patternwidth) $dividew = $originalwidth / $imagemaxwidth; if ($originalheight > $patternheight) $divideh = $originalheight / $imagemaxheight; //dividing original sizes by the biggest scale if ($dividew > $divideh) { if ($dividew > 0) { $thumbwidth = $imagemaxwidth; $thumbheight = $originalheight / $dividew; } } else { if ($divideh > 0) { $thumbheight = $imagemaxheight; $thumbwidth = $originalwidth / $divideh; } } echo "<TR style=\"background: lightgray;\" HEIGHT=\"80%\">"; echo "<TD WIDTH=\"5%\">"; echo "</TD>"; echo "<TD id=\"TD$image\" WIDTH=\"90%\" ALIGN=\"CENTER\" VALIGN=\"MIDDLE\" style=\"background: gray; border: 1px solid\">"; echo "<img id=\"$image\" src=\"".retrieveimagethumb($image, $thumbwidth, $thumbheight, $originalwidth, $originalheight)."\" border=\"1\" height=\"".floor($thumbheight)."px\" width=\"".floor($thumbwidth)."px\" onclick=\"".$image."\">"; echo "</TD>"; echo "<TD WIDTH=\"5%\">"; echo "</TD>"; echo "</TR>"; // trailler echo "<TR style=\"background: lightgray;\" HEIGHT=\"15%\">"; echo "<TD CLASS=\"normal\" COLSPAN=\"3\" WIDTH=\"".$patternwidth."\" ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">"; echo clearname($image); echo "</TD>"; echo "</TR>"; echo "</TABLE>"; echo "</TD>"; }

Showing the thumbnail picture instead of the original picture

The following function's goal is to retrieve the thumbnail image according to the original image, and create it if it does not exists or the thumbnail pattern size has changed.
To do that, we only need to have the original image file and its dimensions and the previously calculated thumbnail dimensions. If the thumbnail does not exist yet, or, if it exists, but its dimensions are different from the previous calculated one, then a new thumbnail will be created at the location defined by:

original image: path / last_folder / imagename . extension
thumbnail image: path / last_folder / thb_last_folder / imagename . extension

For instance: the thumbnail image for /images/stamps/mystamp.gif is located at /images/stamps/thb_stamps/mystamp.gif

Coding the function:

Creating the thumbnail image (if it doesn't exist yet)

The following function will verify the existence of the thumbnail and if it exist, erase it. Then according to the type of the original picture, it will create a new image with smaller dimensions.

Calling the main functions

Sample

Check this link out.

History

2008-09-29: First version