Home » The tutorial » Random Images

Random Images

Bob wants an image on the front page between the first and second paragraphs.  But, he wants it to cycle through several that he will upload.  Our best bet here is a random image script.

First, we're going to use a slightly modified version of a script I posted a few days ago.  Create a new file called randomimage_frontpage.php in the same folder as your index.php file and put the following code inside.

randomimage_frontpage.php

<?php
$base_dir = 'images/frontpage';
$default_alt = 'Bob Smith Photography';
$default_title = 'Bob Smith Photography';

$dir=opendir($base_dir);
$directory=('/'.$base_dir.'/');
$pattern=".(gif|jpg|jpeg)$";
$s=readdir($dir);
$count=0;
$image = array();
while($s)
{
if(ereg($pattern, strtolower($s))) {
$image[$count]=$s;
$count++;
}
$s=readdir($dir);
    }
    closedir($dir);

    //Spit it out
    srand(time());
    $limit=count($image);
    $limit--;
    $randNum=mt_rand(0,$limit);
    $filename = "$image[$randNum]";

$filename_alt = $base_dir.'/'.$filename.'.alt';
$filename_title = $base_dir.'/'.$filename.'.title';
if (file_exists($filename_alt))
{
$fhandle = fopen($filename_alt, 'r');
$fcontents = fread($fhandle, filesize($filename_alt));
fclose($fhandle);
if ($fcontents!='')
{
$alttext = $fcontents;
}
else
{
$alttext = $default_alt;
}
}
else
{
$alttext = $default_alt;
}
if (file_exists($filename_title))
{
$fhandle = fopen($filename_title, 'r');
$fcontents = fread($fhandle, filesize($filename_title));
fclose($fhandle);
if ($fcontents!='')
{
$titletext = $fcontents;
}
else
{
$titletext = $default_title;
}
}
else
{
$titletext = $default_title;
}
$dimensions = getimagesize($base_dir.'/'.$filename);


echo "<img class='frontpage' src='$base_dir/$filename' alt='$alttext' title='$titletext' width='".$dimensions[0]."' height='".$dimensions[1]."'>";
?>

You will probably want to edit three variables - $base_dir, $default_alt, and $default_title.  The base_dir is the folder that contain the images, in this case images/frontpage.  The default_alt and default_title contain the alt and title attributes that will be put into the image tag if you don't define them elsewhere - more on that towards the end.

Also add the following code to your style.css file.

img.frontpage   {
    display:        block;
    margin-left:    auto;
    margin-right:   auto;
    border:         1px solid black;
    }

If you look at the PHP code for the random image you'll notice that we use the class frontpage to style the image.  In the code above it sets the image to center with 'display: block; margin-left: auto; margin-right: auto;' and puts a 1 pixel black border around it. Of course, you could style it however you want.

In your web directory, create an images folder and then a frontpage folder inside of it.  Upload your images that you want to cycle through to the frontpage folder.  For this example I just uploaded 4 images that are solid colors.  They either need to be gif, jpg, or jpeg files.  Anything else in that folder will be ignored.  If you want to use a different folder name you'll need to change the $base_dir variable in your randomimage_frontpage.php file.

You can put as many images in your frontpage folder as you want.  Technically there are some upper limits before speed becomes an issue, but realistically you won't have that many. 

What's it look like?
Here is version 7 of Bob's web site.  You should see a solid colored image underneath the first paragraph.  Every time you refresh the page it will randomly select another of the 4 images in the frontpage folder.  For a real world example, I use the same script on my home page to cycle through wedding images.

A little more about titles and alts
In the lesson on image tags we talked a little about alt and title tags and their purposes.  In the script above there is a default set that is plugged into the image tag.  But what if we don't want to use the default?

The way the script is set up it is easy to define custom alt and title tags for each image.  Let's say I wanted the alt tag for red.jpg to be 'Solid red' and the title to be 'Solid red block'.  I would create a file in the frontpage folder called red.jpg.alt and red.jpg.title.  In the red.jpg.alt file I would enter 'Solid red' and enter 'Solid red block' in the red.jpg.title. 

How to use it
Simply insert the following code where you want the image.

<?php include('randomimage_frontpage.php'); ?>

What else can we do?
Bob has decided that he wants the image in the header to cycle as well. Using this same technique it is easy.  Just create a new php file that contains the random image script and change the $base_dir variable.  Then insert it where he wants the image.  There is no reason that you couldn't have 3 or 4 different versions of this script running on the same page.