Automatically Generate a Photo Gallery from a Directory of Images: Updated

id="promo">

href="http://davidwalsh.name/dw-content/generate-photo-gallery.php"> src="http://davidwalsh.name/dw-content/preload-images-thumbs/2.jpg" alt="PHP Photo Gallery" class="image" />

Two years ago Chris Coyier wrote an outstanding tutorial detailing href="http://scriptandstyle.com/automatically-generate-a-photo-gallery-from-a-directory-of-images" rel="nofollow">how you can generate a photo gallery based on the images within two directories: a thumbnails directory and an originals directory. I've decided to take his tutorial a step further by showing you how to generate thumbnails for the gallery using PHP. I've also implemented a MooTools lightbox: href="http://gueschla.com/labs/smoothbox/" rel="nofollow">Smoothbox. The following code will show you how to create a beautiful photo gallery by simply dumping your photos in a directory.

class="actions"> href="http://davidwalsh.name/dw-content/generate-photo-gallery.php" class="demo">View Demo

class="clear">

The CSS



.clear			{ clear:both; }


.photo-link		{ padding:5px; margin:5px; border:1px solid #ccc; display:block; width:200px; float:left; }


.photo-link:hover	{ border-color:#999; }

The images/links will be floated next to each other. The other option would be to use a table. Booooo.

The PHP: Utility Functions



/* function:  generates thumbnail */


function make_thumb($src,$dest,$desired_width) {


	/* read the source image */


	$source_image = imagecreatefromjpeg($src);


	$width = imagesx($source_image);


	$height = imagesy($source_image);


	/* find the "desired height" of this thumbnail, relative to the desired width  */


	$desired_height = floor($height*($desired_width/$width));


	/* create a new, "virtual" image */


	$virtual_image = imagecreatetruecolor($desired_width,$desired_height);


	/* copy source image at a resized size */


	imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height);


	/* create the physical thumbnail image to its destination */


	imagejpeg($virtual_image,$dest);


}





/* function:  returns files from dir */


function get_files($images_dir,$exts = array('jpg')) {


	$files = array();


	if($handle = opendir($images_dir)) {


		while(false !== ($file = readdir($handle))) {


			$extension = strtolower(get_file_extension($file));


			if($extension && in_array($extension,$exts)) {


				$files[] = $file;


			}


		}


		closedir($handle);


	}


	return $files;


}





/* function:  returns a file's extension */


function get_file_extension($file_name) {


	return substr(strrchr($file_name,'.'),1);


}

We'll use three utility functions to make the system work: get_files (retrieves all of the files in a given directory), get_file_extension, and make_thumb (generates a thumbnail image from a source image). These are good functions to keep at hand for other purposes too.

The PHP: Setting and HTML Generation



/** settings **/


$images_dir = 'preload-images/';


$thumbs_dir = 'preload-images-thumbs/';


$thumbs_width = 200;


$images_per_row = 3;





/** generate photo gallery **/


$image_files = get_files($images_dir);


if(count($image_files)) {


	$index = 0;


	foreach($image_files as $index=>$file) {


		$index++;


		$thumbnail_image = $thumbs_dir.$file;


		if(!file_exists($thumbnail_image)) {


			$extension = get_file_extension($thumbnail_image);


			if($extension) {


				make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);


			}


		}


		echo '<a href="',$images_dir.$file,'" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';


		if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }


	}


	echo '<div class="clear"></div>';


}


else {


	echo '<p>There are no images in this gallery.</p>';


}

The first step is to define a few simple settings which will dictate image paths, the width by which all thumbnails will be created, and the number of images per row. The action begins with rounding up all of the files. With every image in the gallery, we check to see if a thumbnail exists. If a thumbnail doesn't exist, we use PHP and the utility function above to generate one. When the thumbnail is generated (or there was one there in the first place), we output the HTML link/image. I've given the A element the "smoothbox" CSS class so that Smoothbox will make the larger image display in the lightbox.

The MooTools JavaScript / Smoothbox

All you need to do is include the JavaScript file. Sweet.

class="actions"> href="http://davidwalsh.name/dw-content/generate-photo-gallery.php" class="demo">View Demo

class="clear">

That's it! Have any features you'd like to see added? Let me know!

id="singlesSponsors">

id="bsap_1242453" class="bsarocks bsap_db3b221ddd8cbba67739ae3837520ffe">

class="clear" />

id="related">

id="relatedPosts">

Written by David Walsh

Debuted on Tuesday, April 6, 2010.

Was this post helpful?

class="clear">

style="clear:both;">

name="comments">

id="comments">

Comments

id="comment-16791">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=86f5d3e25d6b57687fc5d0e0d600aeca&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mgrabovsky.github.com/' rel='external nofollow' class='url'>MatЂЫj Grabovsk†
Just a note: it would be wiser to use pathinfo ( href="http://php.net/pathinfo" rel="nofollow">http://php.net/pathinfo) to get the extension of a file. It would also be nice to use FilterIterator ( href="http://php.net/FilterIterator" rel="nofollow">http://php.net/FilterIterator) along with DirectoryIterator ( href="http://php.net/DirectoryIterator" rel="nofollow">http://php.net/DirectoryIterator) instead of that boring, inefficient loop in get_files().
id="comment-16792">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=2a3b114a8bd0d55984db5da18e005262&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Santiago Quiss
Another example with Christina Ricci, I’m starting to think you make this tutorials just to post a photo gallery of her… :)
id="comment-16793">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=24e08a9ea84deb17ae121074d0f17125&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mathiasbynens.be/' rel='external nofollow' class='url'>Mathias Bynens
Why don’t you use href="http://php.net/scandir" rel="nofollow">scandir()?
id="comment-16794" class="dw">
class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh
@Mathias Bynens: My solution is PHP4 compliant, as much as people probably don’t care.
id="comment-16795">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=ee9bd704392041131fd5af5452463ae0&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.aviationreviews.com/' rel='external nofollow' class='url'>Matthew J
Very cool! Nice automation of PHP.
id="comment-16798">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b3c48c49d288e3487dc628bb30e851f6&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">jamie
nice article. this gave me an idea for a theme that I was working on. I am going to use this. Thanks.
id="comment-16807">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse
Nice article, yeah! I modified it to work with the jQuery fancybox plugin. What would be a valuable addition is to get it to work with other fromats (PNG, GIF,).
/> Would you add the code to do that?
/> Thanks now!
id="comment-16809">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse
Well I had nothing to do tonight so I was able to spend some time to figure out how to add PNG files to a directory and get it to work.
id="comment-16814">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=dffd46a9960ac183bad2e2100444940c&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://imperion.pl' rel='external nofollow' class='url'>PaweЉВ P.
@Mathias – I didn’t know this function. Thanks!
/> @David – Good tutorial, best regards!
id="comment-16815">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=05f66a7954f807957c23bf6dd7c6053f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Marc
I’ve done something similar myself in the past, but with a few added features. For example, a text file “title.txt” inside the folder which contains an album’s title, and reading the EXIF comment (using PHP) for titles / captions etc of the individual images.
id="comment-16820">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=e68f333dc62a5ff905e4c89a7a3340de&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.soentjens.nl' rel='external nofollow' class='url'>Tampert
detail. I like picture 2 a lot :P nice work!
id="comment-16821">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=72e3a6f0cb34a70554861c6b8ee748f7&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">David
@William Rouse: And how did you do it? I’m pretty interested in PNG and GIF support too…
id="comment-16822" class="dw">
class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh
I want to say it would be simple. There are only two JPG-specific functions; those would change dynamically. Let me play with this some more.
id="comment-16824">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=05f66a7954f807957c23bf6dd7c6053f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Marc
To make it support multiple image types, how about using phpThumb() for the thumbnailing? You could then have all it’s options for thumbnailing, i.e. raidus corners, frames etc. etc….
id="comment-16825" class="dw">
class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh
@Marc: PHPThumb is nice but could be overkill — look how small the current thumbnail-generating function is. Adding PNG and GIF support likely wont add much.
id="comment-16826">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse
There are a few changes to make to get it to work.
/> In the index.php file add variable $extension to the call of make_thumbs():
/> if($extension) {
/> make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width, $thumbs_height, $extension);
/> }
In the galleryUtil.php file change the function get_files to this:
/> /* function: returns files from dir */
/> function get_files($images_dir,$exts = array(‘jpg’, ‘png’)) {
/> $files = array();
And lastly in the make_thumb function except a new parameter for the extension, and set up two if structures:
/* function: generates thumbnail */
/> function make_thumb($src,$dest,$desired_width, $desired_height, $ext ) {
/> /* read the source image */
/> if ( $ext == ‘jpg’ || ext == ‘jpeg’ ) {
/> $source_image = imagecreatefromjpeg($src);
/> }
/> if ( $ext == ‘png’ ) {
/> $source_image = imagecreatefrompng($src);
/> }
/> тАж.
if ( $ext == ‘jpg’ || ext == ‘jpeg’ ) {
/> imagejpeg($virtual_image,$dest);
/> }
/> if ( $ext == ‘png’ ) {
/> imagepng($virtual_image,$dest);
/> }
ThatтАЩs it.
id="comment-16840">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse
@MatЂЫj Grabovsk†: Would you demonstrate how to rewrite the function using the methods you suggested and are available in PHP5
/> Thanks!
/> WBR
id="comment-16843">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA
@David Walsh: While it is nice to keep things compliant… it is better to actually encourage people to move forward, I am pretty sure they are going to be discontinuing support for it soon…
id="comment-16844">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA
@SeanJA: (It being PHP4…)
id="comment-16845" class="dw">
class="commentBody"> class="commentName" data-avatar="/wp-content/themes/klass/img/commentLogo.png"> href='http://davidwalsh.name' rel='external nofollow' class='url'>David Walsh
@SeanJA: I suppose — I dont’ think it’s that big of a deal.
id="comment-16846">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=74cc83022ea14b42b49ea487b95d5f1e&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://blog.seanja.com' rel='external nofollow' class='url'>SeanJA
@William Rouse: Could you not just use imagecreatefromstring instead?
id="comment-16848">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse
I just read the docs on imagecreatefromstring. Please show me how to use it.
id="comment-16885">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=8854082283430d5c5f283d1381efdb56&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Justin Noel
I love all the cool gallery features of your solutions and others I’ve come across. However, they all lack one simple thing for me. Captions.
How could I display captions for your solution?
id="comment-16886">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=05f66a7954f807957c23bf6dd7c6053f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">Marc
@Justin: Use PHP’s exif_read_data to read any EXIF comment in the JPG file, and use this as the caption.
id="comment-16903">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=88ea4e10ed968136228545d7112d82cb&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://stevegrunwell.com' rel='external nofollow' class='url'>Steve Grunwell
I’ve done a few of these in the past few months (including multi-tiered versions with different sub-directories representing different galleries), and have found PHP’s glob() function to be a real timesaver.
Obviously, you’ll want to check that all the files in the directory are indeed images, but you already seem to be doing this with your get_file_extension() function.
id="comment-16905">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=731d737ba2731178df040d364bf966a1&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://www.geekandhype.com' rel='external nofollow' class='url'>Joffrey
Don’t you know glob()? It’s really useful, you could save a lot of lines. :)
id="comment-16911">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=86f5d3e25d6b57687fc5d0e0d600aeca&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mgrabovsky.github.com/' rel='external nofollow' class='url'>MatЂЫj Grabovsk†
@William Rouse: The get_files functions could be rewritten like this: href="http://gist.github.com/361919" rel="nofollow">http://gist.github.com/361919
id="comment-16912">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=86f5d3e25d6b57687fc5d0e0d600aeca&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png"> href='http://mgrabovsky.github.com/' rel='external nofollow' class='url'>MatЂЫj Grabovsk†
@William Rouse: Sorry, fixed link: href="http://gist.github.com/361922" rel="nofollow">http://gist.github.com/361922
id="comment-16929">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=1fdfc54d7568d437374f5db24f6f9c0f&size=48&rating=G&default=http://davidwalsh.name/wp-content/themes/klass/img/anon.png">William Rouse
@MatЂЫj Grabovsk†: Thanks for the code.
id="comment-16940">
class="commentBody"> class="commentName" data-avatar="http://www.gravatar.com/avatar.php?gravatar_id=b5c85ea91e6dfa0359ed6

Automatically Generate a Photo Gallery from a Directory of Images: Updated

The CSS

The PHP: Utility Functions

The PHP: Setting and HTML Generation

The MooTools JavaScript / Smoothbox

Related David Walsh Posts

Written by David Walsh

Comments