More on my Church Web Page redo:
It's nice to have a picture on the front page, showing the church, or, more importantly, the people who make up the church. It's even nicer to have the picture change occasionally.
The ideal way to do this is to make a Flash slideshow, something easily accomplished with SWFTools, available in fine Linux distributions everywhere. It's fairly simple: Load up all the pictures in order, and export the file, possibly making a political statement everyone in the Universe will ignore. ahem Sorry, some things die hard.
The advantage of Flash is that everything is loaded into your visitors browser once, and then stays there, rotating pictures, for as long as she/he is on the page.
The disadvantage, at least with the method used here, is that the pictures are always in the same order. Which means that the casual visitor, who only stays on your site for maybe 60 seconds at a time, will only get a few pictures, always in the same order.
Not to mention, every time you add or subtract a picture from the lineup, you've got to recompile the animation — not an onerous task, but an annoyance.
PHP can solve part of this problem. With a little searching, I found a script which displays a random picture from a directory every time the file is accessed. So we take this scripted, called, say, rotate.php, and place it in a directory with a bunch of jpeg pictures. Then in your HTML file, instead of loading:
<img src="frontpict/boring_old_picture.jpg" />
One writes:
<img src="frontpict/rotate.php" />
where frontpict is the directory for the pictures for the front page. Every time the page is reloaded, it displays a randomly selected jpeg from the pictures directory. (Note that rotate.php tells you how it can be modified to load in text, or HTML. You could, e.g., make a web-based fortune program with this script.)
Note that the program picks randomly from every picture in the directory, so to change pictures, you simply add or delete files from the directory.
But that doesn't solve the other problem: no matter how long the visitor is on your page, she or he will only see one picture. One solution would be to reload the page every few seconds, say by putting this in the <head> block:
<meta http-equiv="refresh" content="6" />
which reloads the page every six seconds, changing the picture every time.
(We scientifically selected six seconds by looking at other pages to see how often they refreshed. Anything shorter is definitely too short. More than fifteen seconds is way too long. We decided to go with the shorter time.)
OK, all that's fine, but you're reloading the entire page every six seconds, which is a big waste of bandwidth. How to reload just the picture?
My solution, which is probably not optimal (and I hope someone has a better one), was to use an iframe. This is a depreciated and widely hated element of HTML, so it's not going to be around in the future, but hey, it's now, and the best I've got.
So to run this sucker, we create a page index.html in the pictures directory. It looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotating Pictures</title>
<style type="text/css">
img {
display: block;
margin: auto;
}
</style>
<meta http-equiv="refresh" content="6" />
</head>
<body>
<img src="rotate.php"
alt="Rotating Pictures from the United Parish " />
</body>
</html>
(The display:block script is necessary to make this work in, oh come on, guess, IE.) If you go to http://www.unitedparishbowie.org/frontpict/, you'll see that all this web page does is show a new picture every six seconds.
Now to get this creature into the home page: we add the following lines, replacing the earlier <src img= … stuff:
<iframe src="frontpict/index.html" width="560" height="355"> <img src="frontpict/IMG_1502.jpg" alt= "The United Parish of Bowie" /> </iframe>
Now, when the home page is loaded, the iframe loads in the page frontpict/index.html in the appropriate block. That page then reloads itself every six seconds, with a new randomly chosen picture.
Problem solved? Well, not quite. You'll note the width and height limits above. This is to make sure that the picture shows up in all browsers, including IE6-8, in more or less the same place. To make it work without cutting off the pictures, I had to edit them so that they were no more than 540 pixels wide and 315 pixels tall. So it's a bit more work than just dropping the pictures you want into the appropriate folder.
And then there is the way IE handles frames. In most broswers, you'll see that the background around the pictures is the same as the background of the main page. However, in IE you'll see a big white box. I have yet to figure out how to get rid of this.
But what we do have is a method for displaying any number of random pictures, without having to do any additional coding when we add or subtract pictures. And, of course, we can display different slideshows on different pages, simply by adding more directories.
Posts
0 comments:
Post a Comment