Create a dynamic photo gallery with PHP in three steps

If you have a digital camera, you probably also have a digital photo gallery of memorable moments. And if you have a digital photo gallery, you’re almost sure to have run into a very common problem: organizing your photos so that they can be easily searched and indexed.

Now, you might not know this, but most digital cameras automatically embed descriptive metadata in the headers of the images they create. These headers, called EXchangeable Image File (EXIF) headers, contain information on the camera make and model, the time and date the photo was taken, the technical specifications of the photo (shutter speed, aperture and so on) and a thumbnail of the image. Additionally, many image editors allow you to supplement these automatically generated headers with descriptive text of your own – for example, “Sally’s first football game” or “Getting drunk in Malta”.

I’m sure you can see where I’m going with this. With a little bit of imagination and creative thinking, it’s possible to use the headers generated by your camera (and, if you have the time and motivation, further supplemented by you) to automatically organize and describe your photo collection. This article will show you how, using PHP‘s EXIF functions.

Step 1: Make sure your PHP build supports EXIF

In order to read EXIF headers, your PHP build must include support for the EXIF module. You can check whether this support is enabled, by creating a PHP script containing the code shown in Listing A.

Listing A

<?php
phpinfo();
?>View the output of this script in your Web browser, and review the list of extensions to see if EXIF is included. If it is, move to the next step. If not, you’ll need to activate PHP’s EXIF functions, either by un-commenting the extension line in php.ini (Windows) or recompiling your PHP build with the –enable-exif argument (UNIX). More information on how to do this is available at the PHP Web site.

Step 2: Move your photos into a single directory

Next, collect all your photos into a single directory under the Web server document root. This is also a good time to add your own descriptive comments to each image (although this is not essential). A number of good shareware and freeware tools are available to help you do this; take a look at Exifer for Windows or RoboPhoto.

Step 3: Write code to read photo headers and comments

The final step is to write the PHP scripts that will extract EXIF data from your images and automatically generate a Web page with thumbnails, technical information and links to larger versions of each image. There are two scripts here: the first one, gallery.php, (See Listing B) looks for photos and extracts EXIF headers from them, while the second one, thumbnail.php, (See Listing C) is responsible for extracting the thumbnail image from each photo.

Listing B – Here’s the code for gallery.php

<html>
<head></head>
<body>
<table>
<?php
// define directory path
$dir = “.”;

// iterate through files
// look for JPEGs
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if (preg_match(“/.jpg/”, $file)) {
// read EXIF headers
$exif = exif_read_data($file, 0, true);
echo “<tr>”;
// get thumbnail
// link to full image
echo “<td valign=top><a href=$dir/$file><imgsrc=thumbnail.php?file=$file></a><td>”;
echo “<td valign=top><font size=-1>”;
// get file name
echo “File: <b>” . $exif[‘FILE’][‘FileName’] . “</b><br/>”;
// get timestamp
echo “Timestamp: ”  . $exif[‘IFD0’][‘DateTime’] . “<br/>”;
// get image dimensions
echo “Dimensions: ” . $exif[‘COMPUTED’][‘Height’] . ” x ” . $exif[‘COMPUTED’][‘Height’] . ” <br/>”;
// get camera make and model
echo “Camera: ” . $exif[‘IFD0’][‘Model’];
echo “</font></td>”;
echo “</tr>”;
}
}
closedir($dh);
}
}
?>
</table>
</body>
</html>This script uses PHP’s directory functions to retrieve a list of all the JPEG images in the directory, and then uses the exif_read_data() function to read the EXIF headers from each image as an array. Each image is displayed as a thumbnail using information provided by thumbnail.php, and each thumbnail is itself hyperlinked to its parent image. Relevant information—image name, dimensions, timestamp and camera model—is extracted from these headers and displayed with each thumbnail.

If you used an EXIF editor to add your own comments to the images, you can access the appropriate array elements to retrieve and display that information as well. Look inside the $exif array with print_r($exif) to find out the array path for your custom metadata.

Note: Different camera manufacturers use the EXIF headers in different ways. If the output of the script above appears to be missing some information, you should look inside the $exif array with print_r($exif) to find out exactly how your camera writes the EXIF data, and make appropriate adjustments to the array keys in the script above (Listing B).

Listing C – And here’s the code for thumbnail.php

<?php
// define directory path
$dir = “.”;
$image = exif_thumbnail($dir . “/” . $_GET[‘file’]);
header(“Content-Type: image/jpeg”);
echo $image;
?>This script is very simple—it retrieves the image file name from the URL and uses the exif_thumbnail() function to extract a thumbnail from the named image. This thumbnail is then sent to the browser, together with an appropriate header, for display.

Place both these scripts in the directory containing your photos, and then use your Web browser to access gallery.php. You should see thumbnails of the images in the directory, together with descriptive information on each. Clicking a thumbnail should take you to the larger parent image.

Figure A is an example screenshot of what the output might look like:

Figure A
An example screenshot

And there you have it—an automatically generated photo gallery! As you copy new images to the folder, they will automatically show up in the gallery listing. Isn’t that neat?

Note: You can place the scripts created in Step 3 in a different directory from the one containing your photos, so long as you remember to update the $dir variable at the top of each script with the correct path to the photo collection.

Advertisements
By Rz Rasel Posted in Php

2 comments on “Create a dynamic photo gallery with PHP in three steps

  1. Good day! This is my first visit to your blog! We are a collection of volunteers and starting
    a new project in a community in the same niche. Your blog provided us
    useful information to work on. You have done a extraordinary job!

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