Section 13.1. Serving Up Photos: Insta-Slideshows

Chapter 13. Image Magic: Programming and Power Tools

There are an extraordinary number of tools that can create and manipulate images on the typical Linux-based web server. From native image support built into programming languages to tools that can be accessed via the command line, you can turn a photo into a postcard, resize and annotate images, create an instant slideshow, or toss in complex image manipulations at the call of a function.

For instance, popular web scripting languages such as PHP have built-in interfaces to external graphics libraries. With this support, we can create simple applications that can open a photo, access individual pixels to find colors at these points, and generate an entire web color scheme.

Going beyond this built-in language-based functionality, there's the incredibly powerful ImageMagick software suit, with functionality that can be accessed via the command line, built into reusable scripts, or created as applications via libraries in PHP, Perl, Ruby, and Python, among others.

Most of the functionality covered in this chapter is available with the typical web-hosting package that provides Secure Shell (SSH) access, and is built into the Linux operating system. Most is also available easily on the Mac with the Macports package management system or comparable Fink system. In addition, the version of PHP for Windows includes access to the graphics functionality, and ImageMagick provides a one-click installation of the graphics suite for Windows.

The only restriction to these graphics capabilities is that they do require some programming experience and a level of comfort with the Linux or MS-DOS command line. However, none of the capabilities requires that a person be a pro at software development or a wiz at Unix. A strong interest and curiosity are the primary requirements.

This chapter, as with the rest of this book, focuses on PHP as the programming language, primarily because PHP is the easiest web scripting language to read for those not as familiar with software development.

13.1. Serving Up Photos: Insta-Slideshows

It might surprise you how much you can manipulate images using server-side technology. Not just how images are displayed on a page, but the fact that you can easily open an image file, manipulate its contents, and generate an entirely new image as a result.

The only limitation to this type of image functionality is the fact that photo and graphics manipulation is heavily mathematical in nature, and as such, can put a burden on the hosting machine's CPU and memory. However, for most of us, and most of our needs, servers can easily handle the extra load. You might want to restrict access to editing or conversion applications, though.

One of the simplest uses of server-side functionality is to create a drop-in insta-slideshow. This type of application can examine all the photos in a directory and instantly generate the necessary navigation controls. I provided just such an application for my tech reviewers, to make it easier to review the figures for this book.

The first component to the application is code to open the current directory, look for all filenames with file extensions provided in $exts, and then create a sorted array of these filenames. Example 13-1 shows this functionality, created as a separate PHP file, photos.php. It's created separately so that the functionality can be used in multiple applications. The current version just creates the array, but other versions could encapsulate the functionality into an object method or make it accessible via an external library function.

Example 13-1. Functionality to create an array from files in a directory

<?php $exts = array('jpg','png','gif'); //collect list of images in current (look) directory $url = array(); if($handle = opendir(dirname(_ _FILE_ _))) { while(false !== ($image = readdir($handle))) foreach($exts as $ext) if(strstr($image, '.' . $ext)) $photos[] = $image; closedir($handle); } sort($photos); ?>

There's nothing specifically image-related to the functionality in photos.php; it could be used for files with any extension just by changing the entries in the $exts array:

$exts = array('jpeg','pdf');

The next piece of the application is the slideshow page itself, slideshow.php, as shown in Example 13-2. It includes a reference to the photos.php file at the top, and then reads the current photo (if any) from the URL (via the photo parameter). From this information, the application rebuilds the appropriate navigation, checking first to see whether it makes sense to show the Previous or Next buttons. If the viewer is at the last of the photos in the directory, the Next button isn't shown; at the first, the Previous button is not displayed.

Example 13-2. Slideshow application page, including code to create the navigation

Code View: <?php require_once "photos.php"; $index = $_GET['photo']; $uri = $_SERVER['SCRIPT_NAME']; if (empty($index)) $index = 0; $prev = $index - 1; if ($index < (count($photos) - 1)) { $next = $index + 1; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Slideshow</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="photoslideshow.css" /> </head> <body> <div id="slideshow"> <div id="content"> <div id="navigation"> <?php if ($prev >= 0) : ?> <div id="previous" class="navlink"> <a href="<?php echo "$uri?photo=$prev"; ?>">Previous</a> </div> <?php endif; ?> <div id="home" class="navlink"> <a href="<?php echo $uri ?>?photo=0">Home</a> </div> <?php if (!empty($next)) : ?> <div id="next" class="navlink"> <a href="<?php echo "$uri?photo=$next"; ?>">Next</a> </div> <?php endif; ?> </div> <div id="main"> <p><?php echo $photos[$index]; ?></p> <img src="<?php echo $photos[$index]; ?>" id="photo" alt="<?php echo $photos[$index]; ?>" /> </div> </div> </div> </body> </html>

The application creates the navigation bar, which basically just prints out the array entry photo number for the next and previous photo, and displays whatever photo is current: either the first when the page is opened, or whichever photo is next in the navigation stream.

Figure 13-1 shows the application in process. The page is styled through the use of CSS, included as a separate file and not repeated here. The example files for the book include all of the necessary files for this application.

To run the application, all you have to do is drop the photos.php, slideshow.php, and photoslideshow.css files into the directory where the images are stored, and, instantly, you have a slideshow.

Rename the slideshow.php file to index.php, and you also prevent a "directory contents" view of the image directory. Security and slideshow in one.