Random Image Rotation

October 20, 2003

Random Image Rotation

by Dan Benjamin

• Published in: HTML and XHTML, Server Side, Graphic Design |

• Discuss this article »

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).

Have fun!

Translations

Russian (webmascon.com)

German (byteshift.de)

Learn More

Related Topics: HTML and XHTML, Server Side, Graphic Design

Discuss

Was it good for you, too? Join the discussion »

About the Author

Dan Benjamin is a business strategist, programmer, writer, and UI designer. He publishes his articles on his blog, danbenjamin.com. He is the CTO of Rails Machine, and the co-creator of Cork’d (acquired by WLTV). Dan built the publishing system used here at A List Apart.