Random Image Rotation

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#section2

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#section3

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?#section4

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#section5

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#section6

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?#section7

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

Have fun!