?

Log in

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).


STEP 1

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.


STEP 2

Rename the file: rotate.php


STEP 3

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:
KaylaShay_BtVS.jpg
KaylaShay_NCIS.jpg
KaylaShay_Sentinel.jpg
KaylaShay_Supernatural.jpg
KaylaShay_Terminator.jpg
rotate.php

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


STEP 4

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:
http://www.kaylashay.com/random/KaylaShay_NCIS.jpg

In order to use the random selection, you would put the file path to your rotate.php file:
http://www.kaylashay.com/random/rotate.php

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.


STEP 5

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



Bonus

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! :-)


Credits:

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

Comments

( 29 Campfires — Leave a Comment )
jo_anne_storm
Jul. 19th, 2009 07:54 pm (UTC)
You are now my hero.
kaylashay
Jul. 19th, 2009 07:56 pm (UTC)
Yay! :-)
mithrial
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. :)
kaylashay
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.
htbthomas
Jul. 19th, 2009 09:48 pm (UTC)
Thanks for this! Will be bookmarking it!
kaylashay
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:

http://kaylashay81.livejournal.com/tag/superman+celebration
htbthomas
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. :)
kaylashay
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. :-)
all_tattooed
Jul. 19th, 2009 11:10 pm (UTC)
Thanks so much for this. =DDD
kaylashay
Jul. 19th, 2009 11:19 pm (UTC)
You're welcome! :-)
mithrial
Jul. 19th, 2009 11:48 pm (UTC)
Yep - I'm on a PC with firefox.
I always forget to check IE.
Doh!
spoonyriffic
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. :-)
kaylashay
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.
spoonyriffic
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*

kaylashay
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.

;-)
manaie
Jul. 20th, 2009 02:35 am (UTC)
Hmm- would it work for profile pictures or something similar? Something that uses html, not css?
kaylashay
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....
manaie
Jul. 20th, 2009 02:50 am (UTC)
Ah, ok. Awesome. Thankyou~!
kaylashay
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. :-)
klgrem
Jul. 20th, 2009 02:41 am (UTC)
Awesome. And great banners, too! :)
kaylashay
Jul. 20th, 2009 02:50 am (UTC)
Thanks and Thanks! :-)
ron_newman
Jul. 20th, 2009 04:42 am (UTC)
Where is this php code executing? On LJ's image server?
kaylashay
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.
a_blackpanther
Oct. 15th, 2009 08:14 am (UTC)
This is so much awesome! Thank you.
therealkaichan
Apr. 20th, 2010 05:28 am (UTC)
Found this trough google search, you ROCK, thanks!
chavelaprincess
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.
(Anonymous)
Apr. 2nd, 2011 06:39 am (UTC)
boat seat mounting 138
584276
theeverdream
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 :)
kaylashay
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
S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Tags

Powered by LiveJournal.com
Designed by Tiffany Chow