Random Image Rotation

ISSN: 1534-0295. 20 October 2003 – Issue No. 160

by Dan Benjamin

One of the challenges facing the modern web designer is to create sites that appear fresh and new every time a visitor shows up.

It's one thing if the site you’re designing is a news site, for example, where stories or headlines will be updated on a regular basis, providing fresh content on the hour — or even more frequently. But what about those of us designing sites for clients with relatively static pages whose content changes infrequently? How can we provide fresh, changed content for our visitors on each subsequent visit, without relying on someone to generate this content on a daily or even hourly basis?

Changing the page only slightly and in subtle ways can work miracles for an otherwise ‘static’ website. For example, imagine a masthead-graphic that's different each time someone reloads the page. How about a product image-link that seems to magically change with every pageview?

Many sites use this technique to randomize the images they display, including:

• Hivelogic (rotating masthead)
• SimpleBits (rotating sidebar photo)
• Cooper (ever-changing top-images and faces)

Work Smarter

There are a handful of scripts out there that rotate images. Many of them are written in JavaScript, but suffer from an important limitation: in order to add or remove items from the pool of images to pick from, you need to get in there and edit the code yourself. Every time you want to make a change. In every page that rotates images. But you're not a programmer, you're a web developer. And adding or removing images from the rotation pool should be an easy thing. As easy as, well, adding or removing images from a folder on the webserver.

Right?

Sure thing! With a little bit of PHP magic, adding this feature to sites you develop is possible — easy, in fact. Don't know how to code PHP? Keep reading. All of the code is already written for you, and it's not necessary for you to grasp all of it (or any of it, really) in order to make this work.

I've even written this script so that if it encounters an error, no images in the image folder specified for example, it will generate an "error image" on the fly and display that, rather than sending an invalid image to your browser which will, in turn, display the broken image icon, which is ugly.

The Requirements

Of course, to make any of this work, you'll need to be hosting your site on a webhost that supports PHP (ideally PHP version 4.2 or newer, but that's not as important). Most webhosts these days support PHP — even those sites running on Windows. This is because PHP is not only a powerful web-programming language, but it's also Open Source. It's been ported to just about every web-hosting platform in existence, so chances are, your webhost already supports it.

Are We Done Yet?

Chances are, you won't need to modify the script at all in order to make it work on the website you're designing. Create a folder on your webserver, upload the images you'd like to rotate into it. Then, just upload the script — unedited — into the same folder. You can then see your rotating images in-action by defining the script as the source of your image, like this:

<img src="/path/to/images/rotate.php" />

That's all there is to it. Just sit back and enjoy your randomly rotating images.

Forcing It

An added feature of this image rotation script is the ability to specify a specific image. This might be useful when, for example, you might like to draw attention to a certain product image on your site when it's new, or to "freeze" the rotation for a while. To do enable this feature, you just need to specify an "img" value when calling the script, like this:

<img src="/path/to/images/
rotate.php?img=my_static_image.jpg" />

This will force the script to load an image file named "my_static_image.jpg" located in the rotation-pool folder.

Customization

You might want to modify the script a bit if, for example, you'd prefer not to upload the PHP script into your images folder, or to support additional image filetypes.

The first thing we need to do is identify the folder where we'll place the images that will be randomly displayed. We do this with a simple variable assignment:

$folder = '.';

The easiest way to make this work is to place the PHP script into the same folder as the images themselves. Because this is the preferred method, we'll set the default value for this folder to be "." which is PHP-speak for "the same folder I'm in." More advanced users can to change this to point to a folder by replacing the "." with a path to their files, like this:

$folder = '/www/example.com/images/rotate_me/';

Now we need to decide which types of images we'd like to support for our rotation pool. At the time of this writing, GIF's, JPEG's, and PNG's are the most common formats for images on the web. For this reason, we'll start-out with those as our default set of images, assigned to an extension-list array:

$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';

If you need to add a new file-type at some point in the future, just copy one of the lines above and customize it by adding your own extension.

That's it! You're done editing the script. Just upload it to the images folder you've created, and link as explained above.

Where Are The Goods, Already?

You can download the PHP source right here (4k text file – after downloading or copying and pasting, save as rotate.php).

The Image Rotator also has its very own web page at Automatic Labs. From there, you can download the very latest version of the script and read a bit more about implementing the rotator on your own website.

Have fun!

Translations

Russian (webmascon.com)

German (byteshift.de)

Discuss

Was it good for you, too? Discuss this article.

Dan Benjamin is the founder of Automatic Labs, an agency specializing in custom web applications, electronic publishing tools, and standards-based design. Dan is ALA’s Managing Producer, and the author of Hivelogic.