Fall Sale! Code FALL2024 takes 25% OFF our Pro Plugins & Books »
Web Dev + WordPress + Security

Drop-Dead Easy Random Images via PHP

[ Drop Dead Random Images ] Recently, while restoring my collection of Perishable Press themes, I needed a fast, effective way to randomize a series of images using PHP. After playing around with several possibilities, I devised the following drop-dead easy technique:

<img src="http://domain.tld/path/random/image_<?php $random = rand(1,n); echo $random; ?>.png" alt="[ Random Image ]" height="50" width="50" />

This single line of code facilitates the random display of n number of images (image_1.png, image_2.png, image_3.png, etc.) located in the target directory (http://domain.tld/path/random/). For those of you that understand how this works, great! That’s pretty much the entire purpose of this article. However, for those that would appreciate some further explanation, let’s examine this technique in a little more detail (you have been warned!)..

Update: Check out my related tutorial, Get Random with PHP »

Step 1: Prepare your images

Prepare any number of images of the same file type (e.g., .png, .jpg, .gif, etc.) and name them numerically. You can name your images just about anything you like, so long as the only difference between each name is a single numerical digit. Further, ensure that the numerical digits begin with zero and proceed in order to the total number of images in the set. For example, assuming you have three .png images, any of the following name sequences is perfectly acceptable:

  • image_1.png
  • image_2.png
  • image_3.png

..or:

  • random-image_01.png
  • random-image_02.png
  • random-image_03.png

..or:

  • 1.png
  • 2.png
  • 3.png

..or just about anything, so long as it follows this general pattern. With a little imagination, it is even possible to use images of different file types, but I will leave that as an exercise for my readers. ;)

Step 2: Prepare the code

Once you have a properly named series of images, upload them to your server and break out with your favorite text editor and prepare to write some code! Once again, here is an example of the final code that we will be using to display our random images:

<img src="http://domain.tld/path/random/image_<?php $random = rand(1,n); echo $random; ?>.png" alt="[ Random Image ]" height="50" width="50" />

How do we get there from here? Easy. First, determine the path of your random image directory. For this tutorial, we’ll assume that the images are located at http://domain.tld/path/random/. Given this information, we can begin writing our randomizing code as follows:

<img src="http://domain.tld/path/random/" />

That’s what we know so far. Now, let’s assume that we are using the “image_n.png” format for our file names, where n equals the particular number of the image. With this information, we may continue with our previous code:

<img src="http://domain.tld/path/random/image_n.png" />

Of course, we may now use PHP to replace the n with a randomly generated number, ranging from 1 to the total number of images in the directory, say 3 for this example. After replacing the n with our randomizing PHP function, we have:

<img src="http://domain.tld/path/random/image_<?php $random = rand(1,3); echo $random; ?>.png" />

Thus, to dynamically randomize the n in our previous example, we are using this little bit of PHP bliss:

<?php $random = rand(1,3); echo $random; ?>

..where 3 represents the total number of files in the random image directory. With this in place, we are generating and echoing a single random number, thereby changing the file name with each page load. Nice.

Step 3: Make it all sweet

Last but certainly not least, we need to complete our code with a few important details. First, you will want to add an alt attribute (and perhaps even a title attribute as well):

<img src="http://domain.tld/path/random/image_<?php $random = rand(1,n); echo $random; ?>.png" alt="[ Random Image ]" />

And then finally, if all of your images are of the same size, it is a good idea to facilitate browser rendering by specifying both the height and width, say 50 pixels square in this case:

<img src="http://domain.tld/path/random/image_<?php $random = rand(1,n); echo $random; ?>.png" alt="[ Random Image ]" height="50" width="50" />

Of course, if your random images are not uniformly sized, simply omit this last step. In either case, once you have finished adding the requisite attributes, the randomizing code is complete. Now is the time to upload your document and check that everything is working as intended. If everything lines up as it should, your page should display a random image with each visit.

If, for some reason, things don’t exactly “click” as expected, go back through each step and ensure that every detail has been accounted for. You would be surprised how many times I have tested something like this only to discover that some infinitesimal detail is out of place. Check the file path, file names, PHP script — everything! While I don’t expect anyone to experience difficulty with this code (it is pretty simple, after all), I do want to make everything as clear as possible to facilitate the successful implementation of this technique!

Whew! Am I long-winded or what? Hopefully, I didn’t put anyone to sleep during this one! ;)

About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
GA Pro: Add Google Analytics to WordPress like a pro.

26 responses to “Drop-Dead Easy Random Images via PHP”

  1. Hi, this PHP code is great, it works fine, thank you very much :)

    Although I have a question: would it be possible to only show 10 images (among the 30 images from the directory), changing randomly on page reload?

    I tried to modify the script but since I’m not a PHP-coder, I didn’t succeeded. So I thought I could maybe ask for help here.

    Thanks a lot!

  2. Excellent!! This is what I was looking for. Something very simple and usefull.

    Thanks.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Blackhole Pro: Trap bad bots in a virtual black hole.
Thoughts
I disabled AI in Google search results. It was making me lazy.
Went out walking today and soaked up some sunshine. It felt good.
I have an original box/packaging for 2010 iMac if anyone wants it free let me know.
Always ask AI to cite its sources. Also: “The Web” is not a valid answer.
All free plugins updated and ready for WP 6.6 dropping next week. Pro plugin updates in the works also complete :)
99% of video thumbnail/previews are pure cringe. Goofy faces = Clickbait.
RIP ICQ
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.