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: kaylashay81 or
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. :-)
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: kaylashay81 or
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. :-)