[SOLVED] Advice on creating thumbnails using gd library

[php_beginner_83]

HI

 

I need some advice.  I'm trying to create a photo album and now I have a pretty simple gallery working but now I want to try something more.  I'm thinking of creating thumbnails for each image in my albums.  The thumbnails will be displayed, and when the user clicks on a thumbnail the larger sized image will be displayed.  I've been reading about using phps gd library to create the thumbnails and have read both the pros and cons and now I'm confused.  Do you think this would be a good way to go about it or should I just create thumbnails using Photoshop and display those??

I'd appreciate any advice you can give.

 

Thanks

[Alex]

PHP GD is fine for this type of thing. I wrote a class that can do this very easily if you like..

 

class Image
{
private $image, $ext, $file;

const CENTER = 0, CENTER_LEFT = 1, CENTER_RIGHT = 2, TOP_CENTER = 3, TOP_LEFT = 4, TOP_RIGHT = 5, BOTTOM_CENTER = 6, BOTTOM_LEFT = 7, BOTTOM_RIGHT = 8;

public function __construct($im=NULL)
{	
	if(empty($im)) return true;
	$info = @getimagesize($im);
	$backtrace = debug_backtrace();
	if(!$info)
		return die('<b>Fatal error:</b> \'' . $im . '\' is not a valid image resource on <b>line ' . $backtrace[0]['line'] . ' [' . $backtrace[0]['file'] . ']</b>');
	$ex = explode('/', $info['mime']);
	$this->ext = $ex[1];
	$func = 'imagecreatefrom' . $this->ext;
	$this->image = @$func($im);
	$this->file = $im;
	return true;
}
public function setImage($im)
{
	$info = @getimagesize($this->file);
	$backtrace = debug_backtrace();
	if(!$info)
		return die('<b>Fatal error:</b> \'' . $im . '\' is not a valid image resource on <b>line ' . $backtrace[0]['line'] . ' [' . $backtrace[0]['file'] . ']</b>');
	$ex = explode('/', $info['mime']);
	$this->ext = $ex[1];
	$func = 'imagecreatefrom' . $this->ext;
	$this->image = @$func($im);
	$this->file = $im;
	return true;
}
public function resize($width, $height, $porportional=FALSE, $percent=NULL, $max=NULL)
{
	$backtrace = debug_backtrace();
	if(empty($this->image)) return die('<b>Fatal error:</b> Invalid call to Image()->resize, no image is set on <b>line ' . $backtrace[0]['line'] . ' [' . $backtrace[0]['file'] . ']</b>');
	$info = Array(imagesx($this->image), imagesy($this->image));
	if($porportional)
	{
		if(empty($max) && empty($percent)) return false;
		if(empty($max))
		{
			$new_width = $info[0] * ($percent/100);
			$new_height = $info[1] * ($percent/100);
		}
		else
		{
			if($info[0] < $max && $info[1] < $max) return false;
			$new_width = ($info[0] > $info[1]) ? $max : ($info[0]/$info[1]) * $max;
			$new_height = ($info[0] > $info[1]) ? ($info[1]/$info[0]) * $max : $max;
		}
	}
	else
	{
		$new_width = $width;
		$new_height = $height;
	}
	$new_image = imagecreatetruecolor($new_width, $new_height);
	imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $new_width, $new_height, $info[0], $info[1]);
	$this->image = $new_image;
	return true;
}
public function crop($width, $height, $x, $y, $position=NULL)
{
	$backtrace = debug_backtrace();
	if(empty($this->image)) return die('<b>Fatal error:</b> Invalid call to Image()->crop, no image is set on <b>line ' . $backtrace[0]['line'] . ' [' . $backtrace[0]['file'] . ']</b>');
	$info = Array(imagesx($this->image), imagesy($this->image));
	if($width > $info[0] || $height > $info[1]) return false;
	if(!empty($position) && $position >= 0 && $position <= 
	{
		switch($position)
		{
			case CENTER:
				$x = ($info[0] - $width)/2;
				$y = ($info[1] - $height)/2;
			break;
			case CENTER_LEFT:
				$x = 0;
				$y = ($info[1] - $height)/2;
			break;
			case CENTER_RIGHT:
				$x = ($info[0] - $height);
				$y = ($info[1] - $height)/2;
			break;
			case TOP_CENTER:
				$x = ($info[0] - $width)/2;
				$y = 0;
			break;
			case TOP_LEFT:
				$x = 0;
				$y = 0;
			break;
			case TOP_RIGHT:
				$x = ($info[0] - $width);
				$y = 0;
			break;
			case BOTTOM_CENTER:
				$x = ($info[0] - $width)/2;
				$y = ($info[1] - $height);
			break;
			case BOTTOM_LEFT:
				$x = 0;
				$y = ($info[1] - $height);
			break;
			case BOTTOM_RIGHT:
				$x = ($info[0] - $width);
				$y = ($info[1] - $height);
			break;
			default:
				return false;
			break;
		}
	}
	$new_image = imagecreatetruecolor($width, $height);
	imagecopyresampled($new_image, $this->image, 0, 0, $x, $y, $width, $height, $width, $height);
	$this->image = $new_image;
	return true;
}
public function save($loc, $compression=100)
{
	$backtrace = debug_backtrace();
	if(empty($this->image)) return die('<b>Fatal error:</b> Invalid call to Image()->save, no image is set on <b>line ' . $backtrace[0]['line'] . ' [' . $backtrace[0]['file'] . ']</b>');
	$func = 'image' . $this->ext;
	return $func($this->image, $loc, $compression);
}
public function output()
{
	$backtrace = debug_backtrace();
	if(empty($this->image)) return die('<b>Fatal error:</b> Invalid call to Image()->output, no image is set on <b>line ' . $backtrace[0]['line'] . ' [' . $backtrace[0]['file'] . ']</b>');
	header('Content-type: image/' . $this->ext);
	$func = 'image' . $this->ext;
	$func($this->image);
}
}

 

An example of how to use it would be like:

 

//include class
$image = new Image('path/to/image');
$image->resize(width, height);
$image->save('path/to/new/location');

 

There's a lot of different features like scaling it down porportionally, setting max widths, max heights etc.. Just depends on exactly what you're looking for.

[Bricktop]

Hi php_beginner_83,

 

As AlexWD says, GD is fine for this - the obvious benefit is that you can make thumbnail creation automatic.

 

If you opt to use Photoshop, for every image you upload, you will need to manually create a thumbnail and upload it.

 

If, however, you have a massive image library, it probably wouldn't be the best solution.

 

If you want to use GD to create images on the fly, the following code snippet should be ideal:

 

<?php 
$i      = $_GET['i'];
$maxsize = $_GET['maxsize'];
            
if ($maxsize == '') {
$maxsize = 100;
}

// The file
$filename = $i;

// Set a maximum height and width
$width  = $maxsize;
$height = $maxsize;

// Content type
header('Content-type: image/jpeg');

// Get new dimensions
list($width_orig, $height_orig) = getimagesize($filename);

if ($width && ($width_orig < $height_orig)) {
$width = ($height / $height_orig) * $width_orig;
} else {
$height = ($width / $width_orig) * $height_orig;
}

// Resample
$image_p = imagecreatetruecolor($width, $height);
$image   = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);

// Output
imagejpeg($image_p);
imagedestroy($image);
imageDestroy($image_p);
?>

 

Save the above as thumbnail.php

 

Now, you can create thumbnails by using:

 

thumbnail.php?i=image.jpg

 

or

 

thumbnail.php?i=image.jpg&maxsize=100 (if you want to specifiy a thumbnail size)

 

Hope this helps.

[php_beginner_83]

Thanks for that.  It gives me a lot to work from   Your code will save the thumbnail right?  and not just display it then destroy it.

[php_beginner_83]

Thanks Bricktop. 

[Bricktop]

Hi php_beginner_83,

 

AlexWD's code will save the Thumbnail, the snippet I posted will create a thumbnail "on-the-fly" from a larger image, display it and then destroy it.

[php_beginner_83]

Which way do yu think would be best....save the thumbnails or create them 'on the fly'??

[Bricktop]

Hi php_beginner_83,

 

It depends on your application and the amount of images you're going to be displaying.

 

For ease of use it might be better to go with the on-the-fly implementation. 

 

So, essentially, in your code you may have:

 

<img src="../gallery/thumbnails/thubmail1.jpg" alt=Thumbnail 1 />
<img src="../gallery/thumbnails/thubmail2.jpg" alt=Thumbnail 2 />
<img src="../gallery/thumbnails/thubmail3.jpg" alt=Thumbnail 3 />
<img src="../gallery/thumbnails/thubmail4.jpg" alt=Thumbnail 4 />

 

These would all be manually created thumbnails.  You could just use:

 

<img src="thumbnail.php?i=../gallery/fullsize1.jpg" alt=Thubmail 1 />
<img src="thumbnail.php?i=../gallery/fullsize2.jpg" alt=Thubmail 2 />
<img src="thumbnail.php?i=../gallery/fullsize3.jpg" alt=Thubmail 3 />
<img src="thumbnail.php?i=../gallery/fullsize4.jpg" alt=Thubmail 4 />

 

Which would take the full size image and create a thumbnail from it on-the-fly and display it in the browser. 

 

However, if you have over 100 images this can take a while to load and puts a drain on both performance and bandwidth. 

 

If you have an upload form where you or your users are uploading these images, it may be better to implement code similar to AlexWD's so a thumbnail copy gets created along with the main image.  You can then reference this thumbnail which would be much quicker and use a lot less bandwidth.

 

Hope this helps.

[php_beginner_83]

Oh yeah this really helps   I do have a lot of pictures, well over 100 but I will only want to create the thumbnails when someone clicks on a photo album.  So far none of my albums have over 20 pictures.

 

Thanks again for your help

[php_beginner_83]

Hi Bricktop

 

I'm having problems getting the thumbnails to work.  It's probably something really simple.

I've tried using

<img src="thumbnail.php?i=../gallery/fullsize1.jpg" alt=Thubmail 1 />

like you suggested.

I substituted in my values....

<img src=thumbnail.php?i=image.jpg&maxsize=100/images/alcatraz1.jpg />

 

What am I doing wrong??

 

Thanks

[Bricktop]

Hi php_beginner_83,

 

Try:

 

<img src=thumbnail.php?i=images/alcatraz1.jpg&maxsize=100 />

[php_beginner_83]

Thanks for helping me Bricktop.

This might seem like a stupid question but within my script, I've been using..

<?php echo "<img src=thumbnail.php?i=images/alcatraz1.jpg&maxsize=100 />";
?>

Should I be putting in apostrophes?  I always get confused when I need to include them and whether to use single or double quotes. 

[Bricktop]

Hi php_beginner_83,

 

I would use echo as below:

 

<?php 
echo '<img src="thumbnail.php?i=images/alcatraz1.jpg&maxsize=100" />';
?>

[php_beginner_83]

I tried that and still not having any luck.

I explicitly typed in the values of $i and $maxsize into thumbnail.php

$i = 'images/alcatraz1.jpg';   
$maxsize = 100;

 

And now I get this as output..

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\Website\thumbnail.php: in C:\xampp\htdocs\Website\thumbnail.php on line 21

ÿØÿà�JFIF������ÿþ�>CREATOR: gd-jpeg v1.0 (using IJG JPEG v70), default quality ÿÛ�C� $.' ",#(7),01444'9=82<.342ÿÛ�C 2!!22222222222222222222222222222222222222222222222222ÿÀ��d�K"�ÿÄ���

 

Are you tired of me yet?? 

[Alex]

Just to let you know, you can create an on the fly thumbnail using my class as well (Although I probably wouldn't)..

 

//include my class posted above
$image = new Image($_GET['image']);
$image->resize(width, height);
$image->output();

[Bricktop]

Hi php_beginner_83,

 

I hadn't tested that code I posted, I would recommend using Marco Olivo's excellent script which I have used in the past and I know works very well.

 

Go to http://olivo.net/software/imagethumb/ and download imagethumb.zip

 

Unzip the file and upload imagethumb.php to your webserver

 

You can now create thumbnails on the fly using:

 

<?php 
echo '<img src="imagethumb.php?s=images/alcatraz1.jpg&w=100" />';
?>

 

Marco's website has further usage options if required, but the above should be all you need to get  going.

 

Hope this helps.

[php_beginner_83]

Can I ask why you wouldnt?

[php_beginner_83]

Hi Bricktop

 

Yip that worked a treat.  Thanks again for all your help