Grow your CSS skills. Land your dream job.

A Quick and Dirty Way To Randomize an Image

Published by Guest Author

Here is a little trick for randomizing banners on your website. A bit quick and dirty. It needs to be on a PHP page to work.

First off we need to setup a folder on your server where the pictures will go. We need to name the pictures in order, for example, mypicture1.jpg, mypicture2.jpg and mypicture3.jpg and so on.

The next step is to edit your banner code on your website to reflect your new image files location. If you had...

<img src="http://www.yoursite.com/random_images_folder_path/mypicture.jpg" />

It would turn into...

<img src="http://www.yoursite.com/random_images_folder_path/mypicture<?php
echo(mt_rand(1,3)); ?>.jpg">

MT_Rand is a PHP function that randomizes from a first number to a number, in our example 1 to 3. You can have it as high as you have pictures (since you can't randomize what you don't have).

You could also put this image in a PHP file, perhaps called mypicture.php, and include it into your banner area. That way you only have to change it in one place.

So open a new txt file and input the above random image code. Save the text file as a .php extension to your server. Then in your picture area include this code below.

<?php include("http://www.yoursite.com/mypicture.php"); ?>

You also don't have to use absolute paths. I did this for brevity and simplicity sake.

Well that all there is to that. Hope this helps someone.

This post was authored by Chris St. Amand. Chris has been freelance web designer and developer for the past 8 years.

Comments

  1. Permalink to comment#

    Being a PHP ‘noob’ this was really useful for me, thanks!

    Chris

  2. Permalink to comment#

    Nice and simple – I have wanted to show a page with around 100 images on it with the pictures in a random order before, but never worked it out. The problem is that I don’t want any pictures to show more than once.

    I thought about loading the pictures into a database, then iterating through them to make sure they are in a random order, but still unique, but it seems a complex way of doing something relatively simple.

    Any ideas?

  3. @Rich: Are you talking about a slideshow-type presentation?

    This technique is just randomizing the image when the page is loaded, and would only change on a page reload. If you wanted to make sure they didn’t receive the same random image using this technique, you would need to keep track of the images they have seen in a cookie, check your random image against that list, and then generate a new one if there was a conflict. Also, remember to clear the cookie once it has 99 image references in it.

    I’m no expert on this though, obviously, that might be a dumb way to do it. It’s just the first one I thought of =)

  4. Permalink to comment#

    I’m happy that people found it helpful. This is possibly just the first article, in a line of articles on this topic. Who knows :)

    MT_Rand is supposedly a better function than just RAND. I’ve read that RAND will often show you the same image again even if you have 100 images. But MT_Rand is truly random.

    http://us.php.net/rand

    http://us.php.net/manual/en/function.mt-rand.php

  5. Jeff
    Permalink to comment#

    Neat trick

    @Rich : i don’t know your overall knowledge of PHP but its not that hard.

    First of all you need to put all of your images in an array
    $pictures_array = new Array('picture1.jpg', 'picture2.jpg', '...');

    and now, since you know the number of images you have to display you can go with a simple for structure
    for($i=0; $i";
    unset($pictures_array[$random_key])
    }

    Hope that helped you :)

  6. Jeff
    Permalink to comment#

    o.O

    now i look dumb since a part of the code i wrote got ripped of for some kind of reason

  7. Permalink to comment#

    That is definitely not the cleanest way, but if it works, it works!

  8. Permalink to comment#

    Great article – though why is it ‘dirty’? It does the job!

  9. I think Chris S. is calling it “dirty” just because it’s not very dynamic. If the number of images changes or the file names of the images, you’ll need to go into the code an manually change things. There are some fancy-pants methods out there which can read the files names from a folder and display random images from there, which is much less quick and less dirty.

    But I agree, this is a very simple and effective way of doing random images I’m sure I’ll end up using it somewhere soon!

  10. Permalink to comment#

    Why not set a php-file for background-image in the CSS? As long as you’ve set a fixed width/height, it’ll render as it should. Then you could just use a class/id on an element instead of using the img-tag at all.

  11. Permalink to comment#

    Because you need to have that setup in your configuration. It won’t work on all servers to use a php extension as an image.

  12. Also you can use this to randomize styles in CSS. Something like this:

    http://granimpetu.com/articulos/estilos-aleatorios-con-css-y-php/

  13. Ah, very clever Horacio!

  14. Nice and simple, love it. Great job Chris this was really useful for me!

  15. Mr T-San
    Permalink to comment#

    So, my question now is after reading Horatio’s comment, can we use this php for divs containing images and text, or even .css files? Please take a look at jontangerine.com for further evidence that it’s possible. I e-mailed Jon, but he led me down a road to a friend of his, which I’ve yet to hear back from. Any ideas would be great! Thanks

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".