Save time with PHP! Create photo galleries automatically.

Large photo galleries can be a pain to set up and manage. When you are dealing with 100 or more images, you are in for some serious HTML data entry – tons of lines of code with only a few differences in each line.

In this article, I’ll provide a sample script that I have used and adapted for several galleries and other similar tasks. This article is meant for developers, but I will do my best to take as much of the “lingo” out of it as I can, and explain and document it well. Even if you don’t know programming or PHP at all, this should be a useful tool for you. I developed this with only a basic knowledge of PHP syntax and a bit of guess and check.

Robot work

If you are a web developer, you’ve probably been in this situation before, and this code snippet might look familiar:

<li><a href=”images/gallery/01/01.jpg” title=”Caption” rel=”lightbox”><img src=”images/gallery/01/thumbs/01.jpg” alt=”Click for Full Size” /></a></li>

For every image in your gallery, that line needs to be repeated, with the image source, link href, and caption changed. Sounds like a wrist-cramp in the making – definitely what I’d call “Robot work”.

A Scripted Solution

This situation just begs to be automated. Being a php enthusiast, I decided to embark on a small adventure – write a script that will produce this HTML automatically. Here it is, in all its simplistic glory (Pardon any coding faux pas – I am not the most experienced PHP developer in the world). This script is used with a lightbox gallery called “Sexy Light Box”. A grid of thumbnails which can be clicked on for larger view is our goal here.

$folder = 'images/gallery/';
$extension = '.jpg';
$group = '[group1]';
$caption = 'Caption';
$alt = '';
$title = '';
$iterations = 28;

$wrap1 = '<li><a href="';
$wrap2 = '" rel="sexylightbox';
$wrap3 = '" title="';
$wrap4 = '"><img src="';
$wrap5 = '" alt="';
$wrap6 = '" /></a></li>';
$i = 1;

while ($i <= $iterations) {
if ($i >= 10) {
$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "n";
} else {
$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "n";
echo ("$string");

The Breakdown

This script allows the developer to simply define the gallery directory, number of images, and an (optional – not included in this version) array of captions. Below I will explain the code line by line.

$folder = 'media/gallery';

Defines the folder in which the images are.

$extension = '.jpg';

Image extension. Currently the script requires that all images have the same filetype

$group = '[group1]';

Most lightbox scripts support “groups” or galleries – matching “rel” tags define your gallery

$caption = 'Caption';

Title tag of the linked full-size image. Most lightbox scripts use this as a caption.

$alt = '';

Alt tags for the images. This could be converted to an array if you are concerned about unique alt tags for your gallery thumbnails

$iterations = 28;

The number of images in the gallery.

$wrap1 - $wrap6

these are just the chopped parts of the HTML that is being created and wrapped around the variables.

while ($i <= $iterations) {

$i is a placeholder variable known as an “index”. It is increased by each time the while loop is completed. Once $i is greater to or equal than $iterations, the loops condition becomes false and it is no longer repeated

if ($i >= 10) {

This line is deals with the naming scheme of the images. I name my images 01.jpg, 02.jpg … instead of 1.jpg, 2.jpg etc. Because of this, I had to include a line that would add a “0” to the code IF the image number is less than 10.

$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "n"; }

This is the line where all of the HTML wraps and the variables you set earlier are combined. This version of the command includes the “0” I mentioned earlier. The final HTML that is about to be “echoed” is saved to the variable $string

else {

If the image number is 10 or above…

$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "n";

This familiar line of code has the same function as the previous “combiner” line. The only difference is that this one leaves out the 0, to avoid getting “010.jpg”.

echo ("$string");

This prints the first line of the gallery! Yay! The echo command takes our “$string” variable and prints it to our webpage.

$i++; }

The index variable $i is incremented, or increased by 1. This keeps our script from looping infinitely and lets it know when we’re out of images. Once the script hits this line, it goes back to the top of the “while” loop. If the initiating condition (“$i <= $iterations”) is true, the loop will run again, creating a new line for our gallery.

Simple enough?

This is a pretty basic script, and I’m sure it could be improved upon, but for now it definitely saves time, and is easily adapted to many purposes.

Pros and Cons

Pros: Adaptable, time saving, and simple. The script is re-usable several times on the same page if more than one gallery is on the page.

Cons: Slight server overhead which is probably negligible. Each time the page loads, the server has to generate that HTML. In my opinion, this hardly matters for such a small-scale site.

Wrapping Up

Thanks for checking out this script. I hope you’ve learned something from it!

To learn more about the javascript used to make the gallery fancy, check out Sexy Light Box – compatible with jQuery AND mootools.

Leave a Reply

Captcha * Time limit is exhausted. Please reload CAPTCHA.