MegaGallery, Part 2: PHP Thumbnails and Comments

In the last blog entry, we used Slimbox2 to set up an overlay window for viewing images. In this blog entry, we will use PHP to extract thumbnails and comments from images.

Processing the Images

I use Gimp for processing my images, so, apologies to those using Photoshop, but I’m sure you can accomplish the same things in Photoshop. What we need to do is make sure that the images we will use in our gallery have a thumbnail embedded and a comment added. Normally, when you make a gallery, you resize the image so it will look good on the screen (maybe some post-processing edits), and create a thumbnail. We will skip the thumbnail making for thumbnail embedding.

In Gimp, the trick is when you save the image. Even if you will save the image in the same folder with the same name, use “Save As”.

Check the Save Thumbnail and add comments

Check the Save Thumbnail and add comments

In the save as widow, select the Advanced Options. There you can check Save Thumbnail and add your comments in the comment box. That’s it! Nothing too difficult.

Now, let use PHP to extract the thumbnail from the image file.

PHP Image Thumbnail Extraction

To get the thumbnail from the file we will use the PHP function exif_thumbnail(). The exif_thumbnail function takes four parameters:

  1. filename – the path to the jpg or tiff file
  2. width – the returned width of the returned thumbnail
  3. height – the returned height of the returned thumbnail
  4. filetype – the returned image type of the returned thumbnail (jpg or tiff)

Calling the function will look something like this:

 $image = exif_thumbnail($image, $width, $height, $type); 

You might think you could just echo or print $image to the screen, but it doesn’t work that way. If you do, you get a lot of garbage, like this:

The result of echoing $image

The result of echoing $image

The problem is the information you get back is raw data, and you need to encode it to base64. This is accomplished with the base64_encode() function. We also need to wrap the whole thing inside an image tag using the width and height returned from the exif_thumbnail() function. Our echo will look something like this:

echo "</pre>
<img src="image/gif;base64,&quot;.base64_encode($image).&quot;" alt="" width="$width" height="$height" />
<pre>";

We will want to wrap this all in a function so that we can call it over and over again, and handle the special case when we forget to save a file with the thumbnail embedded. We will call our function createThumbnail(), and it will take one parameter: the path to the image file.

The function looks like this:

function createThumbnail($image) {
    $image = exif_thumbnail($image, $width, $height, $type);
    if ($image !== false) {
        echo "</pre>
<img src="image/gif;base64,&quot;.base64_encode($image).&quot;" alt="" width="$width" height="$height" />
<pre>";
    }
    else {
        echo "No thumbnail available!";
    }
}

Now, let’s extract the comments.

PHP Image Comment Extraction

Next we want to extract the comments we added to our images. We will accomplish this with PHP’s exif_read_data(). The function has many parameters, but we will only be using the filename and section parameters.

The returned value from exif_read_data is a multidimensional array containing the exif data for the image, or false if no data is available. For now we will just echo out the comment.

Our getComment() function looks like this:

function getComment ($image) {
    $exif = exif_read_data($image, 'COMMENT');
    if ($exif !== false) {
        echo $exif['COMMENT'][0];
    }
    else {
        echo " ";
    }
}

Note that we pass in the path to the image, just like we did with the createThumbnail() function.

Now, let’s put it all together.

Calling the Functions

Now, we need to call our two new functions for each of the images. We will accomplish this by inserting PHP code snippets into our HTML. Remember, you PHP code snippet needs to be surrounded by the PHP start and end tags.

<a href="pix/image01.jpg" rel="lightbox-show" title="">

Our snippet to call the getComment() goes inside the title attribute quotes. The call to createThumbnail() goes between the open and close tags for the <a> tag.

There you have it! We created thumbnails and comments without the hassle of creating thumbnail images and trying to keep the correct comments with the right image.

NOTE: exif_thumbnail() and exif_read_data require exif and mbstring to be enabled in PHP. See the PHP documentation for more info.

MegaGallery Completed Example

The ned result of the thumbnail extraction

The end result of the thumbnail extraction

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s