Scanning Folders with PHP

Let's imagine that you want to build a page that will display snapshots of your latest work. One way to do this would be to hard-code the images into your document. The obvious repercussion is that, every time you want to add a new item, you must manually update your html document. Another method would be to store and retrieve the information from a MYSQL database. This will function perfectly, though for many sites, this solution may possibly offer far more power than is technically needed - not to mention the increase in hosting costs.

In such instances, the best solution is to make PHP scan your "portfolio" folder and dynamically create the code for you. If you want to update your page with a new snapshot, all that you need to do is drag the image, and its respective thumbnail, into the appropriate folders - and PHP will do the rest. Let's build it now!

Our Mission

Let's briefly outline what we need to accomplish.

Use PHP to scan our portfolio folder. It will then cyle through each file, that is an image, and then display it on the page.
Style our content a bit using CSS.
When the users clicks on a thumbnail, we'll use jQuery to load the large version of the image in the main panel.
If the user has Javascript disabled, he'll simply be directed to a new page that contains the full-sized image

How to Use It

Adding a new image to our portfolio is simple. Take a snapshot of your website, brochure, postcard, etc and size it to 500px x 350px. Place this image within the "images/featured" folder.

Next, create a thumbnail that is 50px x 50px. Place this image within the "images/tn" folder.

You must make sure that both the full-sized and the thumbnail images have the exact same file name.

Our Final HTML

<!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>
    <title>Scanning Directories with PHP</title>
    <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <script src="js/scripts.js" type="text/javascript"></script>
    <link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="container">
	<h1>Some Portfolio</h1>
        <div id="featured">
			<?php 
				$featured_dir = 'images/featured/';
				$scan = scandir($featured_dir);
				echo '<img src="'. $featured_dir . $scan[2] . '" alt="image" />';	
			?>
        </div>
        
        <ul id="options">
		<?php 
			$dir = 'images/tn/';
			$scan = scandir($dir);

			for ($i=0; $i<count($scan); $i++) {
			 if ($scan[$i] != '.' && $scan[$i] != '..') {
			 echo '
			 <li>
			  <a href="' . $featured_dir . $scan[$i] . '">
			   <img src="'. $dir . $scan[$i] . '" alt="'. $scan[$i] . '" />
			  </a>
			 </li>';
			 }	
			}
		?>
        </ul>
    </div>
</body>
</html>

Our Final CSS

View it here.

Compensating For IE6

Luckily, we only have one thing to fix. If you look at the image above, you'll see that the #options unordered list is not containing its floated list items. While modern browsers will correctly clear the items thanks to our "overflow: hidden;" style, IE6 needs one more rule. Append this to your stylesheet.

ul#options {
...misc styles...
height: 1%;
}

I could have set the height to anything and it would still work. Think of it as Drago punching IE6 in the face and telling it, "Wake up!". This style forces IE6 to expand as much as is need to clear its children.

The Complete Javascript(jQuery)

$(function() {
    $.preloadImage = function(path) {
        $("#featured img").attr("src", path);
    }

    $('ul#options li img').click(function() {
        $('ul li img').removeClass('selected'); 					
        $(this).addClass('selected'); 							    

        var imageName = $(this).attr('alt'); 					    

       $.preloadImage('images/featured/' + imageName);

        var chopped = imageName.split('.'); 						
        $('#featured h2').remove(); 								
        $('#featured')												
		 .prepend('<h2 class="description">' + chopped[0] + '</h2>').children('h2').fadeIn(500).fadeTo(200, .6);
    });

    $('ul#options li a').click(function() {							
        return false;
    });
});

Extra Credit

There are ways to create thumbnails of our images dynamically. Try to find a way to make PHP scan our "featured" folder and then dynamically create a thumbnail version and save it within the "tn" folder.

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.