Rotating Text And Banners with SSI
Introduction
If your Web server supports SSI (Server-Side Include)
processing, you can use that functionality to produce
pseudo-random rotation of banner images and/or page text.
This article explains how to use a standard SSI template to
provide varying page content without resorting to complex
CGI programming.
What is SSI?
In simplest terms, SSI is a set of extra directives you can
embed in your HTML content. The directives look like HTML
comments, but they are interpreted as Web server directives
by servers that are SSI-compatible and have the SSI function
enabled. The SSI operations specified are processed by the
Web server before the page content is rendered to the browser,
letting you define logical operations and file includes that
will be done in real time as pages are accessed. SSI directives
are often used to simplify site architecture and maintenance;
for example, you might define page headers and footers in one
file and then use SSI to include that information in every
page on your site. Should you need to update the footer information,
you would only have to change one file - after that point,
the SSI include processing done on all your pages would pick
up the new information automatically.
An exhaustive treatment of SSI is beyond the scope of this
article. If you are altogether unfamiliar with SSI processing,
you need to do a little research on it (perhaps referencing
the O'Reilly manual for the Apache web server).
How do you enable SSI processing?
On an Apache web server, I always put this line in the
config or .htaccess file to enable SSI processing:
AddHandler server-parsed .html
This is a departure from the usually suggested method for
using SSI to dynamically assemble page content; most
reference material suggests only doing SSI processing on
files named with the .shtml extension (or some other
naming convention designed to make it obvious which pages
undergo SSI processing). By turning on SSI for regular
HTML files, you can be sneaky and dynamically assemble
pages that appear to be plain old static content.
Varying Page Display via SSI
SSI directives are not terribly powerful, but it is possible
to combine some very simple functions to produce a pseudo-random
variation in page content. The variation is actually not the
slightest bit random, but it can impress the casual site
visitor - just don't expect too much. Here's the key to the
whole thing: SSI can do a simple pattern match on the time
of day, and you can code simple if/elseif blocks that serve
varying content (or contain SSI include directives that point
to varying content) based on the results of the pattern match.
The most impressive use of this technique involves sixty
different variations of the 'random' content. That's right,
sixty. In that application, the SSI code picks one
of the sixty unique choices based on the 'seconds' value
of the current time. As your guest bounces around various
links, minor variations in network latency and page load
time will have the effect of pseudo-randomly rolling a
60-sided die, resulting in enough variation in page content
to stimulate more interest than a static display might do.
In cases where you don't have sixty distinct pieces of
content, you can 'wrap the content around the clock' by
specifying the same content to be displayed at equal
intervals. Let's say, for example, you have six image
files that you'd like to rotate as banner images. You
could map these six images evenly onto sixty seconds
as follows:
- 1.jpg : second 00, 06, 12, 18, 24, 30, 36, 42, 48, 54
- 2.jpg : second 01, 07, 13, 19, 25, 31, 37, 43, 49, 55
- 3.jpg : second 02, 08, 14, 20, 26, 32, 38, 44, 50, 56
- 4.jpg : second 03, 09, 15, 21, 27, 33, 39, 45, 51, 57
- 5.jpg : second 04, 10, 16, 22, 28, 34, 40, 46, 52, 58
- 6.jpg : second 05, 11, 17, 23, 29, 35, 41, 47, 53, 59
With this 'wrapping around the clock' technique, you can see
that the selection of which image file to display is spread
evenly across the 60 seconds in a minute, adding to the
apparent randomness of the choice. You could also work in the
other direction, calling for some images (or text) on more
second values than others, thus 'weighting' some choices more
than others.
SSI Template
Here's the SSI code you could use to check the system clock
and include any one of sixty witticisms on a Web page (if
these look familiar, it's because this is exactly the code
used to embed the little phrases in the page footers on
the okbanlon.com web site):
<!--#if expr="$DATE_LOCAL = /:00 /" -->
I say we nuke it from orbit. It's the only way to be sure.
<!--#elif expr="$DATE_LOCAL = /:01 /" -->
Never build a temple when all you need is an outhouse.
<!--#elif expr="$DATE_LOCAL = /:02 /" -->
Chance is irrelevant. We WILL succeed!
<!--#elif expr="$DATE_LOCAL = /:03 /" -->
Meddle ye not in the affairs of dragons, for thou art crunchy and good with ketchup!
<!--#elif expr="$DATE_LOCAL = /:04 /" -->
Time flies like an arrow. Fruit flies like a banana.
<!--#elif expr="$DATE_LOCAL = /:05 /" -->
Master of Time and Space since 1963!
<!--#elif expr="$DATE_LOCAL = /:06 /" -->
Void where prohibited.
<!--#elif expr="$DATE_LOCAL = /:07 /" -->
Keep away from children.
<!--#elif expr="$DATE_LOCAL = /:08 /" -->
For external use only. If rash develops, discontinue use.
<!--#elif expr="$DATE_LOCAL = /:09 /" -->
Your dog secretly thinks you're an idiot, but will never admit it.
<!--#elif expr="$DATE_LOCAL = /:10 /" -->
Beware the Pogonip.
<!--#elif expr="$DATE_LOCAL = /:11 /" -->
Eat more beans - America needs the gas.
<!--#elif expr="$DATE_LOCAL = /:12 /" -->
You will tread the night soil of many countries.
<!--#elif expr="$DATE_LOCAL = /:13 /" -->
All battles are fought uphill, in the rain.
<!--#elif expr="$DATE_LOCAL = /:14 /" -->
Your equipment was made by the lowest bidder.
<!--#elif expr="$DATE_LOCAL = /:15 /" -->
The most dangerous thing on the battlefield is an officer with a map.
<!--#elif expr="$DATE_LOCAL = /:16 /" -->
No battle plan survives contact with the enemy.
<!--#elif expr="$DATE_LOCAL = /:17 /" -->
If it's stupid but it works, it ain't stupid.
<!--#elif expr="$DATE_LOCAL = /:18 /" -->
The easy way is always mined.
<!--#elif expr="$DATE_LOCAL = /:19 /" -->
If your advance is going well, you are walking into an ambush.
<!--#elif expr="$DATE_LOCAL = /:20 /" -->
A good plan today is better than a perfect plan tomorrow.
<!--#elif expr="$DATE_LOCAL = /:21 /" -->
Always know when it's time to get out of Dodge.
<!--#elif expr="$DATE_LOCAL = /:22 /" -->
Always know how to get out of Dodge.
<!--#elif expr="$DATE_LOCAL = /:23 /" -->
The enemy diversion you are ignoring is the main attack.
<!--#elif expr="$DATE_LOCAL = /:24 /" -->
Perfect is the enemy of good enough.
<!--#elif expr="$DATE_LOCAL = /:25 /" -->
If at first you don't succeed, call for artillery. When that doesn't work, call for an air strike.
<!--#elif expr="$DATE_LOCAL = /:26 /" -->
Learn from the mistakes of others. You won't live long enough to make all of them yourself.
<!--#elif expr="$DATE_LOCAL = /:27 /" -->
Keep looking around. There's always something you've missed.
<!--#elif expr="$DATE_LOCAL = /:28 /" -->
Professional soldiers are predictable, but the world is full of amateurs.
<!--#elif expr="$DATE_LOCAL = /:29 /" -->
Settle down, people - this ain't rocket science.
<!--#elif expr="$DATE_LOCAL = /:30 /" -->
Great Googly-Moogly!
<!--#elif expr="$DATE_LOCAL = /:31 /" -->
Life is a tale told by an idiot, full of sound and fury, signifying nothing.
<!--#elif expr="$DATE_LOCAL = /:32 /" -->
Black Cat is the Best you can Get.
<!--#elif expr="$DATE_LOCAL = /:33 /" -->
Don't you pee on my leg and tell me it's raining!
<!--#elif expr="$DATE_LOCAL = /:34 /" -->
Colonel Flagg: No one sees him come, no one sees him go.
<!--#elif expr="$DATE_LOCAL = /:35 /" -->
Never try to teach a pig to sing. It wastes your time and annoys the pig.
<!--#elif expr="$DATE_LOCAL = /:36 /" -->
If you can't dazzle 'em with brilliance, baffle 'em with bullshit.
<!--#elif expr="$DATE_LOCAL = /:37 /" -->
Reality 2.0: Score counter, extra men, and hints!
<!--#elif expr="$DATE_LOCAL = /:38 /" -->
Cry havoc, and let slip the dogs of war!
<!--#elif expr="$DATE_LOCAL = /:39 /" -->
In the South, quality entertainment consists of a six-pack and a bug zapper.
<!--#elif expr="$DATE_LOCAL = /:40 /" -->
All will be revealed in time.
<!--#elif expr="$DATE_LOCAL = /:41 /" -->
Flee at once! All is discovered!
<!--#elif expr="$DATE_LOCAL = /:42 /" -->
Are we having fun yet?
<!--#elif expr="$DATE_LOCAL = /:43 /" -->
I know life isn't fair, but does it always have to suck?
<!--#elif expr="$DATE_LOCAL = /:44 /" -->
No electrons were harmed during the creation of this page.
<!--#elif expr="$DATE_LOCAL = /:45 /" -->
This page constructed entirely of 100% recycled electrons.
<!--#elif expr="$DATE_LOCAL = /:46 /" -->
Post No Bills
<!--#elif expr="$DATE_LOCAL = /:47 /" -->
Ennui
<!--#elif expr="$DATE_LOCAL = /:48 /" -->
Hoipolloi
<!--#elif expr="$DATE_LOCAL = /:49 /" -->
Notary Sojac
<!--#elif expr="$DATE_LOCAL = /:50 /" -->
Welcome to the Black Mesa Research Facility. Have a safe and productive day!
<!--#elif expr="$DATE_LOCAL = /:51 /" -->
I love animals - they're delicious!
<!--#elif expr="$DATE_LOCAL = /:52 /" -->
Earth First! We'll strip-mine the other planets later!
<!--#elif expr="$DATE_LOCAL = /:53 /" -->
Beware of the Leopard
<!--#elif expr="$DATE_LOCAL = /:54 /" -->
Alcohol, Tobacco, and Firearms - who's bringing the chips?
<!--#elif expr="$DATE_LOCAL = /:55 /" -->
Is your church BATF-approved?
<!--#elif expr="$DATE_LOCAL = /:56 /" -->
May you live in interesting times!
<!--#elif expr="$DATE_LOCAL = /:57 /" -->
A lone amateur built the Ark. A team of experts built the Titanic.
<!--#elif expr="$DATE_LOCAL = /:58 /" -->
Toto, I don't think we're in Kansas any more.
<!--#elif expr="$DATE_LOCAL = /:59 /" -->
Resistance is futile.
<!--#else -->
I say we nuke it from orbit. It's the only way to be sure.
<!--#endif -->
It's ugly, it's inefficient, it's definitely a brute-force
approach - but it works, and it can let you rotate banner
graphics and/or other page components in a manner that's
'random enough' to spark the interest of your site's
visitors.
Obviously, banner graphic rotation would just involve
editing the above template and replacing the lines of
text with <img> tags. You could also
use SSI include directives for the various choices;
in fact, this trick could be used on hugely complex
constructions of text, graphics, lower-level SSI
includes, style sheet references, and so on. If you
were sufficiently warped, you could abstract style
elements and page components such that the entire
look and feel of your Web site varies dramatically
second by second as visitors change pages. Your
visitors would soon be screaming for your head on
a platter, but it could be done.
Conclusion
This approach to pseudo-random page content generation is
really nothing more than a parlor trick, but you may find
it handy. If you can enable SSI processing on your web
server but don't want to bother with an elaborate banner
rotation scheme, this might just be the approach you're looking
for.
|