A Quick and Dirty Way To Randomize an Image

By: Guest Author on December 20th, 2007 — Posted in: Guest Post

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.

Theoretically Related Articles:

Responses

1

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

Chris

Comment by Chris — December 20, 2007 @ 6:28 am
2

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?

Comment by Rich — December 20, 2007 @ 6:37 am
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 =)

Comment by Chris Coyier — December 20, 2007 @ 7:34 am
4

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

Comment by Chris S. — December 20, 2007 @ 8:12 am
5

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

Comment by Jeff — December 20, 2007 @ 9:50 am
6

o.O

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

Comment by Jeff — December 20, 2007 @ 9:55 am
7

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

Comment by sir jorge — December 20, 2007 @ 11:02 am
8

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

Comment by Lazlow — December 20, 2007 @ 1:21 pm
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!

Comment by Chris Coyier — December 20, 2007 @ 3:38 pm
10

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.

Comment by koew — December 21, 2007 @ 4:25 pm
11

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.

Comment by Chris S. — December 21, 2007 @ 10:22 pm
12

Also you can use this to randomize styles in CSS. Something like this:
http://granimpetu.com/articulos/estilos-aleatorios-con-css-y-php/

Comment by Horacio Bella — December 22, 2007 @ 6:49 am
13

Ah, very clever Horacio!

Comment by Chris Coyier — December 23, 2007 @ 10:51 am
14

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

Comment by enfopedia — March 15, 2008 @ 12:11 pm