PHP: Random images

Location: Tutorials > PHP > Here
Written By: Site Admin
Date: 14 Jul 2005
Requirements: PHP 3
Level: 2 (Novice)

Random Image

A simple tutorial that explains how to make a random image show up when the page is loaded. See right for a demo. Note that depending on your cache settings, you may need to use Ctrl-F5 or refresh a few times before it chooses a new random image. A solution to this is to use JavaScript instead of PHP. Read the tutorial for the Javascript version if you are interested.

This code can be put anywhere in a PHP file (usually a file with the extension .php), the image will show where the code is.

<?php

$images = array(

// this is the list of images that will be used in the random selection
// use this form: 'pathtoimage.gif',

'/images/imageone.gif',
'../imagetwo.gif',
'images/imagethree.jpg',
'http://example.com/picture.gif',

);

// count the number of images and generate a random number - note that arrays start from 0 so the first image in the above list is accessed with: $images[0]
// if your PHP version is below 4.2, then you need to use mt_srand();

$rand_num = mt_rand( 0 , count($images)-1 );

// access the array (the list above) item corresponding to the random number

$image = $images[$rand_num];

// now show the image

echo <<<EOD
<img src="$image" alt="Random Image" />
EOD;

?>

Most of that should be understandable. If you are new to PHP and want to start learning, read Starting with PHP. If you don't know what <<<EOD is, read the article on Heredocs, heredocs provide an easier way of assigning large amounts of data or HTML to a string.

If you would like to get into something a little more advanced, here is a little variation that allows you to set the alternate text, title and size for each image, here is the code.

<?php

$images = array(

// this is the list of images that will be used in the random selection
// use this form: 'image name | pathtoimage.gif | width | height',

'Image 1 | /images/imageone.gif | 50px | 50px',
'Bleh! | ../imagetwo.gif | 70px | 50px',
'Image 3 | images/imagethree.jpg | 40px | 100px',
'Another Name | http://example.com/picture.gif | 80px | 80px',

);

// count the number of images and generate a random number - note that arrays start from 0 so the first image in the above list is accessed with: $images[0]

$rand_num = rand( 0 , count($images)-1 );

// access the array (the list above) item corresponding to the random number and seperate the image data

$image = $images[$rand_num];
$image = explode(' | ',$image);

// now show the image
// note the format 'image name | pathtoimage.gif | width | height',
// the data is now in an array: $image[0] is the image name, $image[1] is pathtoimage etc.

echo <<<EOD
<img src="{$image[1]}" alt="{$image[0]}" title="{$image[0]}" style="width: {$image[2]}; height: {$image[3]}; " />
EOD;

?>

There are only a few variations to the original code. The data is seperated by a pipe (|) so the data needs to be separated. The function explode puts the data between each pipe into the array as $image[0], $image[1] etc. Note that curly brackets are used around the variables in the echo function, the reason is because it is an array element. If the curly brackets don't surround it then it is interpreted as $image and then the string '[1]' so the output will be Array[1] instead of the desired pathtoimage.gif.

Feel free to experiment with the script, try adding support for more data, eg. a different rollover for each image.