Kayla Shay - Fanart, Fanfiction & More

Tutorial: Random Image Selection in Banners

Tutorial: Random Image Selection in Banners

Previous Entry Add to Memories Tell Someone Next Entry
kaylashay81: (Spaceballs - Over My Helmet)
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: [livejournal.com profile] kaylashay81 or [personal profile] kaylashay81



Bonus

[livejournal.com profile] 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

  • jo_anne_storm: (Default)
    You are now my hero.
  • ext_59248: that's me - code needed! (apple blossom)
    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. :)
    • kaylashay81: (NCIS - Abby Rock On)
      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.
  • ext_251: (Oo Shiny Leia SW)
    Thanks for this! Will be bookmarking it!
  • Thanks so much for this. =DDD
  • ext_59248: that's me - code needed! (cool smile)
    Yep - I'm on a PC with firefox.
    I always forget to check IE.
    Doh!
  • 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. :-)
    • kaylashay81: (NCIS - Tony)
      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.
      • 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*

        • kaylashay81: (NCIS - Tony Wink)
          My CS4 kinda froze up on MW's eyes the other day... be careful when opening pics of him.

          ;-)
  • ext_12517: (Default)
    Hmm- would it work for profile pictures or something similar? Something that uses html, not css?
    • kaylashay81: (NCIS - Tony)
      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....
    • kaylashay81: (NCIS - Tony)
      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. :-)
  • Awesome. And great banners, too! :)
  • Where is this php code executing? On LJ's image server?
    • kaylashay81: (NCIS - Tony)
      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: (Home)
    This is so much awesome! Thank you.
  • therealkaichan: (Choose Your Own Adventure)
    Found this trough google search, you ROCK, thanks!
  • 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.
  • boat seat mounting 138

    (Anonymous)
    584276
  • hello all...I 'm new here

    (Anonymous)
    hello folks, I'm a noob in here, thus I expect learn a lot in this forum ;) it looks like a great forum.

    On behalf of those who might need it, in my signature there is some interesting information about
    [url=http://www.n-tv.de/technik/Polizei-schliesst-Kino-to-article3538481.html]copyright watch[/url].
  • HEY!!!

    (Anonymous)
    The forum skin layout & design is very good!Hope to share, contribute and learn.

    Regarding those who would need it, in my signature there is some interesting information about
    [url=http://www.focus.de/digital/internet/filmportal-kino-to-schwarzseher-in-der-rechtlichen-grauzone_aid_635375.html]copyright watch[/url].