A Better Image Rotator

About a year ago, I wrote an article, introducing a method for displaying a random image every time someone visits a web page.  Administration was simple: just add or remove images from a folder on the server, and they would appear (or disappear, respectively) from the pool of random images being displayed on that page.

There are many benefits to randomizing an image on a web page, one of the most significant being the feeling of freshness it can add to an otherwise static site.  Visitors returning to the page feel that, although the content might not have been updated, something has changed, and the site might be worth revisiting again in the future.

The Downside#section2

Although the implementation was easy, the previous technique could only output the image — there wasn’t a way to link each image to its own specific URL, nor was there a way to have a different alt attribute for each image.  The image would rotate with each page load, but that was it.  Worse, because the IMG tag was static, the images all had to be the same size. So you had random images, but very little flexibility.

The new Rotator changes all that.  The technique described below still picks a random image from a pool of images, but now you can link each image to its own specific URL.  You can also provide custom alt and title attributes for every image.  Now, rather than pushing the image content directly to the browser, the new script simply generates the a href and img tags on the fly, customizing their content based on the random image it selects.

The Trade-Off#section3

Of course there’s always a catch. While the old technique was very easy to manage (just upload or delete a file from the image folder on the server, and you’d change the line-up), the new technique requires a configuration file.  Fortunately, thanks to some PHP goodness, the configuration file is quite simple and easily updated, making the addition or removal of images almost as easy as a simple upload or delete.

Work It#section4

You can see an example of the new technique in action right here. Reload a number of times and watch the images change.  Mouseover each image and watch the URLs change.  View the source and you’ll see the alt and title attributes changing as well.

Requirements#section5

You’ll need to be hosting your site on a web host that supports PHP (ideally PHP version 4.2 or newer, but this technique should work with older versions as well).  Most web hosts these days support PHP — even those running on Windows platforms.  If you’re in doubt, ask your web host what version of PHP they’re running.

Also, unlike the older version of the random image rotator which could be called by static HTML pages as well as PHP pages, the new version must be called from a PHP file.  This means that the page displaying the image needs to have the .php  file extension (rather than .html).

The Configuration File#section6

I promised that the configuration file would be easy to manage, and, thanks to PHP’s ability to load and understand old-school ini files, it’s a cinch to deal with.  People familiar with older versions of Microsoft Windows will recognize this file format — it’s the same style as the win.ini and system.ini files of yore.

A configuration file providing two images to the rotator might look like this:

  [ALA]
  src   = img/ala.jpg
  alt   = ALA Logo
  url   = http://alistapart.com/
  title = A List Apart  [Scientist]
  src   = img/scientist.png
  alt   = Pic of a scientist
  url   = http://hivelogic.com/
  title = Hivelogic

This simple format makes use of blocks to identify the image name, followed by a few rows of keys and their values.  For example, I can create an image entry for a picture of a scientist with the [Scientist] line.  This starts the image entry.  The following lines list the image’s src, alt, url, and title attributes.  The src entry should point to the image on your server just as you’d link to it in a normal HTML document (using a relative or absolute path).  These values are then put together by the PHP script to create a custom-generated, validating a href and img tags. 

But what about the image tag’s height and width elements, you might be asking?  Fortunately, you won’t have to determine and enter these yourself.  The script is smart enough to figure these out for you, on the fly, once it’s randomly selected the image.

So, if the script had selected the Scientist image, it would create the following img tag from the information in the configuration file:

The link above has been split into several lines for legibility here. In the real-world, the link would appear on one line.

Implementation#section7

You can view the rotator.php script and a sample configuration file, or you can download them together as a zip archive.  The zip file also contains a sample index.php file demonstrating the PHP code below.

Once you’ve created (or modified) the configuration file, save it as images.ini and upload it to your web server.  You should place the file in the same folder as the pages that will be displaying the images (rather than in the same folder as the images themselves). In other words, this file should be right next to your index.php file, not in a folder beneath it.

While you shouldn’t have to change the location or name of the configuration file, it is possible to do so it if you’d like.  But remember, if you do, you’ll need to modify the random image script as well so it knows where to look for your file.

Next, upload the image rotator script itself.  This PHP script, named rotator.php, should also be uploaded to the same place your main pages live, again, right next to your index.php file.

Then you’ll insert a bit of code into your existing page (which ends in .php, right?) to include the image rotator script; this will prime it for displaying random images anywhere on your page. Including the file with PHP is easy.  Just insert the following line at the top of your PHP page:

  <?php include('rotator.php'); ?>

Now we’re finally ready to make the random image display.  To do this, place a line of PHP code exactly where you’d normally place the img tag.  So, if your existing page looks like this:

  
Here is a picture of a scientist:

    href="http://hivelogic.com/"

    title="Hivelogic"

  >

    src="img/scientist.jpg"

    alt="Pic of a scientist"

  />
  

You would change it to look like this:

  
Here is a picture of a scientist:
  <?php showImage(); ?>

If you’d like, you can duplicate that line on your page anywhere you might want a random image to show up. The images that appear should be different from each other — so if you have enough pictures in your pool, you shouldn’t see the same random image appear twice on the same page at the same time.

What If I Want to Use Different Config Files for Different Pages?#section8

Oh, right. No problem.  Just specify the name of the alternate config file when calling the showImage function.  So, instead of using the line above, your code would look like this:

  
Here is a picture of a scientist:
  <?php showImage('myprecious.ini'); ?>

Where myprecious.ini would be your alternate configuration file, listing an entirely different set of images.  You can do this as many times as you’d like, on any page you’d like, or even multiple times within the same page.

What If I Don’t Want Links?#section9

You might just want to display images without displaying links at all. To make this work, just leave the url value of the image entry in the config file blank, or omit it entirely.  The rotator is smart enough to check for this.  If it doesn’t find a URL, it will simply output the img tag without the surrounding a href tags.

What If I Want a Custom ID or CLASS Elements in the Image Tag?#section10

Yeah, I figured you might.  If you do, just add one or both id and class tags to the configuration file, like so:

  id    = specialImageID
  class = specialImageClass

If the rotator finds them, it will add them to the img tag. They’re totally optional.

You’re Done#section11

Once you’ve included the code in your own PHP pages, just visit them in any web browser and reload a few times to see the effect.  That’s it, you’re done!  Depending on your browser’s cache settings and behavior, you may have to wait a moment after the image has loaded before hitting Reload in order to see the image change. Have fun!