Log in

No account? Create an account

Previous Entry | Next Entry

Tutorial: Random Image Selection in Banners

Since a few people wanted to know, I thought I would share how to go about making your banner swap out at random with a select group of images. This works on Livejournal and, in theory, should does work on Dreamwidth (I haven't fixed my journal there yet).


Download rotate.txt here: http://www.alistapart.com/d/randomizer/rotate.txt

PC users, right click the link and save file. Mac users, either right click or ctrl+click the link depending on your mouse. :-)

STEP 1.5

If you plan to use only GIF, JPG and PNG files and you plan to put your code file (the TXT file) and all the banner images in the same folder on the internet, then you do not need to make any changes to the TXT file. It will work as is. If you plan on doing something other that what I just said, read the instructions on the file and it tells you what to do.


Rename the file: rotate.php


Upload the rotate.php file and how ever many banners you want to your webspace. It is recommended that you put the files their own folder. The code will look for any image that is within the same folder as the rotate.php file and if you have extra images floating around, it will add them to the rotation.

Note: Do not upload files such as Thumbs.db if you are on Windows, or .DS_Store if using a Mac. If these files are within the same directory as the rotator file, it will attempt to put them into rotation as background images. This will cause some funky behavior, so it is best to just leave them out.

It does not matter what you name the files. My folder looks something like this:

Folder Name: random

Folder Contents:

Note: If you do not have webspace on which to host your files, you can do a google search to find some. I have my own webspace through GoDaddy, so I'm not up on the free places out there.

Once you have the files uploaded, you can check that rotate.php is working properly by viewing it in your web browser. Just keep reloading the page and you should get a new image from your selection of images each time the page loads.
(ie) http://www.kaylashay.com/random/rotate.php


This is the tricky part, because everyone has a different LJ style/theme. Wherever you define the background image for the header for your LJ, you would generally put the file path of the image you want. For example, if I just wanted the NCIS banner as my background I would put the following where I define my header:

In order to use the random selection, you would put the file path to your rotate.php file:

Once that is in place, it works like magic. The majority of the time, a new image will load each time you load a page on your LJ. The more images in the folder, the more diversity.

If you are unsure how to modify/change your banner image file path for your particular style/layout, drop me a comment and I should be able to direct you in the right direction.


Go crazy in whatever image editing/creating software you have and make banners like they are going out of style. Photoshop CS4 was getting a workout from me. ;-)

To see this code in action, visit my LJ or DW and reload the pages a few times: kaylashay or [info - personal] kaylashay81


adela_nightmoon asked and I tried it out and the following seems to work:

You can put the PHP file path in the SRC part of an image tag and it will rotate out your images within the IMG tag! :-)


I found this on my first Google search for something that would work. The original outline I looked at can be found here. A List Apart provided the original coded TXT file.

If you have questions, don't hesitate to ask. I should be able to help you out. But I make no guarantees...

Drop a comment and let me know if you get it working on your own LJ/DW/Website. I'd like to see how others abuse the code. :-)

joomla visitors


( 29 Campfires — Leave a Comment )
Jul. 19th, 2009 07:54 pm (UTC)
You are now my hero.
Jul. 19th, 2009 07:56 pm (UTC)
Yay! :-)
Jul. 19th, 2009 09:22 pm (UTC)
Will probably use this eventually. Neat bit of code. Thanks for posting links and details.

Tia xxx.

PS. Your headings work well and look great. :)
Jul. 19th, 2009 09:25 pm (UTC)
Thanks! I was extremely happy when I got it set up yesterday. :-)

I just realized I didn't check this on Windows with IE (any version), so hopefully it is working there. I'm on a Mac with Safari.
Jul. 19th, 2009 09:48 pm (UTC)
Thanks for this! Will be bookmarking it!
Jul. 19th, 2009 10:01 pm (UTC)
You're welcome! :-)

I saw on your journal Superman related things. You might be interested in one of my tags:

Jul. 19th, 2009 11:02 pm (UTC)
Neat! One of these days I'm going to have to attend - I don't live that far away. :)
Jul. 19th, 2009 11:06 pm (UTC)
I'm only a 15 minute drive away and grew up a 20 minute drive away... Provided they get good stars, it can be fun. :-)
Jul. 19th, 2009 11:10 pm (UTC)
Thanks so much for this. =DDD
Jul. 19th, 2009 11:19 pm (UTC)
You're welcome! :-)
Jul. 19th, 2009 11:48 pm (UTC)
Yep - I'm on a PC with firefox.
I always forget to check IE.
Jul. 20th, 2009 01:23 am (UTC)
Ooooooh! YES - I had been planning on making a new banner for my journal, but I had too many ideas, and if I put them all in one banner, it would look cluttered. Now I can make three or four, and they'll rotate! YAY, thank you! :D

By the way: I use IE8, and it works fine. :-)
Jul. 20th, 2009 01:26 am (UTC)
Woo and Hoo!

I know on the banner ideas!! When I did the NCIS one, I loved it but it meant I lost my Xander and Dean....

Now I'm all excited because I can represent all my fandoms and even some (like Sentinel) that never would have made my banner otherwise. I realized earlier I forgot Highlander (GASP!) and then I want to make some crossover banners next.

And yay for working in IE8. I can check various versions of IE, but I have to wait for work to do that. I have a Mac at work too, but that one also runs Windows XP.
Jul. 20th, 2009 01:35 am (UTC)
Can't wait to see your crossover banners!

I've got like, four or five fandoms in mind that I definitely want to represent. *opens up CS4*

My Photoshop is about to get its ass kicked... *shifty*

Jul. 20th, 2009 01:37 am (UTC)
My CS4 kinda froze up on MW's eyes the other day... be careful when opening pics of him.

Jul. 20th, 2009 02:35 am (UTC)
Hmm- would it work for profile pictures or something similar? Something that uses html, not css?
Jul. 20th, 2009 02:47 am (UTC)
I just did a really quick and dirty test by putting it inside the src part of a img tag and it seems to work...

Above is a test....
Jul. 20th, 2009 02:50 am (UTC)
Ah, ok. Awesome. Thankyou~!
Jul. 20th, 2009 02:48 am (UTC)
Looks like it is work within image tags too... :-)

So anything you use < img src="" > for, just put the PHP page in the src. At least the test worked. :-)
Jul. 20th, 2009 02:41 am (UTC)
Awesome. And great banners, too! :)
Jul. 20th, 2009 02:50 am (UTC)
Thanks and Thanks! :-)
Jul. 20th, 2009 04:42 am (UTC)
Where is this php code executing? On LJ's image server?
Jul. 20th, 2009 04:46 am (UTC)
I'm fairly certain it is executing on the space it is hosted on. For instance, mine is executing on my web space with GoDaddy.

I'm not 100% certain on that, but I think this is the equivalent of loading an outside page in a frame or iframe. The page is running from the space it hosted on and is just visible where you tell it to show up.

This would mean that if your web space does not support PHP, then it won't show up...

Again... that's my thought, but I'm not completely sure.
Oct. 15th, 2009 08:14 am (UTC)
This is so much awesome! Thank you.
Apr. 20th, 2010 05:28 am (UTC)
Found this trough google search, you ROCK, thanks!
May. 3rd, 2010 07:11 pm (UTC)
I got a GODADDY account. I get everything on here but how to create the folder on the GoDaddy account.

Is there a way you can do a simple step by step, like PM a simple tutorial on how to do that.

Because out of ALL the things on LJ that I have read, yours is the best, I just don't understand the fold on GoDaddy.
Apr. 2nd, 2011 06:39 am (UTC)
boat seat mounting 138
Oct. 12th, 2012 11:31 pm (UTC)
Thanks bunches - this is the easiest to follow tutorial on the subject that I've come across. I plan to use it for comment_fic :)
Oct. 15th, 2012 03:42 am (UTC)
Glad you found it useful! I need to make some new banners for my rotation one of these days...
( 29 Campfires — Leave a Comment )

Latest Month

May 2015


Powered by LiveJournal.com
Designed by Tiffany Chow