Tutorials

Random Image Rotation

It’s very easy to spruce up your site with some quick PHP scripting and a handful of photographs. Working with PHP’s built-in directory functions, we can create a simple routine that returns the name of a random image from a specific location on our server. Here’s the full code we’ll be working with.

<?php
$imageDirectory = '/path/to/images/';
$imageURL = '/url/to/images/';
$randomImage = $imageURL . randomImage($imageDirectory);

function randomImage($dir) {
  $files = array();
  if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
      while (false !== ($file = readdir($dh))) {
         if ($file != "." && $file != "..") {
           $files[] = $file;
         }
       }
       closedir($dh);
     }
   }
   $totalImages = count($files);
   $maxImages = $totalImages - 1;
   $randomImage = rand(0, $maxImages);
   return $files[$randomImage];
}
?>

<img src="<?= $randomImage ?>" />

Start by creating a directory on your web server for storing the images. Since we’re going to be reading the directory contents, there’s no need to worry about any particular naming order or convention other than the ones required by your operating system. If you want to add more images to the rotation later, just place them in this base directory and they will be included immediately. Eliminating hard-coded arrays or lists of images makes it much easier to control this script in the future.

Now let’s take a look at what’s going on in the code. The first thing we need to do is set up the server path and the URL to our image directory. The path is the physical location on the disk, while the URL is the address you’d type into your browser to view them. These will vary depending on your particular server setup.

$imageDirectory = '/path/to/images/';
$imageURL = '/url/to/images/';

Next we’re going to call our random image function with the server path, and store the URL for a random image in the $randomImage variable.

$randomImage = $imageURL . randomImage($imageDirectory);

You can see at the very bottom of the program, we are using this variable to output the URL in the src tag of an image. Lets take a look at the function itself, where the actual work is happening. Inside the function, we create an empty array for the results, test to see if the $dir variable is an actual directory, and open it if it is.

$files = array();
if (is_dir($dir)) {
  if ($dh = opendir($dir))

$dh is short for ‘directory handle’, which is the pointer or ‘handle’ to the actual disk resource. The next step is to start up a while loop to read in the contents of the directory.

while (false !== ($file = readdir($dh)))

This will kill the loop when there are no more files to be read and the readdir function gives a false return. There are shorter ways to write this particular statement, but the PHP site recommends this specific usage as the correct one. In this case, the loop will not exit unless the return value of the readdir function is identical to false (meaning equal to and of the same type). For more information, take a look at the not identical operator on the PHP web site.

Next comes one last bit of housecleaning as we strike out any entries that are equal to ’.’ or ’..’. If it’s passed all these tests, it must be one of our images, so we push the filename into our $files array.

if ($file != "." && $file != "..") {
  $files[] = $file;

Finally, we have a tiny bit of basic math to choose our random image. $totalImages gets the total number of images (or files) in the specified directory by using the count() function. Since our array starts at 0, rather than 1, we will need to set an upper limit that is one less than the actual total in the $maxImages variable. At last, we let the rand() function give us a random number between 0 and $maxImages, and return the random array element that corresponds.

$totalImages = count($files);
$maxImages = $totalImages - 1;
$randomImage = rand(0, $maxImages);
return $files[$randomImage];

With a little creativity, and some extremely simple programming, it’s easy to turn a static page into something a bit more interesting. With a random image pool, especially as the number of images grow, your visitor will return to the site time and time again just to see what pops up next.