How do i create rotating images in my theme?

[t31os]

After reading quite a few threads on members asking how to create rotating random images in the header of their themes, i thought it was about time i created a thread to show how to do this. Personally i felt the existing methods popping up were somewhat over complicated and required too much time. So i found a simple method, using a simple PHP script, its free, just keep the copyright in place.

What does this script do?
This script will rotate images in a set folder, so your random images need to go in a dedicated folder - eg. ' /YOURTHEME/images/random/ '

Does the rotation of images require the use of javascript?
No, the image rotation is done using PHP.

So how do i use the PHP script?
Create a folder within your theme's image folder dedicated to where you will have your random images. Only your random images should reside here.

Now create a file called rotate.php and paste the following code into that file and save.
*(Please make sure all code and copyright is left as is)*

PHP:

<?php /* AUTOMATIC IMAGE ROTATOR Version 2.2 - December 4, 2003 Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd. All Rights Reserved. http://www.hiveware.com/imagerotator.php http://www.automaticlabs.com/ DISCLAIMER Automatic, Ltd. makes no representations or warranties about the suitability of the software, either express or implied, including but not limited to the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd. shall not be liable for any damages suffered by licensee as a result of using, modifying or distributing this software or its derivatives. ABOUT This PHP script will randomly select an image file from a folder of images on your webserver. You can then link to it as you would any standard image file and you'll see a random image each time you reload. When you want to add or remove images from the rotation-pool, just add or remove them from the image rotation folder. VERSION CHANGES Version 1.0 - Release version Version 1.5 - Tweaked a few boring bugs Version 2.0 - Complete rewrite from the ground-up - Made it clearer where to make modifications - Made it easier to specify/change the rotation-folder - Made it easier to specify/change supported image types - Wrote better instructions and info (you're them reading now) - Significant speed improvements - More error checking - Cleaner code (albeit more PHP-specific) - Better/faster random number generation and file-type parsing - Added a feature where the image to display can be specified - Added a cool feature where, if an error occurs (such as no images being found in the specified folder) *and* you're lucky enough to have the GD libraries compiled into PHP on your webserver, we generate a replacement "error image" on the fly. Version 2.1 - Updated a potential security flaw when value-matching filenames Version 2.2 - Updated a few more potential security issues - Optimized the code a bit. - Expanded the doc for adding new mime/image types. Thanks to faithful ALA reader Justin Greer for lots of good tips and solid code contribution! INSTRUCTIONS 1. Modify the $folder setting in the configuration section below. 2. Add image types if needed (most users can ignore that part). 3. Upload this file (rotate.php) to your webserver. I recommend uploading it to the same folder as your images. 4. Link to the file as you would any normal image file, like this: <img src="http://example.com/rotate.php"> 5. You can also specify the image to display like this: <img src="http://example.com/rotate.php?img=gorilla.jpg"> This would specify that an image named "gorilla.jpg" located in the image-rotation folder should be displayed. That's it, you're done. */ /* ------------------------- CONFIGURATION ----------------------- Set $folder to the full path to the location of your images. For example: $folder = '/user/me/example.com/images/'; If the rotate.php file will be in the same folder as your images then you should leave it set to $folder = '.'; */ $folder = '.'; /* Most users can safely ignore this part. If you're a programmer, keep reading, if not, you're done. Go get some coffee. If you'd like to enable additional image types other than gif, jpg, and png, add a duplicate line to the section below for the new image type. Add the new file-type, single-quoted, inside brackets. Add the mime-type to be sent to the browser, also single-quoted, after the equal sign. For example: PDF Files: $extList['pdf'] = 'application/pdf'; CSS Files: $extList['css'] = 'text/css'; You can even serve up random HTML files: $extList['html'] = 'text/html'; $extList['htm'] = 'text/html'; Just be sure your mime-type definition is correct! */ $extList = array(); $extList['gif'] = 'image/gif'; $extList['jpg'] = 'image/jpeg'; $extList['jpeg'] = 'image/jpeg'; $extList['png'] = 'image/png'; // You don't need to edit anything after this point. // --------------------- END CONFIGURATION ----------------------- $img = null; if (substr($folder,-1) != '/') { $folder = $folder.'/'; } if (isset($_GET['img'])) { $imageInfo = pathinfo($_GET['img']); if ( isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) && file_exists( $folder.$imageInfo['basename'] ) ) { $img = $folder.$imageInfo['basename']; } } else { $fileList = array(); $handle = opendir($folder); while ( false !== ( $file = readdir($handle) ) ) { $file_info = pathinfo($file); if ( isset( $extList[ strtolower( $file_info['extension'] ) ] ) ) { $fileList[] = $file; } } closedir($handle); if (count($fileList) > 0) { $imageNumber = time() % count($fileList); $img = $folder.$fileList[$imageNumber]; } } if ($img!=null) { $imageInfo = pathinfo($img); $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ]; header ($contentType); readfile($img); } else { if ( function_exists('imagecreate') ) { header ("Content-type: image/png"); $im = @imagecreate (100, 100) or die ("Cannot initialize new GD image stream"); $background_color = imagecolorallocate ($im, 255, 255, 255); $text_color = imagecolorallocate ($im, 0,0,0); imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color); imagepng ($im); imagedestroy($im); } } ?>

Next add the images you wish to have randomly display into the folder you created.

Now open the file you wish to display the random images on
*this would be header.html if you were using a random image in your header*.

Now where you'd normally display an image like

Code::

<img src="{THEME_PATH}/images/yourimage.gif" alt="" />

Example assumes images are stored in the main image directory for your theme.

Replace this with

Code::

<img src="{THEME_PATH}/images/random/rotate.php">

Example assumes the folder for random images is called random and stored in the theme's main image directory.

The above example used in the cpgnuke theme would point to

Quote::

http://www.yoursite.com/themes/cpgnuke/images/random/rotate.php

Enjoy!...

[ScotC]

The only thing that might be confusing people is the different between a random image IN a header and a random header. One is a single file which you have posted a great script for people to check out. This other solution deals with a header such as in Hardwired, Pitchers Themes , and other that require a specific SET of images to be pulled randomly. I think the flurry that recently came up was the multiple image type. In my case there is a headers directory similar to your random script except instead of a bunch of files to choose from there are a bunch of directories to choose from. Within each of those directories are the expected header files that must be pulled together (7 images in the hardwired theme) If you randomized all of the image pulled your header would look like some piece of modern art with the seven images being pulled from different headers.
All this is so that you might make some kind of distinction between the 2 types of randomizing that has been tackled in the last month or so. I think with the quality themes and particularly your headers you could doo some really cool stuff. Even if you used just 2 or 3 different headers in a Counterstrike theme you could have one with a Terrorist emphasis, one with an good guys emphasis(their name escapes me at the moment) and maybe one with both side diplayed equally

[MrPotatoes]

if you make your header one image it should work just fine

[ScotC]

I'm not saying that my way is the best way. I'm just making the distinction between randomizing a single image within a header and randomizing the entire header(multiple images of a set). I think there are great uses for both. I just lean towards the random header over a single graphic within the header.

[Corduroy]

Can't help but ... THANKS. You made my day (easier).

[portrower8]

I would like my header to be different every time someone visits our webpage. Problem is, the header has different images in it. And I cannot make it one image because menu buttons are a part of the header.

So, is there a way to do that? Have a rotating header based on multiple images?

Thanks!
Justin

[t31os]

There's a solution to that already elsewhere in this forum, the above version is a slim version used to rotate one image.

[grimesy]

so could this be changed to a random sound? so like when some one visits your website it will play a sound, and when they re-visit the homepage it will play another sound?

[urshadowarrior]

how about if you have a swf file? how can you get it to work?

[Magistus]

I followed all the steps and the image fails to display, I get the red X box and when I check the img properties it is still saying rotate.php! Help!

[djdevon3]

I haven't actually tried the code t31os posted but if it works then it is much more diverse than what I'm going to post.

I've archived t31os script here:
www.treasurecoastdesig...&p=377#377

And the one Kristin did for xsport which is much easier to manage but only does images. Good for random header images. Kristin's code is much smaller and simple to work with. I recommend this method to those daunted by t31os's code:
www.treasurecoastdesig...=1226#1226

[shooh]

@djdevon3: thank you for the link, it was really helpful. with the help of script given in the link, i added random text as well.

[Savis]

I honestly do not know where to post this so if this is in the wrong place I apologize...

What I would like to accomplish is this…

On my webpage I would like to make it so that the topic image that it uses for new posts are random…


I have a list of 20 or so images that I would like to use….

Now I understand that “Random” selection is scientifically impossible. (with out human reason)


Savis

[petrakid]

Wow, I'm just now wondering the same thing - can we randomize topic images when news items appear in the homepage?

[ejoj]

I get an error Running this script. On my local testsite it works ok, but when i uppload it to the productionsite it only shows the alt tag...
Anyone else got this problem and know a solution for it?