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]);
?>
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)
Speeding Up Web Sites with Flushing [PHP Speed Tweak]
Though, you should be careful when using it because it may or may not be helpful, depending on your application.
When a client requests a php (or any other server-side page) the server parses the whole page, then sends the resulting code to the client when it’s finished. Once the client receives the page, it can begin fetching images, or whatever media is on the page.
Using the following flush code could speed up the process for the client:
< ?php flush(); ?>
Be sure to remove the space between the right angled bracket “<” and the question mark “?”.
When the server encounters this tag, it will immediately send everything it’s already processed to the client before continuing on the rest of the page. For example, I use this code on another site right after the 3 codes for the 3 random header images are processed. This way, the client can begin fetching the images while the server processes and sends the rest of the page, which is mostly text.
Ultimately, we’re talking about milliseconds here, but its hundreds of milliseconds we might be shaving off. Again, with the site I mentioned above, it seems that by time the header images have loaded, the rest of the web site has completed it’s load. Not only did this save time for the user, but it gives the appearance that everything loaded at once rather than the page appearing with the header images appearing a few moments later.
Code responsibly.
How to Find Your Server Path [Path to Folder]
Usually, one can just look up their absolute server paths in the help files of their web host. Sometimes your host isn’t so helpful. Just put the following code in a .page and drop it in the folder you want to know the server path to and tada!
< ?php echo getcwd(); ?>
Don’t forget to remove the space between the angled left bracket “<” and the question mark “?”.
Once you do that, send a complaint to your host.
Recently Discovered
Recent Comments
