Penn Computing
Computing Menu Computing A-Z
Computing Home Information Systems & Computing Penn

Rotating Graphics Using Extended Server-Side Includes (xssi)

On the World Wide Web, you may have some information that you want to display to your users on the fly. You can display the current date, the contents of a certain file, etc. They are called Server-Side Includes. To familiarize yourself with these uses of SSI, see our documentation for SSI. It will teach you the basic commands and aid you in understanding the code below, which we support.

More recent developments of web technology have expanded the basic SSI commands to include more functionality and relationships between the commands. The most notable addition is the if - then - else conditional logic. You can tell the web to serve up one piece of HTML code if a first condition is true or serve up a different piece of HTML code if a second condition is true.

The following code allows you to put rotating graphics onto your web page. It displays a different graphic, or set of graphics, depending on the time. To use this code, be sure to change the path names in italics to reflect where your graphics actually are on the server. Following this sample code is a detailed explanation.

<!-- Begin Rotating Graphic Generator -->
<!--#config timefmt="%S" -->
<!--#set var="page_num" value="$DATE_LOCAL" -->
<!--#if expr="$page_num = /.0/" -->
<!--#include virtual="/photos/index1" -->
<!--#elif expr="$page_num = /.1/" -->
<!--#include virtual="/photos/index2" -->
<!--#elif expr="$page_num = /.2/" -->
<!--#include virtual="/photos/index3" -->
<!--#elif expr="$page_num = /.3/" -->
<!--#include virtual="/photos/index4" -->
<!--#elif expr="$page_num = /.4/" -->
<!--#include virtual="/photos/index5"-->
<!--#elif expr="$page_num = /.5/" -->
<!--#include virtual="/photos/index6"-->
<!--#elif expr="$page_num = /.6/" -->
<!--#include virtual="/photos/index7"-->
<!--#elif expr="$page_num = /.7/" -->
<!--#include virtual="/photos/index8"-->
<!--#elif expr="$page_num = /.8/" -->
<!--#include virtual="/photos/index9"-->
<!--#elif expr="$page_num = /.9/" -->
<!--#include virtual="/photos/index10"-->
<!--#endif -->
<!-- End Rotating Graphic Generator -->

How It Works

As a general rule, SSI statements consist of the following. Every statment is enclosed by the HTML comment notation, <!-- -->. The number sign, #, follows the left-hand-side of the comment with NO space in-between. The command follows the number sign with NO space after it, and the arguments to the command complete the statement. In short, a statement looks like:
<!--#command argument="value"-->
The first command we use is config, which will configure our variable. We have to tell it what we are configuring and how we want it done. timefmt is shorthand for "time format" and we want the time to appear as number of seconds to 2 digits, so we set the format to "%S".

Now that we have configured our variable, we need to define it. The next command is set, so we can set our variable. First, to give it a name, we set var="page_num". Now the name of our variable is "page_num" and we can use that later on to reference the value. We have to set the value first, though. In this case, since we are showing selected graphics based on the current time, we set the value to be the local date, formatted as we configured it.

Now, we have information that we can test to decide what time it is, so we can start our conditional logic. We will show a different set of graphics for each unit of time. We want to get the value of $page_num (the dollar sign indicates it is a variable) so we need to test it. The clause that contains the test is called an expression, abbreviated expr.

The numbers being tested in the code do not seem to be 2-digit numbers. While it is true that they are not actually 2-digit numbers, they do represent numbers that have 2 digits. By enclosing the number in a set of slashes, we create a "regular expression", which means we can try to match what's inside with what we have. The period before the digit acts as a wildcard and represents any number. As an example, we'll look at the second condition.

<!--#elif expr="$page_num = /.1/" -->
<!--#include virtual="/photos/index2" -->
There are 60 seconds in a minute, yet we only have 10 conditions. That is because we can reuse each condition through each successive 10 seconds. Each time the server reads our code, it will try to match the number of seconds to one of our conditions. By using the wildcard, we can match the regular expression, /.1/, to 1, 11, 21, 31, 41, and 51 seconds. The file "/photos/index2" will be displayed when each of those seconds is reached.

The value of virtual can be either a full path or a relative pathname for the location of your graphics. When we're done, we have to tell the machine we're done so our last command is endif.

Resources for Extended SSI

Apache module mod_include
The XSSI Library

Information Systems and Computing
University of Pennsylvania
Comments & Questions

University of Pennsylvania Penn Computing University of Pennsylvania Information Systems & Computing (ISC)
Information Systems and Computing, University of Pennsylvania