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.
- Keep the naming of the files consistent, e.g. myimage-1.jpg
- Use a numerical number for each image, starting with 0 or 1 depending on how you work
- Use a common type of image file, i.e. jpg, gif or png
- 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 </div>
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 </div>
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