Change Banner/Image by Date

GuildPortal admin site link to the original post

This script will change the displayed image based on the current date. More specifically, it chooses the image randomly from a group of images marked with the same date.

Here are the steps the script follows:

• Let's say you have 4 images that have a Christmas holiday theme.
• You add the image URLs to the script and set the date to only display these images between 12/20 and 12/30.
• The script will figure out what today is and find and group all images that are set to display on this date.
• If today just happened to be 12/22, it will find those 4 images you added.
• If today is 12/19, it won't find any images set to display and will revert to the default images that you set in the script (these will have a date set to zero).
• It will then choose an image to display randomly from that group.

My idea came from Guppy's HGS site, since she has random banner images that are themed dependent on the season - hopefully this will make the job easier 

*Note* This script will work on both free and subscribed sites.

The Code

<div id="todaysImage"></div>
<script src="/GuildFiles/258012/jquery.todaysImage.min.js"></script>
<script type="text/javascript">
$(function(){
var images = [],
b = '/GuildFiles/258012/'; // base image url
/* Default images (these display if no images are found to display for today) */
images.push([ "0", b + "main1.jpg", "Hello" ]);
images.push([ "0", b + "main2.jpg", "Hello" ]);
images.push([ "0", b + "main3.jpg", "Hello" ]);
images.push([ "0", b + "main4.jpg", "Hello" ]);
images.push([ "0", b + "main5.jpg", "Hello" ]);
images.push([ "0", b + "main6.jpg", "Hello" ]);

/* Jan */
images.push([ "12/31-1/5", b + "new-year.jpg", "Happy New Year!" ]);
images.push([ "12/31-1/5", b + "NewYear2.jpg", "Happy New Year!" ]);
images.push([ "12/31-1/5", b + "NewYear3.jpg", "Happy New Year!" ]);
images.push([ "1/21", b + "hug.jpg", "Happy Hug Day!" ]);
images.push([ "1/21", b + "squirrel.gif", "Huggies!" ]);
images.push([ "1/24", b + "Laugh.jpg", "Happy belly laugh day!" ]);

/* Feb */
images.push([ "2/10-2/14", b + "VD1.jpg", "Happy Valentines!" ]);
images.push([ "2/10-2/14", b + "VD2.jpg", "We <3 you" ]);
images.push([ "2/10-2/14", b + "VD3.jpg", "Luv ya" ]);
images.push([ "2/10-2/14", b + "VD4.jpg", "I think you're sweet" ]);
images.push([ "2/10-2/14", b + "VD5.jpg", "XOXOXO" ]);
images.push([ "2/10-2/14", b + "VD6.jpg", "Happy Valentines!" ]);
images.push([ "2/3rdMon", b + "wash1.jpg", "Washington's Birthday!" ]);
images.push([ "2/3rdMon", b + "wash2.jpg", "Washington's Birthday!" ]);

/* Mar */
images.push([ "3/15-3/17", b + "StPatty.jpg", "St Patty's" ]);
images.push([ "3/15-3/17", b + "patty.jpg", "Happy St. Patrick's Day!" ]);

/* April */
images.push([ "4/1", b + "april-fool-dog.jpg", "HA HA!" ]);
images.push([ "4/1", b + "aprilfools.jpg", "April Fools" ]);
images.push([ "4/1", b + "april_fools1.jpg", "o.O" ]);

/* May */
images.push([ "5/5", b + "cinco1.jpg", "Happy Cinco de Mayo!" ]);
images.push([ "5/5", b + "Cinco4.jpg", "Happy Cinco de Mayo!" ]);
images.push([ "5/5", b + "mayo.jpg", "Happy Cinco de Mayo!" ]);
images.push([ "5/5", b + "mayo2.jpg", "Happy Cinco de Mayo!" ]);
images.push([ "5/5", b + "mayo3.jpg", "Happy Cinco de Mayo!" ]);
images.push([ "5/10", b + "mom1.jpg", "Happy Mother's Day!" ]);
images.push([ "5/10", b + "mom2.jpg", "Happy Mother's Day!" ]);
images.push([ "5/10", b + "mom3.jpg", "Happy Mother's Day!" ]);
images.push([ "5/10", b + "mom4.jpg", "Happy Mother's Day!" ]);
images.push([ "5/18", b + "zombie_cat.jpg", "Hug a Zombie day" ]);
images.push([ "5/lastMon", b + "memorial.jpg", "Remember..." ]);

/* Jun */
images.push([ "6/3rdSun", b + "fathers1.jpg", "Happy Father's Day!" ]);
images.push([ "6/3rdSun", b + "fathers2.jpg", "Happy Father's Day!" ]);
images.push([ "6/3rdSun", b + "fathers3.jpg", "Happy Father's Day!" ]);

/* Jul */
images.push([ "7/4", b + "july4.jpg", "Happy July 4th! (or whatever)" ]);
images.push([ "7/4", b + "july4-2.jpg", "Happy Independence Day" ]);
images.push([ "7/4", b + "july4-3.jpg", "Happy <span style="color: red;">Independence</span> Day" ]);
images.push([ "7/4", b + "patrioticDog.jpg", "Happy July 4th!" ]);

/* Aug */
images.push([ "7/20-8/20", b + "summer1.jpg", "Time for a swim!" ]);
images.push([ "7/20-8/20", b + "summer2.jpg", "Bring the drinks!" ]);
images.push([ "7/20-8/20", b + "summer3.jpg", "Ahhh Summer" ]);
images.push([ "7/20-8/20", b + "summer4.jpg", "Surfs up!" ]);
images.push([ "7/20-8/20", b + "summer5.jpg", "Refreshing" ]);
images.push([ "7/20-8/20", b + "summer6.jpg", "Working on my tan" ]);
images.push([ "7/20-8/20", b + "summer7.jpg", "I caught one this big!" ]);

/* Sep */
images.push([ "9/1stMon", b + "labor.jpg", "Happy Labor Day" ]);
images.push([ "9/1stMon", b + "labor2.jpg", "Happy Labor Day" ]);
images.push([ "9/1stMon", b + "labor3.jpg", "Happy Labor Day" ]);
images.push([ "9/19", b + "pirate1.jpg", "Talk like a Pirate!" ]);
images.push([ "9/19", b + "Pirate2.jpg", "Arrrrrr, Walk the Plank!" ]);

/* Oct */
images.push([ "10/25-10/31", b + "Halloween1.jpg", "Ugh Halloween" ]);
images.push([ "10/25-10/31", b + "Halloween2.jpg", "I need better candy!" ]);
images.push([ "10/25-10/31", b + "tequilacat.jpg", "I'm a shot of tequila" ]);
images.push([ "10/25-10/31", b + "Oct2.jpg", "ribbit!" ]);
images.push([ "10/25-10/31", b + "Oct3.jpg", "Are you the joker?" ]);
images.push([ "10/25-10/31", b + "Oct4.jpg", "Time for Pumpkin pie!" ]);
images.push([ "10/25-10/31", b + "Oct5.jpg", "Black cat" ]);

/* Nov */
images.push([ "11/11", b + "patrioticDog.jpg", "Veteran's Day" ]);
images.push([ "11/3rdThur-11/4thThur", b + "thanksgiving1.jpg", "Happy Thanksgiving" ]);
images.push([ "11/3rdThur-11/4thThur", b + "thanksgiving2.jpg", "Happy Turkey Day" ]);
images.push([ "11/3rdThur-11/4thThur", b + "thanksgiving3.jpg", "Happy Thanksgiving" ]);
images.push([ "11/3rdThur-11/4thThur", b + "thanksgiving4.jpg", "Happy Thanksgiving" ]);

/* Dec */
images.push([ "12/5", b + "ninja.jpg", "Watch out for Ninjas!" ]);
images.push([ "12/2-12/25", b + "Hanukkah1.jpg", "Happy Hanukkah!" ]);
images.push([ "12/2-12/25", b + "Hanukkah2.jpg", "Happy Hanukkah!" ]);
images.push([ "12/2-12/25", b + "Hanukkah3.jpg", "Happy Hanukkah!" ]);
images.push([ "12/15-12/30", b + "christmas.jpg", "Merry Christmas!" ]);
images.push([ "12/15-12/30", b + "christmas2.jpg", "Merry Christmas!" ]);
images.push([ "12/15-12/30", b + "christmas3.jpg", "Merry Christmas!" ]);
images.push([ "12/15-12/30", b + "christmas4.jpg", "Merry Christmas!" ]);
images.push([ "12/15-12/30", b + "christmas5.jpg", "Merry Christmas!" ]);

$('#todaysImage').todaysImage({
 data : images, // don't change this!
 dataObject : [ 0, 1, 2 ], // don't change this!

 // content added to the target element
 // {url} and {comment} are info added from the current image
 content    : '<img src="{url}" title="{comment}" alt="{url}"><p class="comment">{comment}</p>',

 /* language options */
 dayEndings : 'st|nd|rd|th', // 1st, 2nd, 3rd, 4th, etc. (e.g. 1stMon & 3rdThu)
 dayLast    : 'last', // last weekday/weekend of the month
 dayWeek    : [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ], // days of the week (case insensitive)
 monthFirst : true, // true: U.S. date format mm/dd/yy, if false: dd/mm/yy format applied

 /* debugging options */
 locked : true, // prevent debug mode onscreen output if true (debug setting from browser URL only).
 debug  : false // set debug mode.
});
});
</script>

Customizing

Adding Images

• To add an image, add it to the array following this template:
  

  images.push (["DATES","IMAGE URL"]);

• The DATES must follow this format:
  
  

  Dates	Description
  0	Set image as a default (will only display if no date specific images are found).
  1/1	Dispaly image only on Jan 1st.
  1/1 - 1/5	Dispaly image from Jan 1st to Jan 5th (spaces are okay).
  7/20 - 8/20	Display image from June 20th to August 20th.
  1/3rdMon	Display image only on the 3rd Monday of Janurary.
  5/lastMon	Display image only on the last Monday of May.
  11/3rdThur-11/4thThur	Display image from the 3rd Thursday of Nov to the 4th Thursday of Nov.
  12/20-1/1stSun	Display image from Dec 20th to the 1st Sunday of Janurary.

  
  IMPORTANT NOTES:
  
  
  • The dates that cross months (7/20-8/20) will display along with date specific images (added to the randomization).
  • Use slashes "/" to separate the month and day and dashes "-" to set a range (e.g., using 1-1 to 1-5 will break the script)
  • Using the last weekday (lastMon) of the month in the date has one restriction at this time... it'll only works for 30 day months for now. Again, I'll fix this in future versions.
  • When using the text in the date (e.g. 1st, 2nd, 3rd, last) don't spell these fully out ( first, second, third) as the script is looking for the number.
  • The weekday in the date must have at least 3 letters - these are okay: (Mon or Monday); these are not okay (M or Mo).


• The Image URL (in orange) should be a complete URL to the image.

Modifying the comments

• In the mod options, you'll see this line:
  
  content    : '<img src="{url}" title="{comment}" alt="{url}"><p class="comment">{comment}</p>',
  
  basically, the {url} and {comment} are replaced with the url to the image and image comments for the current image. This option allows you to move the comment above the image like this:
  
  content    : '<p class="comment">{comment}</p><img src="{url}" title="{comment}" alt="{url}">',
  
  or completely remove it.

Troubleshooting

• This is the first time I've included a way to trouble shoot a problem along with the script.
• If you are noticing that one image isn't showing up or something just doesn't work right, you can try to trouble shoot the problem.
• Look for the "locked" option and set it to false
  
  locked : false
  
  Set the locked option to false and then adjust the date (in purple) to manually adjust the date.
  
  
• Additionally, with the latest changes, you can now access the debug mode from the address bar simply by adding the following (in purple) to the end:
  
  http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224#debug:12/31/2009
  
  
  • #debug - actives the debug mode
  • 12/31/2009 - sets the date you want to check (month/day/year)
  To prevent debug from working once you are done with your script, simply set the locked variable in the script to true:
  
  /* locks out debug mode from the URL*/
  locked : true


• Debug example output:
  
  Date used: 11/20/2009
  (11/11), derived range: 11-11 is NOT in range; image = veterans1.jpg
  (11/11), derived range: 11-11 is NOT in range; image = veterans2.jpg
  (11/11), derived range: 11-11 is NOT in range; image = veterans3.jpg
  (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving1.jpg
  (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving2.jpg
  (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving3.jpg
  (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving4.jpg
  
  # of currentImages = 4
  current random image = thanksgiving4.jpg

Edit (9/24/2009): Made some changes to the debug mode.. now you can click on a button to make sure all of your images are showing, and access debug mode from the address bar.
Edit (11/7/2011): Updated to match the new Today's Image mod instructions.

Submitted to be a mod

I might make another version to replace the banner if anyone wants that option.