Displaying random images

Displaying random images and/or text is a common technique used to keep pages looking fresh. There are two basic ways in which this can be achieved: a server side script or method; or a client side javascript.

Several pages around the university use an SSI (server side includes) method for displaying one image and caption out of a selection of up to nine. The method has some advantages:

• It is transparent to the user (there is no special browser requirement)
• It requires no special scripting language. SSI is a default part of most web servers and is enabled on the central web farm.

On the other hand, there are some problems as well:

• Not all servers are configured the same way.
• The code is not all that flexible or easy for novices to understand (and therefore, update).
• The code is part of the html file, but not human readable. While transparent to the end user/browser, it is not a semantic part of the content, so reuse of the content may be hindered.

The SSI Code looks like this:

<!--#if expr="$DATE_LOCAL = /:[0-9][123] /" -->
 <!--#include virtual="/path-to-file/one.html" -->
<!--#elif expr="$DATE_LOCAL = /:[0-9][456] /" -->
 <!--#include virtual="/path-to-file/two.html" -->
<!--#elif expr="$DATE_LOCAL = /:[0-9][7890] /" -->
 <!--#include virtual="/path-to-file/three.html" -->
<!--#endif -->

This example calls one of three include items, but the method can use up to ten. Simply add more #elif conditions to add the extra items, then adjust the regular expressions to distribute the requests as evenly as possible. You only need to adjust the numbers in the second square brackets, so, for five files it might look like this:

...[12]
...[34]
...[56]
...[78]
...[90]

As long as each digit between 0 and 9 is represented in the second array it should work. You don’t have to spread them evenly, one tip might be weighted to come up more than another.

On some servers the timeformat needs to be set with this string to be inserted before the if code:

<!--#config timefmt="%d %B %Y %H:%M:%S %T" -->

The files to be included are simply chunks of html. They must be well formed, or the page will not validate.

Javascript offers a chance to build a much more flexible and easily maintained ‘random loader’. It is possible that a script could be built which replaces parts of the page in a graceful and unobtrusive way.

At the moment, we are simply building a spec to work to for a random image/text loader.

There are also many scripts freely available on the web for this task, though the suitability and quality varies wildly. Approach with caution, definitely avoiding anything that compromises the accessibility and validity of the page. Test it with Javascript off, make sure the inserted code includes alt tags etc. Test it in a wide range of browsers. Try to avoid anything that places chunks of Javascript inline in the html.

!? well, can it be done?

Of limited use, but not to be ignored. A library of images on flickr can be displayed using the tool supplied by flickr or other methods. As with using javascripts off the web, developers must make sure the result is valid and accessible. The flickr supplied tool is not by default terribly good in these areas.