Random Rotation of Images Using PHP and Not Javascript

Posted on Wednesday, November 30th, 2011 at 8:43 am

I am not really against javascript but I do prefer to not use it when I can do the same with other coding methods like html, css and php.  There are a lot of scripts and examples to enable the random loading of an image each time a page loads, however most of them use javascript.  While they work, they relied not only on javascript but also that the viewer of the page was running javascript. Many people turn javascript off for fear of being hacked, hijacked or something else, which for 99.9% of the time will not happen, but paranoia is there with quite a few ;).

I am still relatively new to php, but I am learning the more I play with it.  While learning I came across the rand function which gave me some ideas when combining it with an echo.  Could I use php to look for images in a folder, randomly select one of them and then display it.  It sure could and it is very easy to do, you can do it as an ‘img src’ or even css background.

This is not new, others are doing this and have been for a quite a while (which I can now  locate by doing a search for php random images), but I thought it was a nifty way of doing the random image load that many ask for and thought I would share it my way 🙂

To make it work effectively there are a few tricks to it that you need to prepare before implementing the php method.

  1. Keep the naming of the files consistent, e.g. myimage-1.jpg
  2. Use a numerical number for each image, starting with 0 or 1 depending on how you work
  3. Use a common type of image file, i.e. jpg, gif or png
  4. The page has to be a php page, not html, e.g. index.php

Lets get it t work as an Image;

Lets say you have 8 images in a folder called ‘photos’ that you want to rotate randomly each time a page is loaded, the files are named myimage-0.jpg, myimage-1.jpg, … myimage-7.jpg

Now you want to create a basic ‘img src’ tag for the first image to ensure that it is working, so you create the html being;

<img src='photos/myumage-0.jpg' alt='photo' />

Now lets wrap that in php echo and add the rand function to randomly select an image to load.

<?php echo "<img src='photos/myimage-" .rand(0,7). ".jpg' alt='photo' />" ;?>

Basically all this is doing is changing the number after the name from 0 to 7 by adding the rand(0,7) code to the ‘img src’ output.  I have placed the whole lot in an echo to make it easier, you could just wrap the rand if you wanted to but it looks a little messy.

That is it, try it and you will see that every time you load the page with this code it will randomly show a different image, cool hey:).

Using a CSS style to get the same or similar result;

Lets say you want to change the background of a ‘div’ on every page load.  We will work with the same images as we did in the above example but in a new ‘backgrounds’ folder.  So therefore you have 8 images in a folder called ‘backgrounds‘ that you want to rotate randomly each time a page is loaded, the files are named myimage-0.jpg, myimage-1.jpg, … myimage-7.jpg.

Lets create a div that does the background for us using an in-line style reference, and we will repeat it down for longer pages (optional).

<div style="background: transparent url(backgrounds/myimage-0.jpg) repeat-y;">
  your div's content

Now lets add the rand and php echo to the code to enable it to find and load a random image from your backgrounds folder.

<div style="background:transparent url(backgrounds/<?php echo 'myimage-'.rand(0,7).'.jpg'; ?>) repeat-y;">
  your div's content

That is it, now the background will change for every page load you do, with images chosen randomly.

You can of course extend this, like adding more than one random image load, you just need to follow the same principles as above but use a different folder or file name for each set of images.

I hope this helps you as it has helped me heaps 🙂


Tags: ,

2 Responses to “Random Rotation of Images Using PHP and Not Javascript”

  1. mibbit Says:

    It’s a pity you don’t have a donate button! I’d without a doubt donate to this brilliant blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account.

    I look forward to new updates and will share this blog with
    my Facebook group. Talk soon!

  2. Kaspar Says:

    Hello. Thank you so much. I just spent couple of hours going through different methods of “this” and yours is by far the most easiest way to do it. Awesome job!

Leave a Reply