dougv.com | The Web home of Doug Vanderweide » Blog Archive » Displaying A Random Image From A Directory Via PHP, Part 2

Displaying A Random Image From A Directory Via PHP, Part 2

July 3, 2007, 10:24 PM

In a recent blog post about randomly displaying an image from a directory via PHP and its built-in image and filesystem functions, I promised to expand upon the answer I had given to demonstrate some other cool filesystem tricks.

It’s about time I made good on that promise.

We’ll start by showing how to display a random image on a Web page, rather than forging the PHP to represent itself as an image; and we’ll also make a thumbnail gallery of all the images in the folder, which even shows the active image.

Displaying The Random PHP Image On The Page

The script to randomly select and display an image on a Web page is remarkably similar to the original script in this post, except that we’re going to find the image’s URL to apply as the src attribute for an IMG tag, rather than putting the image directly to the output buffer.

That URL we’ll store as the variable $img_src:

$img_path = "images/";
$exts = "/(.jpg)|(.jpeg)|(.gif)|(.png)$/i";
 
if(is_dir($img_path)) {
	$img_handle = opendir($img_path);
 
	while (false !== ($img_file = readdir($img_handle))) {
		if (preg_match($exts, $img_file)) {
			$img[] = $img_file;
		}
	}
 
	mt_srand();
	$len = count($img) - 1;
	$index = mt_rand(0, $len);
	$img_src = $img_path . $img[$index];
 
	closedir($img_handle);
}
else {
	die("no such directory!");
}

And now, to display the “random” image, we simply echo out $img_src inside an IMG tag:

<img src="<?php echo $img_src; ?>" alt="<?php echo $img_src; ?>" title="<?php echo $img_src; ?>" />

A Thumbnail Gallery That Shows The Current Image

Using the same methods we employed to select a random, full-size image on the page, we can use to display a series of thumbnail images. In fact, we can even combine the scripts, to apply a background color to the thumbnail that is currently being displayed in full size.

We’ll sort of cheat on layout by using a table to display the thumbnails. (Technically, this can be considered tabular data, but best practices would be to not use a table here).

$i = 0;
$TN_COLS = 3;
$tn_path = "images/tn/";

Next, we’ll use the same method we did above to open the directory and begin iterating through the thumbnails, dumping them into an array as well:

if(is_dir($tn_path)) {
	$tn_handle = opendir($tn_path);
 
	while(false !== ($tn_file = readdir($tn_handle))) {
		if(preg_match($exts, $tn_file)) {
			$tn_img[] = $tn_file;
		}
	}

Now for the first real change: We apply a natsort on the array.

We do that not only because the filesystem stores icons in an unpredictable manner — that is, any old item in the directory could be listed first in any one iteration of the directory — but because we want the pictures ordered in a way that makes sense to most people.

Unlike a normal array sort, natsort will sort an array more like a human would. For example, if you have thumbnails named 1.jpg through 15.jpg, a normal array sort would place 11.jpg-15.jpg, after 1.jpg but before 2.jpg. Natsort will put 11.jpg-15.jpg at the end of the array, the way most humans would.

	natsort($tn_img);

With the array sorted, we can begin outputting each item in the array as a cell in our table.

We’re going to dynamically create rows in the table based on the $TN_COLS variable we declared earlier. For example, since we declared 3 as the value of $TN_COLS, any time we have a cell that is divisible by 3, we’re going to break for a new row.

We’re also going to see if the thumbnail image we are using is the same as the currently displaying large image. If it is, we apply a class to the table cell; in that class, we define the background color we want to have appear.

	foreach($tn_img as $thumb) {
		if($i % $TN_COLS == 0) {
			echo "<tr>";
		}
 
		echo "<td";
		if($thumb == $img[$index]) {
			echo " lang=\"active\"";
		}
		echo ">";
		echo "<img src=\"" . $tn_path . $thumb . "\" alt=\"$thumb\" title=\"$thumb\" />";
		echo "<br />";
		echo $thumb;
		echo "</td>\n";
 
		$i++;
		if($i % $TN_COLS == 0) {
			echo "</tr>\n";
		}
	}

We have one last housekeeping item: It’s possible we don’t have enough cells to complete the last row. To fix that problem, we add another loop that “pads” the last row with enough empty cells to complete it.

	if($i % $TN_COLS != 0) {
		for($x = $i; $x % $TN_COLS > 0; $x++) {
			echo "<td>&nbsp;</td>\n";
		}
		echo "</tr>\n";
	}
 
	closedir($tn_handle);
}
else {
	die("no such thumbnail image path!");
}