Create cropped thumbnails with GD Library

Part 1: Preparing your php document.

Open up your favorite script editor and make a new file. I prefer NotePad++ but any pure text editor will suffice.

Save the file as thumb.php

Part 2: Preparing your image

In this first step we need to grab our image and find its dimensions.

 
//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); 
 
 

Part 2: Set the size and placement of the crop.

In the next step we have to decide how big we want our crop to be and where it wll go in relation to our image.

Copy and paste the following code below.

 
///--------------------------------------------------------
//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);
 
 
 

I like to place coordinates in my work, I think it makes it much easier to visualize what I'm try to achieve. In this case I only need one coordinate (as opposed to four).

We have the crop size and position set, now all we need to do is create the thumbnail.

Copy the following code and paste it into your php document.

 
//--------------------------------------------------------
// Creating the thumbnail
//--------------------------------------------------------
$thumbSize = 60; 
$thumb = imagecreatetruecolor($thumbSize, $thumbSize); 
imagecopyresampled($thumb, $myImage, 0, 0, $c1['x'], $c1['y'], $thumbSize, $thumbSize, $cropWidth, $cropHeight); 
 
 
 

I like to add some style to my thumbnails and in this case a double border works quite nicely.

Copy and paste. . . you know the drill ;)

 
//--------------------------------------------------------
// 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; 
} 
 
 

Copy and paste the following code and presto! Instant thumbnail!

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

Your final result should look something like this.

I hope this tutorial has been helpful, if you have any questions or suggestions please feel free to contact me.