random image display

It has become a commonly used feature on a lot of sites to rotate certain images or banners at random order to maintain a fresher feel without the need to update (of course any website should be updated regularly - but I am talking about 'cosmetic' elements such as non-essential visuals for the enter or home page of a site).
This random feature can be set up with different methods such as Javascript or php - we will look at the php option as it is more compatible and does not rely on low to medium security settings to work.
In order to set up this random function - we will need a number of images for our random rotation of display as well as a php file performing the random selection and display the chosen image. The image placement can be done in two different set ups:

1. using the php code directly within the HTML code
2. placing the php (and therefore the image) within the HTML code via the include_once(); php function

In both cases it will be neccessary to rename the file with the file extension .php in order to allow the php script to be executed. If your file is currently called random_image.html - you will need to save it as random_image.php.
In the example here - 10 images have been prepared in a designated folder - all images have been named starting from 1 - and the include_once(); php function has been set up to place the image at random order on the page.
If you are working on a larger site you will need to organise all site elements into an appropriate folder structure. You might use a specific folder for all elements to be placed on the page via the include_once(); php function, or group visual elements together.
For the sake of keeping this set up simple and easy to understand - our example has the most basic folder structure as you can see below. Before starting any php set up - make sure you have added your images into the root folder into an appropriate folder.

 

REMINDER: it is vital that all images have been named starting from 1 in order to set up a working random function.

The following steps will take you through the set up of the example shown at the top of the page [open in new window]. Here the focus is on setting up the random function - please see the sample for a link to the css.

html script

The HTML script for the image is very minimal as it consists of 2 elements only. It defines a new DIV, <div id="random_img"> </div>, for the image formatting via CSS and contains the include_once(); php function which calls in the random image as soon as the page is loaded into the browser.

<div id="random_img">
<!--random image -->
   <?php include_once ( 'random_image_process.php' ); ?>
</div>

php script

As we have already linked to a named php file in the HTML code above - random_image_process.php - we will now need to name our new php file this existing name and save it into the folder as the HTML file - see folder set up shown above.
The php code now defines 6 new variables to execute the random function:

• $total
  defining the total number of image contained within the allocated folder
• $file_type
  quoting used file types by their extension
• $image_folder
  stating the folder containing the image files
• $start
  defining the first number of the image collection (for use in random calculation)
• $random
  generating the random number using mt_rand
• $image_name
  containing the chosen image and creating a file name for the ALT tag

<?php
// images named 1.jpg, 2.jpg etc
// total number of images in the folder
$total = "10";
// type of image file eg. .jpg or .gif
$file_type = ".jpg";
// location of folder containing images
$image_folder = "../random_img/";

$start = "1";
$random = mt_rand($start, $total);
$image_name = $random . $file_type;

echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";
?>

Posted in: All