Automatically Generate a Photo Gallery from a Directory of Images
Creating a Photo Gallery isn’t such a hard task. My favorite way to present photos is simply a grid of thumbnails that people may pick and choose from as they see ones that interest them. Clicking on a thumbnail brings up a larger version. Could be a direct link to the larger photo or something fancier like a modal box. If you are creating a fairly small gallery, hand coding this grid of thumbnails is probably fine, but if you are creating a fairly large gallery or you anticipate doing a lot of adding/editing/swapping of photos, you may want to consider a better solution. And that solution is…. An automatically generating photo gallery!
When I say “Auto Generating”, I don’t mean that that it takes the pictures for you. This gallery won’t even create the thumbnails for you. What it DOES, is build itself dynamically from your directory of images. So when you want to add new photos, you simply drop the new photo and thumbnail in the directory and you are done! Removing photos just means removing the photos from the image directory. We use PHP for this web wizardry.
1. The Basic HTML Page Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Auto Generating Photo Gallery</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> <img src="resources/header.png" alt="Photo Gallery" /><br /> <!-- Thumbnails go here --> </div> </body> </html>
2. Preparing the Images
We are going to write the PHP to look for a very specific naming convention for our images. Any image with the text “-thumb” in its title will be considered a thumbnail image and will be displayed on the page. The direct link to the larger size image will be that exact file name with the “-thumb” part stripped away from it. For this gallery to work properly, you’ll need to put BOTH the thumbnail image and the larger size image in the images directory following this naming convention.
So, you’ll need to create two images for each image you wish to present in the gallery. Using just typical right-off-the-camera file names, your file names will be something like this:
Large version: IMG_0813.jpg
Thumbnail: IMG_0813-thumb.jpg
For a nice grid-like look, keep all your thumbnails a consistent size. I used 100px x 100px in this example.
3. The CSS
Very simple styling here. We are going to do a hard CSS reset, then create a page-wrap to keep our gallery centered, and then create a couple of classes for our thumbnails.
* { margin: 0; padding: 0; }
body { background: url(resources/bg.png) top center repeat-x #2a2a2a; }
a img, img { border: none; }
#page-wrap { width: 800px; margin: 0 auto; }
.photo-link { padding: 5px; margin: 5px; border: 1px solid #999; display: block; width: 100px;
float: left; }
.photo-link:hover { border-color: white; }
4. The PHP
The PHP is what is going to do all the heavy lifting here. We are going to tell it where to look, and how many thumbnails we want per-row. Then it is going to look in that directory for any images that have a “-thumb” as part of their name and all them to an array.
Then (if it finds any), it will go through a loop echoing out each thumbnail onto the page wrapped in an anchor link (with the special class we styled in the CSS) which links to the full size version of the photo. At the end of each row, it will clear the float for us. If it doesn’t find any images, we get a short message saying so.
<?php
/* settings */
$image_dir = 'images/';
$per_column = 6;
/* step one: read directory, make array of files */
if ($handle = opendir($image_dir)) {
while (false !== ($file = readdir($handle)))
{
if ($file != '.' && $file != '..')
{
if(strstr($file,'-thumb'))
{
$files[] = $file;
}
}
}
closedir($handle);
}
/* step two: loop through, format gallery */
if(count($files))
{
foreach($files as $file)
{
$count++;
echo '<a class="photo-link" rel="one-big-group" href="',$image_dir,str_replace('-thumb','',$file),'"><img src="',$image_dir,$file,'" width="100" height="100" /></a>';
if($count % $per_column == 0) { echo '<div class="clear"></div>'; }
}
}
else
{
echo '<p>There are no images in this gallery.</p>';
}
?>
5. The JavaScript
Our Gallery is totally functional at this point, but let’s fancy it up a little bit by making the full size images pop up in a Modal box. We’ll just jQuery for this and the FancyBox plugin.
Download the files, then include the links to the JavaScript files in your header. Then “activate” the FancyBox effect on the images when the DOM is ready:
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript">
$(function(){
$(".photo-link").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow': true });
});
</script>
We’re done!
This can be a huge time saver. You could even probably train someone with no web coding experience whatsoever how to add photos to a directory with specific names, empowering them to update their own gallery! While this is example absolutely works, do you have any ideas for how it could be better? For one thing, caching might be a good idea. So that the PHP doesn’t have to scour a web directory for every single visitor. Let us know in the comments what else you think could be improved.
The carousel plugin ( http://sorgalla.com/projects/jcarousel/ ) would be a great addition to the gallery in order to fit the images into a smaller space. That is one thing that could see being added with little effort, yet is very beneficial to developers and designers.