Server Side Include Imaging Secrets

Amazing things can be accomplished with SSI (Server Side Includes). If you have used SSI, it is probably for breaking up your pages into easily definable chunks (top, footer, sidebar, etc.) in order to keep file sizes smaller and to quickly make alterations by just modifying the include file instead of all your pages.

SSI can also work magic with images in order to keep your pages changing and lively. In fact, you can use it in place of a random javascript image changer to rotate images on your site.

If you are unfamiliar with SSI, have a look at this page from Big Nose Bird (link opens a new window). We will use the list at the bottom of that page, the unix style date format codes, as the basis for this tutorial.

As noted on the BigNoseBird page, you can make the local date and time appear on your page just by adding the following snippet of code, the "echo directive"

<!--#echo var="DATE_LOCAL" -->

preceded by a configuration time format.

If you add this config snippet:

<!--#config timefmt="%m/%d/%y" --> right before the echo directive <!--#echo var="DATE_LOCAL" -->, i.e.,

<!--#config timefmt="%m/%d/%y" --><!--#echo var="DATE_LOCAL" -->

you will get this:

05/09/08

which is the current month/day/year.

If you take out the slashes (/) in the first configuration, i.e.,

<!--#config timefmt="%m%d%y" -->

you'll get this:

050908

Leave out the %m and %y (month and year)

<!--#config timefmt="%d" -->

and you get the day only:

09

substitute seconds for the date, i.e., %S for %d, and you get the current second:

54

So where am I going with this? What about changing images? Now here's the magic. If you notice at the BigNoseBird page, the %S (Unix Style Date for Seconds) produces 62 different numbers, from 00 to 61 (don't ask me why there aren't only 60 as there are only 60 seconds in a minute). If you were to create 62 different images, you can have a different "random" image come up, depending on which second of the minute the page was loaded. Here's how:

1) Create 62 different images, name them 00.gif through 61.gif. Upload them to your server in the directory of your choice. I've created a bunch of 50x50 pixel squares and uploaded them in the directory "ssiimages".

2) use the Seconds config before the echo directive as in the following example:

<!--#config timefmt="%S" --><!--#echo var="DATE_LOCAL" -->

which would give you this:

54

However, you can add good old HTML code that calls up an image around your SSI code to bring up the image by that name! For example, this standard code will bring up the image "08.gif":

<img src="ssiimages/08.gif">

And you'd get this image:

But to get it to bring up one of the 62 images in a random selection, depending on the current second, you would put the first part of the html code, the <img src="ssiimages/ before the number, which will be created by the SSI code. Then, after the SSI code, put the end of the html code, the part after the number: .gif">

Your entire code would look like this:

<img src="ssiimages/<!--#config timefmt="%S" --><!--#echo var="DATE_LOCAL" -->.gif">

Remember, DO NOT include the number "08"...that was only an example. The SSI automatically chooses the number for you, based on the current second. If you did it right, you'll have an image, like the one below!

If you refresh this page, you'll see a new "random" image. This little bit of code sure beats using cumbersome javascript that uses the same principle of selecting random images. Of course you don't have to use seconds...you can use minutes, or, in a working example at my personal journal, (link opens a new window -- take a look at the three square images in the upper left corner) you can create special images for the days of the week, the month and the date.

In that example, I use the following HTML and SSI codes:

<img src="http://ornamentalillness.com/weekdaysssi/<!--#config timefmt="%A" --><!--#echo var="DATE_LOCAL" -->.gif"><br><img src="http://ornamentalillness.com/monthsssi/<!--#config timefmt="%B" --><!--#echo var="DATE_LOCAL" -->.gif"><br><img src="http://ornamentalillness.com/days/<!--#config timefmt="%d" --><!--#echo var="DATE_LOCAL" -->.gif">

where %A is the full weekday name (i.e., Monday) and %B is the full month name (i.e., September)

Feel free to use this tutorial to make your own pages come alive with customized images for the current day, month, year, second, etc. But please create your own images. Thanks!

Tutorials

NEW! Review of Various Astral Plugins

SSI Image Secrets

Review of AutoFX Mystical Series

Review of AutoFX DreamSuite

Ghost Gif

Top-Bordered Background

Full-Bordered Background

Paisley-patterned Background

Pearl

Tiling Fonts at The Dingbatcave

previous page

Show us your support by a donation and we'll show our appreciation with a link back to your site. More information-->

Copyright © 1996-2008 Ann Stretton. All Rights Reserved. No part of this website may be copied or reproduced. Permission is not given under any circumstances to use any of the graphics or art on this site for any purpose whatsoever with the sole exception of the items offered in the webgraphics area in accordance with the terms of use.