Thumbnail generation with PHP tutorial

andreiash — Thu, 08 Jan 2009 08:19:25 +0000

No, it’s not yet another PHP thumbnail generation tutorial! I recently needed a function to:

create square thumbnails
don’t crop the initial image, but scale it and fill with white background
center the thumbnail in the square
call the function in a loop to process an entire folder

I found no suitable example and I decided that instead of digging too much it’s better to create my own function and a class for it.

Let’s start with a photo that we need to create a thumbnail for:

Nice kid, huh?

… and what we want to achieve:

First step would be the thumbnail generation snippet:

$square_size = 167;
$quality = 100;
//get original image attributes
list($width, $height, $type, $attr) = getimagesize($photos_dir."/".$file);
$thumb=imagecreatefromjpeg($photos_dir."/".$file);
$thumb_p = imagecreatetruecolor($square_size, $square_size);
imagecopyresampled($thumb_p, $thumb, 0, 0, 0, 0, $square_size, $square_size, $width, $height);
//save the file
imagejpeg($thumb_p,$thumbs_dir."/".$file,$quality);

This would be the result:

As we can see, the photo is distorted and we need to scale it, by adding 2 variables:

//set dimensions
if($width> $height) {
$width_t=$square_size;
//respect the ratio
$height_t=round($height/$width*$square_size);
} elseif($height> $width) {
$height_t=$square_size;
$width_t=round($width/$height*$square_size);
}
else {
$width_t=$height_t=$square_size;
}

We also need to change the imagecopyresampled function call to add these 2 new variables:

imagecopyresampled($thumb_p, $thumb, 0, 0, 0, 0, $width_t, $height_t, $width, $height);

The new result would be:

The image is not distorted anymore but now it’s not centered. We need to move the point where the scaled image appears on the thumb to the right with a number of pixels equal to the half of the difference between height and width of the thumb. This offset is implemented also in the imagecopyresampled function, the first 2 zeros from the set of 4.

//set dimensions
if($width> $height) {
$width_t=$square_size;
//respect the ratio
$height_t=round($height/$width*$square_size);
//set the offset
$off_y=ceil(($width_t-$height_t)/2);
$off_x=0;
} elseif($height> $width) {
$height_t=$square_size;
$width_t=round($width/$height*$square_size);
$off_x=ceil(($height_t-$width_t)/2);
$off_y=0;
}
else {
$width_t=$height_t=$square_size;
$off_x=$off_y=0;
}

We also need to change the imagecopyresampled function call to add these 2 new variables:

imagecopyresampled($thumb_p, $thumb, $off_x, $off_y, 0, 0, $width_t, $height_t, $width, $height);

The new thumbnail look like this:

It’s better, the last thing I want is to set a white background to the thumb and I’m done. By default imagecreatetruecolor is creating a black canvas with no parameter to change it to white. In order to do this we need to declare a white background and fill the canvas with it BEFORE adding the scaled image:

$bg = imagecolorallocate ( $thumb_p, 255, 255, 255 );
imagefill ( $thumb_p, 0, 0, $bg );

Now it’s what I want:

The whole source code is the following:

function set_thumb($file, $photos_dir=‘uploads/photos’,$thumbs_dir=‘uploads/photos/thumbs’, $square_size=167, $quality=100) {
//check if thumb exists
if (!file_exists($thumbs_dir."/".$file)) {
//get image info
list($width, $height, $type, $attr) = getimagesize($photos_dir."/".$file);

//set dimensions
if($width> $height) {
$width_t=$square_size;
//respect the ratio
$height_t=round($height/$width*$square_size);
//set the offset
$off_y=ceil(($width_t-$height_t)/2);
$off_x=0;
} elseif($height> $width) {
$height_t=$square_size;
$width_t=round($width/$height*$square_size);
$off_x=ceil(($height_t-$width_t)/2);
$off_y=0;
}
else {
$width_t=$height_t=$square_size;
$off_x=$off_y=0;
}

$thumb=imagecreatefromjpeg($photos_dir."/".$file);
$thumb_p = imagecreatetruecolor($square_size, $square_size);
//default background is black
$bg = imagecolorallocate ( $thumb_p, 255, 255, 255 );
imagefill ( $thumb_p, 0, 0, $bg );
imagecopyresampled($thumb_p, $thumb, $off_x, $off_y, 0, 0, $width_t, $height_t, $width, $height);
imagejpeg($thumb_p,$thumbs_dir."/".$file,$quality);
}
}

*Note: Nobody was hurt during this tutorial. The cute dude is Razvan‘s son, Danut.

Andrei DANEASA » class

Thumbnail generation with PHP tutorial