PHP Thumbnailer Demo

To begin, let's take a look at the sample image we will be maipulating:


Image by Divine Error

Step 1 - Create instance of thumbnailer

To get started, we need to create an instance of our thumbnailer class. It's a piece of cake:

<?php
include_once('thumbnail.inc.php');
$thumb = new Thumbnail('sample.jpg');
?>

If you used the previous version of this class, you will notice (and hopefully welcome) that it only takes one line of code to initialize the image for manipulation.

At this point, you can begin your manipulations. Before I get into those, there are a few considerations that I want to touch on. One of the most popular questions that I've received about my class is how to display manipulated images on the fly. Because the class writes headers, then streams the image to the user, display of the image needs to be done through a wrapper file, otherwise you will get header errors. Here's some sample code, which should make the previous explanation make a little more sense:

<?php
include_once('thumbnail.inc.php');
$thumb = new Thumbnail($_GET['filename']);
$thumb->resize($_GET['width'],$_GET['height']);
$thumb->show();
//if you're using the php 4 version:
$thumb->destruct();
?>

To use the above code, you would simply place it in a file by itself, and call it through a standard html img tag:

<img src="show_image.php?filename=sample.jpg&width=250&height=250" />

This sample would generate a thumbnail that was no wider than 250 pixels and no taller than 250 pixels. Of course, you would tailor that file to suit your needs.

Another important consideration is the amount of processing power and memory image manipulations take. If you are going to be dynamically generating several images on one page, or expecting a lot of traffic to one image, it might be wiser to create some sort of cache, or pre-process the files ahead of time.

Step 2 - Manipulate the Image

Now that you've initialized your image, you can begin manipulating it. This version of the class has a much simpler API than its predecessor, as well as some new functionality. Available manipulation functions are:

  • Resize to maximum width and/or height
  • Resize to a certain percentage of original size
  • Create a square crop from the center of the image
  • Crop the image
  • Rotate the image 90° clock-wise or counter clock-wise
  • Create an Apple™-style reflection

Another highly valuable feature of this class is the ability to chain manipulations together, removing the need to save the image and re-open it after every manipulation. However, this does not mean that you can revert to the original after you have performed multiple manipulations.

Let's start with a basic manipulation: Resize the image to be no wider than 250 pixels, and no higher than 250 pixels.

<?php
include_once('thumbnail.inc.php');
$thumb = new Thumbnail('sample.jpg');
$thumb->resize(250,250);
?>

The latter half of this demo covers all of the other manipulations, but let's move on to saving and/or displaying the image.

Step 3 - Saving and Showing the Image

Now that we've resized our image, we need to save or show it. The code to accomplish this is, like the rest of the API, very simple. To save the image (continuing the previous code):

$thumb->save('path/to/file.jpg');

And to show the image:

$thumb->show();

If you are manipulating a jpg, you have the additional option to specify the quality of the image, from 0-100%:

$thumb->save('path/to/file.jpg',80);
//or
$thumb->show(80);

The final result of all our above code (resized and displayed at 80% quality):

The last important thing to remember is to call the "destruct()" method if you are using the php 4 version of this class. This clears up all of the memory that is allocated for the image, similar to the way you must always class flcose, when you use fopen. Simply place a call to the destruct function at the end of your code.

It's that easy!

Performing Multiple Manipulations

Let's imagine that you have an application that generates thumbnails from uploaded images. You want these thumbnails to be 100x100 pixels and sampled from the center of the image. Since we want the thumbnails to be interesting, we will reduce the image size first to ensure that we sample some detail of the image. Here's how we would accomplish that:

<?php
include_once('thumbnail.inc.php');
$thumb = new Thumbnail('sample.jpg');
$thumb->resize(250,250);
$thumb->cropFromCenter(100);
$thumb->save('path/to/file.jpg',100);
//if you're using php 4 version
$thumb->destruct();
?>

Using our sample image, the code produces the following:

And with a reflection added for fun:

Conclusion

It's really that easy! For full usage information, refer to the project page. Also, please use the comments area for any questions and/or feedback that you may have.