The Speedysnail Gallery Script

I’ve been teaching myself PHP over the past week, and creating a few image gallery scripts along the way—first for the Cartoon Lounge, and then for this part of the site. Since you can’t tell how I did it by looking at my source code, I thought I’d share a version of the script here for anyone who might find it useful. There are other tools around that do the same sort of thing (and much more), but this one is dead simple.

To start with, get a bunch of jpg files, number them from 1 to whatever with no gaps in the sequence, and drop them into a folder. Rename the folder something like my_gallery_name and upload it into your usual images folder.

Now drop the PHP scripts below into an HTML page template. Change the value of $path to wherever your images are on the server—either an absolute path, or relative to where the gallery page will be. Save the page as gallery.php and upload it to your PHP-enabled site. Then link to it as "gallery.php?s=my_gallery_name", changing the name to whichever gallery you’d like to display.

The script displays all the pictures in order until there are no more, using the name of the folder as the page title and image alt attributes (converting it from the form my_gallery_name to My Gallery Name). You can navigate forward or back with the arrows provided, or by clicking on the image itself.

Because the server delivers a whole new page for each image, you can easily bookmark or link to individual images. Note, though, that ampersands in URLs mess with XHTML validation, so if you want to link to a specific image use the href format "gallery.php?s=my_gallery_name&n=9" (or whatever the number is).

If you’d like to put captions under your images, include a plain text file called captions.txt in your gallery folder, containing the caption for each image on a separate line, in order, leaving a blank line for uncaptioned images. Wrap the captions in HTML paragraph tags—you can even have multiple paragraphs in each caption, or whatever else you want, as long as everything associated with a particular caption is on one line of the captions.txt file. For example,

<p>Here is a caption</p><p>with two paragraphs.</p>

Alternatively, if you want to use the same caption across all of the images, put nothing except a full stop/period on the first line of captions.txt, and the solitary caption on the second line. (If you don't have captions for any of your images, just leave out the captions.txt file altogether, and the script will automatically assume there aren't any. No need to remove any of the code.)

All set? Here we go.

Start by putting this code between the <title></title> tags of your page template:

<?php
$title = strtr($s, "_", " ");
$title = ucwords($title);
print("$title");
?>

Now put the following section wherever you want the images to appear on the page. Don’t forget to change the value of $path, and remember to include a slash at the end of it (if the gallery folder is in the same directory as gallery.php, set the value of $path to "").

<?php

$path = "/path/to/images/"; // change this bit.

if (!$n) {$n = 1;}

$nextn = $n + 1;
$prevn = $n - 1;

$nextfile = "$path$s/$nextn.jpg";
$filetest = file_exists($nextfile);
$captionfile = "$path$s/captions.txt";
$captiontest = file_exists($captionfile);
$caption = file($captionfile);

print("<p style=\"text-align:center\">");
// change to <p> if you prefer.

if ($filetest) {print("<a href=\"gallery.php?s=$s&amp;n=$nextn\">");} else {print("<a href=\"/\">");}

list($width, $height, $type, $attr) = getimagesize("$path$s/$n.jpg");

print("<img src=\"$path$s/$n.jpg\" width=\"$width\" height=\"$height\" border=\"0\" alt=\"$title $n\" /></a></p>\n");

// put caption code (below) here if you want it before the nav links.

print("<p style=\"text-align:right\">");

if ($prevn > 0) {print("<a href=\"gallery.php?s=$s&amp;n=$prevn\" title=\"previous\">&lt;&lt;</a> ");}

if ($filetest) {print("<a href=\"gallery.php?s=$s&amp;n=$nextn\" title=\"next\">&gt;&gt;</a>");}

print("</p>\n");

// the next 3 lines are the caption code
$cap = $n - 1;
if ($caption[0]{0}==".") {$cap = 1;}
if ($captiontest) {print("$caption[$cap]\n");}

?>

That’s it. The script automatically detects the size of your images, so you can mix and match heights and widths, although if you don’t want the nav links jumping around on the page you’re best off keeping the heights the same. That’s also why I put them below the picture and above the caption, although you can swap that around if you like.

If you do use this, I’d love to hear about it—leave a comment on this entry if you like. If there’s any interest, I might do another version that lets you mix gifs or pngs into the gallery.

Here’s what people said about this entry.

Added by shauny on a Friday in January.

Added by shauny on a Friday in January.

Added by Rory on a Friday in January.

Added by shauny on a Monday in February.

Added by Rory on a Tuesday in February.

Added by Rory on a Tuesday in February.

←@→