jump to navigation

Create a dynamic photo gallery with PHP in three steps April 6, 2006

Posted by Dimenxion in Karutan.

Tentu korang pernah mengalami masalah nak organize korang punya gambar dari digital camera kan? kat sini aku letak cara nak buat dynamic photo gallery menggunakan skrip php. kenapa dynamic? sebab setiap kali korang letak gambar baru… dia akan appear secara automatik.

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

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

<? 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 “

// get thumbnail
// link to full image
echo “

echo “

// get file name
echo “File: ” . $exif[‘FILE’][‘FileName’] . “
// get timestamp
echo “Timestamp: ” . $exif[‘IFD0’][‘DateTime’] . “
// get image dimensions
echo “Dimensions: ” . $exif[‘COMPUTED’][‘Height’] . ” x ” . $exif[‘COMPUTED’][‘Height’] . ”
// get camera make and model
echo “Camera: ” . $exif[‘IFD0’][‘Model’];
echo “

echo “


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;

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

p/s: perlu diingatkan di sini bahawa jika korang mahukan folder ini di upload, pastikan hosting korang semua support php.



No comments yet — be the first.

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: