Feature
Post
Category
Code
Published Thursday December 6, 2007 at 10:06 am
By Thord Daniel Hedengren
Random Images with PHP
Every now and then you want to randomize images, usually headers of sorts. This is pretty simple, with just 9 lines of PHP code you can rotate randomly between two images.
The PHP Script
Put this where you want to rotate your headers:
PHP:
This will rotate between image1.gif and image2.gif, which are located in /mysite/randomimages/ on your server.
Adding more images is easy, just continue to add lines, starting with the next digit and has a corresponding file name, in the $images = array(); segment. This is the same code with five images instead of two:
PHP:
Easy, isn't it?
Now rotate those headers, photos, or whatnot!
Want an avatar? Get a gravatar! • Link to this comment!
Is it possible to put Javascript instead where the filenames are?
Want an avatar? Get a gravatar! • Link to this comment!
You can do it faster by using
$image = $images[array_rand($images)];Instead of
$image = $images[ rand(0,(count($images)-1)) ];Want an avatar? Get a gravatar! • Link to this comment!
mt_rand(); is a better function to use instead of rand();. It’s better at generating a random number. There many many easy ways to do this.
Want an avatar? Get a gravatar! • Link to this comment!
Surely it would be easier to add new entries using:
$images = array(’photo1.jpg’,'photo2.jpg’);
PHP automatically defaults to numbers starting at zero when no key is given.
Want an avatar? Get a gravatar! • Link to this comment!
how funny. i was JUST thinking yesterday “i need to find a clean and simple random image code” for my church’s webpage i’ve been working on this week. what perfect timing! thanks!
Want an avatar? Get a gravatar! • Link to this comment!
Heres an even simpler method that will stay at 9 lines (-minus comments)
<?php
// Name your images like so 1.jpg, 2.jpg, 3.jpg, etc…
// Change this to the total number of images in the folder
$total = “11″;
// Specifies Extensions
$file_type = “.jpg”;
// Location of folder holding images
$image_folder = “images/random”;
$start = “1″;
$random = mt_rand($start, $total);
$image_name = $random . $file_type;
echo “”;
?>
Want an avatar? Get a gravatar! • Link to this comment!
Correction
Heres an even simpler method that will stay at 9 lines (-minus comments)
<?php
// Name your images like so 1.jpg, 2.jpg, 3.jpg, etc…
// Change this to the total number of images in the folder
$total = “11″;
// Specifies Extensions
$file_type = “.jpg”;
// Location of folder holding images
$image_folder = “images/random”;
$start = “1″;
$random = mt_rand($start, $total);
$image_name = $random . $file_type;
echo "";
?>
Want an avatar? Get a gravatar! • Link to this comment!
Correction - Last Change I swear
Heres an even simpler method that will stay at 9 lines (-minus comments)
Want an avatar? Get a gravatar! • Link to this comment!
2 Line version:
<?php$images = array('image1.gif', 'image2.gif', 'hello.gif', 'monkeys.gif', 'ninjas.gif');
echo '';
?>
Want an avatar? Get a gravatar! • Link to this comment!
Why is everyone making this require so much work? In PHP you should not have to deal with naming images a certain way… or manually entering the number.
<?php
$path = “images/”;
//Use PHP to find the images
foreach (glob($path. “*.jpg”) as $imagename) {
$images[] = $path. $imagename;
}
print ”;
?>
Just drop the above script into a file and it will grow with the number of images in the directory. You will never have to mess with the file again!
Want an avatar? Get a gravatar! • Link to this comment!
Why is everyone making this require so much work? In PHP you should not have to deal with naming images a certain way… or manually entering the number.
<?php
$path = "images/";
//Use PHP to find the images
foreach (glob($path. "*.jpg") as $imagename) {
$images[] = $path. $imagename;
}
print ”;
?>
Just drop the above script into a file and it will grow with the number of images in the directory. You will never have to mess with the file again!
Want an avatar? Get a gravatar! • Link to this comment!
That is sad - my post was killed by your editor.
You really need to fix your comment editor so that code in ‘<code>’ tags doesn’t get deleted.
Want an avatar? Get a gravatar! • Link to this comment!
Great tips here! And of course you can squeeze it all together, but it’s not so easily read then, especially for people not accustomed to PHP syntax.
Want an avatar? Get a gravatar! • Link to this comment!
If you’re using a MySQL database for your website, you could also use a SQL query to get a random image. Put the image locations in a table and execute a query like this:
SELECT * FROM table_name ORDER BY RAND() LIMIT 1
Want an avatar? Get a gravatar! • Link to this comment!
I use this half line of PHP to do that. If for example the name of the
files are something like:
background_01.jpg,
background_02.jpg,
background_03.jpg
an so on…
i write:
<img src="./images/background_0< ?php rand(1,3) ?>.jpg” alt=”">where 1 is the first image and 3 is the last.
I think it’s so easy
Want an avatar? Get a gravatar! • Link to this comment!
Great mini-tutorial. This is something I use quite often so I know the PHP novices will be glad to snatch it up.
Want an avatar? Get a gravatar! • Link to this comment!
The randomizer script from A List Apart is the easiest way of doing it, in my opinion. You don’t have to alter anything, or change image file names, it just works out of the box. Which is why I’m using it for my Bedrock Grid WordPress theme.
I’ll keep this in mind though, Thord.
Want an avatar? Get a gravatar! • Link to this comment!
How could you make those images links? Say you had a store that randomly show an item. How could you make it so you could click the items picture and go to the dedicated page for that item?
Want an avatar? Get a gravatar! • Link to this comment!
the array above in the code has a little mistake.. the key 2 is missing. so, when the key 2 appears then no image is displayed.
the actual form of array should be ::
$images = array(
0 => ‘image1.gif’,
1 => ‘image2.gif’,
2 => ‘hello.gif’,
3 => ‘monkeys.gif’,
4 => ‘ninjas.gif’,
);
Want an avatar? Get a gravatar! • Link to this comment!
Great and simple code. Thanks