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.
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
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.
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.
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
title attributes changing as well.
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
The Configuration File
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
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
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
But what about the image tag’s
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.
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
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:
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?
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'); ?>
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?
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?
Yeah, I figured you might. If you do, just add one or both
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.
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!