Painting the Web

A Bit of Code

A final way to integrate photos into your web pages is using a bit of code embedded into your web pages in such a way that photos are displayed randomly each time a person accesses the page. I've used this for years, both to create changeable sidebar photo displays and also to modify banners and backgrounds for my stylesheets.

Who knows who originated the first PHP-based sidebar photo randomizer. It's been around a long time, though, and is quite popular because so many weblogs and other tools are PHP-based.

If your web pages are PHP-based, all you need do to use a randomizer is organize the photos into one directory local to the site, and save the PHP in Example 4-2 to a file located wherever you want the photo to display.

Figure 4-36. Gallery with the Ajaxian theme

Example 4-2. PHP script to randomly display photos

<?php

$dir = "/home/someloc/www/images/";
$url = "http://somesite.com/images/";
$exts = array('jpg');

//collect list of images in current directory
$imgs = array( );
if($handle = opendir($dir)) {
        while(false !== ($image = readdir($handle)))
                foreach($exts as $ext)
                        if(strstr($image, '.' . $ext))
                                $imgs[] = $image;
        closedir($handle);
}

//generate a random number
srand((double)microtime( ) * 1000000);

//change the number after the % to the number of images
//you have
$ct = count($imgs);

$rn = (rand( )%$ct);

$imgname = trim($imgs[$rn]);

printf("<img src='$url%s' alt='' />", $imgname);

?>

The two items that need to be changed are the $dir and $url at the top of the script. These should point to the physical directory on the machine where the images are currently loaded and the web site address for the directory, respectively.

In addition, by default the application pulls in JPEG images only. If you want to add in PNG or GIF images, add them to the $exts array, separated by commas:

array('jpg','gif','png');

With this script embedded in the page, each time the page is loaded, a different image is loaded.

A variation on this is to incorporate this functionality into your stylesheet. I've used this to modify my CSS to change a banner image used in both my header and footer. To implement this in your space, create a PHP application page called photographs.php, shown in Example 4-3, and load into your template directory where the stylesheet and images are located.

Example 4-3. Modifying a stylesheet for a random image

<?php
// declare the output of the file as CSS
header('Content-type: text/css');
?>
#header {
<?php

$exts = array('jpeg');

//collect list of images in current (look) directory
$url = array( );
if($handle = opendir(dirname(_ _FILE_ _))) {
        while(false !== ($image = readdir($handle)))
                foreach($exts as $ext)
                        if(strstr($image, '.' . $ext))
                                $url[] = $image;
        closedir($handle);
}

//generate a random number
srand((double)microtime( ) * 1000000);

//change the number after the % to the number of images
//you have
$ct = count($url);

$rn = (rand( )%$ct);

$imgname = trim($url[$rn]);

printf("background-image: URL('%s');", $imgname);

?>
           background-repeat: repeat-x;
           background-position: top left;
}

#footer {
<?php

printf("background-image: URL('%s');", $imgname);
?>
           background-repeat: no-repeat;
}

The code is quite similar to that shown in Example 4-2, except it makes the assumption that the photos are in the local directory and returns a content type of CSS in the very first line of the application:

header('Content-type: text/css');

Returning the result of the application as CSS is critical in order to merge the results of this application into a stylesheet. The rest of the document in Example 4-3 is a mix of static CSS and PHP to generate CSS. To incorporate both the static and PHP-generated CSS into my stylesheet, I use the following as the first line (after documentation) in my main CSS file:

@import "photographs.php";

Now, any time the page is accessed, the background photo for both the header and footer banners are randomly drawn from a pool of photos. I've used this effect with my own photos, as shown with Figure 4-37, but I've also used public domain photos, such as the Hubble images, as well as images from NASA and NOAA. In fact, most photographs from agencies funded by the U.S. federal government are public domain.

I could go and on with photos, but it's time now to look at other forms of raster images, and then move on to the vectors.

Figure 4-37. Banner image rotated through dynamic alteration of stylesheet