How do the Pictures Change?
by Van Boughner (note that this page needs updating for the new way the img array code is used by the wiki)
You may have noticed that if you re-visit or reload certain pages, even if it's only a few seconds later, that the images on the page have changed. This page contains two examples of such images below. How does this work?
When I came on as the BAOC webmaster, I noticed that the club had a nice collection of photographs in the web site directory, and only a few of them were being used. I wanted to find a way of presenting these pictures that would make the home page seem fresh every time you visited it.
Note that to use this method yourself, you will need to understand how to use PHP, a server-side scripting language available for free on many web servers. The advantage of PHP over Javascript, is that you don't need to rely on the visitor's browser to have Javascript enabled when they visit your site.
First, I created two new directories, one for portrait (http://baoc.org/imgArray/width150/) images and another for landscape (http://baoc.org/imgArray/height130/) images. I copied existing images into these directories and cropped and/or resized them with Adobe Photoshop until they were either 130 pixels high, or 150 pixels wide. I kept the aspect ratio of the images true to the original image. Later, knowing that one of the two dimensions of an image can be relied upon helps you figure out where the pictures will look the best.
You may also organize images by theme. I now have two specialized directories containing only partial images of Maps (http://baoc.org/imgArray/map_width150/) and photos just from Ski-O's (http://baoc.org/imgArray/ski_width150/).
While doing this, I made sure each image file was less than 10k in size. Keeping the size down means you can put two or three of them in a page and still have a page that is reasonable for a visitor with a 56k modem. The best way to do this in Adobe Photoshop is to save photographs in JPEG format, reducing the quality just enough to bring you in under 10k. For images of maps, it's usually better to use the GIF file format and reduce the size of the color table until you have a satisfactory file size.
In addition, you must prepare a file containing the captions for all the images in each directory, called imgArrayCaptions.txt. Here's an example of the caption file (http://baoc.org/imgArray/width150/imgArrayCaptions.txt) file from the portrait (http://baoc.org/imgArray/width150/) image directory. The caption file contains one image file name and caption per line. With this, all your images and captions are ready.
Now you have to work magic with PHP. This excellent scripting language, designed especially for use on the web, allows you assemble web pages on demand for visitors. The web server reads the page file, which must be a .php file, and looks at the contents, scanning for any PHP scripts within it. The file, incidentally, still looks a lot like a regular .html file, except it has a few tidbits of code mixed in. After excecuting the code within the scripts, the web server hands over to the visitor whatever html results from combining the html already in the page with the results of running the scripts.
To do this image trick on your own web site, you are welcome to use my PHP script that collects and picks images randomly from a directory. You must place this file, imgArray.php (http://baoc.org/site/imgArray.txt), in your PHP directory. Note that if you download this file you'll notice that I actually named the file imgArray.txt here, so that it can be easily viewed in a web browser. You'll need to make sure it ends up being named imgArray.php in your directory.
Look at the instructions in the comments of the imgArray.php file for how to use it. Typically it will require you to place something like this at the top of your page, inside the head section, and within a PHP tag:
require("my_php_dir/imgarray.php"); imgArrayShuffle("/my_image_directory/height130");
and this, within a PHP tag, where ever you want a random image to show up:
imgArrayTag();
The code within the imgArray.php (http://baoc.org/site/imgArray.txt) script will ensure that even if you place more than one image in your page using this technique, no individual image will be used more than once. It will also place the right width and height attributes within each image tag.
You may use images of differing themes or sizes from more than one directory within the same page (like this one does), but you'll have to use a numbering system when shuffling and picking the images, like this:
require("${phpdir}/imgarray.php");
imgArrayShuffle("/imgArray/height130", 0);
imgArrayShuffle("/imgArray/width150", 1);
and later:
imgArrayTag(0); imgArrayTag(1);
Enjoy!