A Slick Automatic Random Image Rotator Script [Random Picture]

I’ve had this post in the drafts bin for awhile now, I’m just going to finish off it’s miserable existence and push it out into the cold, untamed wilderness of the Internets.

Matt Mullenweg, (of Automattic and WordPress fame), wrote a random image script that fixed a problem I was having building a site about a year ago. The wonderful trick with his random method is that it calls a PHP file which then serves the image by manually writing the file headers to make the browser think it’s calling up an image. This is especially helpful when trying to achieve an image rotation in conjunction with a CSS layout. Normally, random image scripts will place a random image tag (rather, a random value for img=)in the page with a specified image file from a list when the page is parsed. But, if you’re using CSS to serve the images (say, as a background, or header), then that won’t work in CSS since the browser/server is not parsing CSS, but merely reading. So, what this script does is allow you to put a reference to a single PHP file in the CSS (or anywhere else). It’s, then, that PHP file that selects the random image and serves it up to the browser.

The best part about this script is that you can drop a new image in the specified directory, and it’s automatically included in the mix! No need to edit the script every time!

One problem I found, though, is because the CSS makes a call to a PHP file, the browser will call up the cached version of that file until expiration, or forced refresh. (This doesn’t seem to be a problem if the call is being made from another PHP, HTML – or otherwise- file) Since, the PHP file never changes (according to the browser) it’ll likely not be as “random” as you’d like. The result is the same image loading over and over. To overcome this, I added a few lines to the PHP file to include the file header of the image that’s returned to the browser:
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");

Now, hopefully, the browser will not cache the file at all. But, if it does, the expiration date is set to July 26, 1997. So, the next time the browser loads the page, since the file seems horribly out-of-date, it’ll load the file again.

Below,  I will list the code I have deployed on a live site where it works quite wonderfully. Though, now that I go back and look at it… it’s not very similar to Matt’s script. Huh… I told you this was an oldie. I’m not sure where I got this script, or if I modified it that heavily, but at any rate, here are two random image scripts that work similarly. Perhaps at some point I’ll merge the two different scripts because it seems that Matt’s version is more up-to-date, and uses the more “random” and lightweight “mt_rand” PHP operation.

Script I’m using:
// Modify the following line before using this script
$folder = ".";

$fileList = array();
$handle = opendir($folder);
while (false !== ($file = readdir($handle) ) ) {
if ( substr($file, -4) == ".gif" || substr($file, -4) == ".jpg" ) {
$fileList[count($fileList)] = $file;
}
}
closedir($handle);
$randNum = rand( 0, (sizeOf($fileList) -1) );
if ( substr($fileList[$randNum], -4) == ".gif" ) {
header ("Content-type: image/gif");
} elseif ( substr($fileList[$randNum], -4) == ".jpg" ) {
header ("Content-type: image/jpeg");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
}
readfile($fileList[$randNum]);
?>

Matt’s Random Image Script.

To use, just make a call to the php file like you would any image either in a PHP/HTML/CSS/what-have-you page.

(Photo by David Asch)