Normally I don’t create such in depth and useful entries such as this, so enjoy it. Anyone with a blog or website may find themselves in a situation where they have to generate thumbnail images. You have all seen them on websites before, and I am sure you have seen several scripts to accomplish this. Let’s take a look at Part Digital Designs’ and icant.co.uk’s thumbnail scripts for PHP.

Thumbnail scripts should be chosen based on what types of source images are used. For example, if the pictures are of family members it would look pretty awful if their head’s were cut off on the thumbnails. Also, it is important to think about the size of the source image in pixels. Are we talking landscape pictures or more standard portrait sized pictures? Keeping these things in mind, lets proceed to the actual scripts.

First up we have the icant.co.uk script that can be found at http://icant.co.uk/articles/phpthumbnails/ . I have personally used this script and found it to work as advertised. The script works by setting a maximum height and width that the thumbnail can be. It then decides which is longer and uses that as the starting point to decide the proportional length of the opposite side. This will result in thumbnails of varying sizes and shapes, but the entire source image will always fit within in the assigned maximum requirements.

/* PHP Thumbnail Script from 
/* http://icant.co.uk/articles/phpthumbnails/ 
*/
function createthumb($name,$filename,$new_w,$new_h)
{
	$system=explode(".",$name);

	if (preg_match("/jpg|jpeg/",$system[1])){$src_img=imagecreatefromjpeg($name);}
	if (preg_match("/png/",$system[1])){$src_img=imagecreatefrompng($name);}
	if (preg_match("/gif/",$system[1])){$src_img=imagecreatefromgif($name);}
	$old_x=imageSX($src_img);
	$old_y=imageSY($src_img);
	if ($old_x > $old_y) 
	{
		$thumb_w=$new_w;
		$thumb_h=$old_y*($new_h/$old_x);
	}
	if ($old_x < $old_y) 
	{
		$thumb_w=$old_x*($new_w/$old_y);
		$thumb_h=$new_h;
	}
	if ($old_x == $old_y) 
	{
		$thumb_w=$new_w;
		$thumb_h=$new_h;
	}
	$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
	imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); 
	if (preg_match("/png/",$system[1]))
	{	
		imagepng($dst_img,$filename); 
	}elseif(preg_match("/jpg|jpeg/",$system[1]))
	{	
		imagejpeg($dst_img,$filename); 
	}else{

	  imagegif($dst_img,$filename); 
	}
	imagedestroy($dst_img); 
	imagedestroy($src_img); 
}

The second script works a bit differently and was created by Part Digital Designs’ that can be found at http://www.partdigital.com/tutorials/gd-thumbnail/ . I have also used this script personally on my own website and found it to be just as effective as the last script. However, this script creates what is known as cropped thumbnails. Cropped thumbnails generally cut an area out of the center of an image with a fixed height and width to create uniform images. As you can see from the script below, this is exactly how this script performs as well. The script locates the center of the image and cuts out a square of the assigned pixel size. Keep in mind that this effectively “cuts out” other sections of the source image to create the thumbnail. As a result, this script will work flawlessly with landscape images but needs some tweaking when it comes to portrait images.

/* PHP Thumbnail Script from 
/* http://www.partdigital.com/tutorials/gd-thumbnail/ 
*/
//Your Image
$imgSrc = "image.jpg"; 
 
//getting the image dimensions
list($width, $height) = getimagesize($imgSrc); 
 
//saving the image into memory (for manipulation with GD Library)
$myImage = imagecreatefromjpeg($imgSrc); 

///--------------------------------------------------------
//setting the crop size
//--------------------------------------------------------
if($width > $height) $biggestSide = $width; 
else $biggestSide = $height; 
 
//The crop size will be half that of the largest side 
$cropPercent = .5; 
$cropWidth   = $biggestSide*$cropPercent; 
$cropHeight  = $biggestSide*$cropPercent; 
 
 
//getting the top left coordinate
$c1 = array("x"=>($width-$cropWidth)/2, "y"=>($height-$cropHeight)/2);
 
 //--------------------------------------------------------
// Creating the thumbnail
//--------------------------------------------------------
$thumbSize = 60; 
$thumb = imagecreatetruecolor($thumbSize, $thumbSize); 
imagecopyresampled($thumb, $myImage, 0, 0, $c1['x'], $c1['y'], $thumbSize, $thumbSize, $cropWidth, $cropHeight); 
 
 // OPTIONAL
 //--------------------------------------------------------
// Creating the lines
//--------------------------------------------------------
$lineWidth = 1;
$margin    = 0;  
$green    = imagecolorallocate($thumb, 193, 252, 182);
 
for($i=0; $i<2; $i++){
	//left line
	imagefilledrectangle($thumb, $margin, $margin, $margin+$lineWidth, $thumbSize-$margin, $green); 
	//right line
	imagefilledrectangle($thumb, $thumbSize-$margin-$lineWidth, $margin, $thumbSize-$margin, $thumbSize-$margin, $green);
	//topLine
	imagefilledrectangle($thumb, $margin, $margin, $thumbSize-$margin-$lineWidth, $margin+$lineWidth, $green); 
	//bottom line 
	imagefilledrectangle($thumb, $margin, $thumbSize-$margin-$lineWidth, $thumbSize-$margin-$lineWidth, $thumbSize-$margin,$green);
	$margin+=4; 
} 

//final output  
	header('Content-type: image/jpeg');
	imagejpeg($thumb);
	imagedestroy($thumb);   
 

As you can see, this will fix the problem rather nicely.

 ///--------------------------------------------------------
//setting the crop size
//--------------------------------------------------------
if($width > $height){
	$biggestSide = $width; 
	$cropPercent = .5; 
	$cropWidth   = $biggestSide*$cropPercent; 
	$cropHeight  = $biggestSide*$cropPercent; 
	$c1 = array("x"=>($width-$cropWidth)/2, "y"=>($height-$cropHeight)/2);
}else{
	$biggestSide = $height; 
	$cropPercent = .5; 
	$cropWidth   = $biggestSide*$cropPercent; 
	$cropHeight  = $biggestSide*$cropPercent; 
	$c1 = array("x"=>($width-$cropWidth)/2, "y"=>($height-$cropHeight)/7);
} 

Now lets take a look at two sample images and see these scripts in action. The green part of the images is what’s left of the maximum allotted space of a 98 x 98 pixel box.

Portrait Thumbnail Resizing

Original Image 800px x 1176px

Widescreen Thumbnail Resizing

Original Image 495px x 296px

It is fairly obvious that when an image has varying sizes, the first script does not fare so well. The second example shows what happens when the source image has a bigger width than height. The result is a thumbnail that has a completely blank bottom half of the div box. However, the second script handles both types of images quite nicely with uniform size.

In most cases I prefer the partdigital modified script as opposed to the icant.co.uk script. The reason for this is that a uniform thumbnail image is critical to ensure that a webpage maintains a nicely flowing layout. Sections of the image may be sacrificed to achieve this, but it will ultimately be worth it. If you would like to see this script in action, then head over to CelebrityPWN.

Similar Blogs:
6 Tips For Parsing HTML
PHP Function To Return Mutiple Values
Awstats Will Lag Your Box
PHP: How To Fix "Class 'ZipArchive' Not Found"

Comments (1)

Add Comment

name:

email: *Will not be shown*

Enter a random number: *Used to prevent spam*

URL: *Optional*

comment:

Copyright 2008 Brant Tedeschi.