View Full Version : thumbnail script is producing poor quality thumbs please help

10-10-2012, 10:30 PM
Hi All,
i have a thumbnail generator function

function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth )
// open the directory
$dir = opendir( $pathToImages );

// loop through it, looking for any/all JPG files:
while (false !== ($fname = readdir( $dir ))) {
// parse path for the extension
$info = pathinfo($pathToImages . $fname);
// continue only if this is a JPEG image
if ( strtolower($info['extension']) == 'jpg' )
#echo "Creating thumbnail for {$fname} <br />";

// load image and get image size
$img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
$width = imagesx( $img );
$height = imagesy( $img );

// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = $thumbWidth;#floor( $height * ( $thumbWidth / $width ) );

// create a new temporary image
$tmp_img = imagecreatetruecolor( $new_width, $new_height );

// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

// save thumbnail into a file
imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
// close the directory
closedir( $dir );

the thumbnails that are created are created by resizing the width and height to a set size 148px in my case. so it creates a square.

now because its just resizing the images they are distorted and dont look as good as they could/should. i looked on facebooks gallery and they have a square thumbnail image similar to mine but it is perfect no stretched images and the main part of the image is always in shot and quite close up.

so my question is how do i modify the above function to produce better quality thumbnails?

many thanks

10-11-2012, 05:29 PM
This line
$new_height = $thumbWidth;#floor( $height * ( $thumbWidth / $width ) ); sets your height to equal your width, but if you remove $thumbWidth; of $new_height = $thumbWidth; and replace it with the section that's commented out
floor( $height * ( $thumbWidth / $width ) ); You should get what you want.

You might have to change the dimensions of the displayed thumb nail to make it square and uniform again.

10-11-2012, 08:02 PM
hi mate thanks for your reply,

i did what you suggested and it does improve the quality but the image heights are all different some are less than the required 148px.

should i find out whether the image is portrait or landscape and then perform the above suggestion on either the height or width depending on which is longer?

then i would need to crop them so that they are square again? is this correct


10-12-2012, 06:31 PM
Yes you need to crop the larger than 148px. Easy way is to put image into a div with these dimensions. If you have to move the image around in the div use relative posioning on the image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style type="text/css">
width: 148px;
height: 148px;
overflow: hidden;
top: -7px;
left: -4px;
<div id="thumb">
<img src="images/BamburghInNorthumbria.JPG" height="" width="" alt="">

As for the smaller than 148 height try subbing this for the calculate thumbnail size

// calculate thumbnail size
if($height/$width >= 1){
$new_width = $thumbWidth;
$new_height = floor($height * ($thumbWidth /$width ));
$new_height = $thumbWidth;
$new_width = floor($width * ($thumbWidth /$height));

Len Whistler
10-14-2012, 06:29 AM
I'm not sure of the exact syntax but I would also consider setting the jpg quality settings - maybe try a 90. The quality would be the last change made to an image, just before saving it.

Quick example - will need research for correct syntax.

// save thumbnail into a file
imagejpeg($tmp_img,NULL,90); // image quality 0-100
imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );