Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Change Banner/Image by Date
Mottie (MVP) 9/15/2009 8:21 PM EST : Change Banner/Image by Date
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Change Banner/Image by Date

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
<center><img id="todaysimage" src="" alt=""></center>
<script type="text/javascript">
var images = new Array();

/* Default images (these display if no images are found to display for today) */
images.push (["0","basic1.jpg"]);
images.push (["0","basic2.jpg"]);
images.push (["0","basic3.jpg"]);
images.push (["0","basic4.jpg"]);

/* Jan */
images.push (["1/1-1/5","newyears1.jpg"]);
images.push (["1/1-1/5","newyears2.jpg"]);
images.push (["1/3rdMon","MLK1.jpg"]);
images.push (["1/3rdMon","MLK2.jpg"]);

/* Feb */
images.push (["2/10-2/14","Valentines.jpg"]);
images.push (["2/10-2/14","Valentines2.jpg"]);
images.push (["2/3rdMon","Washington1.jpg"]);
images.push (["2/3rdMon","Washington2.jpg"]);

/* Mar */
images.push (["3/15-3/17","StPats1.jpg"]);
images.push (["3/15-3/17","StPats2.jpg"]);
images.push (["3/15-3/17","StPats3.jpg"]);

/* April */
images.push (["4/1","AprilFools1.jpg"]);
images.push (["4/1","AprilFools2.jpg"]);

/* May */
images.push (["5/5","Cinco1.jpg"]);
images.push (["5/5","Cinco2.jpg"]);
images.push (["5/10","MothersDay1.jpg"]);
images.push (["5/10","MothersDay2.jpg"]);
images.push (["5/lastMon","Memorial1.jpg"]);
images.push (["5/lastMon","Memorial2.jpg"]);

/* Jun */
images.push (["6/3rdSun","FathersDay1.jpg"]);
images.push (["6/3rdSun","FathersDay2.jpg"]);

/* Jul */
images.push (["7/4","independence1.jpg"]);
images.push (["7/4","independence2.jpg"]);
images.push (["7/4","independence3.jpg"]);

/* Aug */
images.push (["7/20-8/20","summerbreak1.jpg"]);
images.push (["7/20-8/20","summerbreak2.jpg"]);
images.push (["7/20-8/20","summerbreak3.jpg"]);
images.push (["7/20-8/20","summerbreak4.jpg"]);

/* Sep */
images.push (["9/1stMon","laborday1.jpg"]);
images.push (["9/1stMon","laborday2.jpg"]);
images.push (["9/1stMon","laborday3.jpg"]);
images.push (["9/1stMon","laborday4.jpg"]);

/* Oct */
images.push (["10/2ndMon","Columbus1.jpg"]);
images.push (["10/2ndMon","Columbus2.jpg"]);
images.push (["10/25-10/31","halloween1.jpg"]);
images.push (["10/25-10/31","halloween2.jpg"]);
images.push (["10/25-10/31","halloween3.jpg"]);
images.push (["10/25-10/31","halloween4.jpg"]);

/* Nov */
images.push (["11/11","veterans1.jpg"]);
images.push (["11/11","veterans2.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving1.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving2.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving3.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving4.jpg"]);

/* Dec */
images.push (["12/15-12/30","Christmas1.jpg"]);
images.push (["12/15-12/30","Christmas2.jpg"]);
images.push (["12/15-12/30","Christmas3.jpg"]);
images.push (["12/31","Newyearseve1.jpg"]);
images.push (["12/31","Newyearseve2.jpg"]);

// ********************************
// Don't change anything below this line
// ********************************
var currentImages = new Array();
var defaultImages = new Array();
var date = new Date();
/* for debugging purposes */
var debug = false;
var thismonth = (debug) ? 11 : date.getMonth() + 1;
var thisday = (debug) ? 20 : date.getDate();
var thisyear = (debug) ? 2009 : date.getFullYear();
/* locks out debug mode from the URL*/
var locked = false;
/* You can also add #debug:1/1/2009 (month/day/year) to the end of the URL */
var whash = window.location.hash;
if (whash.match('#debug')&&!locked) {
 debug = true;
 tmp = whash.match(/^#debug:(0?[\d]|1[0,1,2])\/([0-9]|[0,1,2][0-9]|3[0,1])\/((19|20)[0-9][0-9])$/);
 if (tmp){
  thismonth = tmp[1];
  thisday = tmp[2];
  thisyear = tmp[3];
 }
}
if (debug) {
 $('body').prepend('<div id="bdebug"></div>');
 $('#bdebug').append("Date used: " + thismonth + "/" + thisday + "/" + thisyear + "<br>");
};
var endsNextYear = false;
var weekdays = (["sun","mon","tue","wed","thu","fri","sat"]);
for (j=0; j<images.length; j++) {
 var datestr = images[j][0].replace(/\s/,'');
 /* example datestr = "1/1-1/10" or "9/1stMon-9/1stWed" */
 var dates = datestr.split('-');
 var tMonthStartStr = parseInt(dates[0].split('/')[0],10);
 var tMonthEndStr = (typeof(dates[1])=="undefined") ? tMonthStartStr : parseInt(dates[1].split('/')[0],10);
 /* if the date range is from 11/10 to 2/5, figure out if we are in range, then just set the month to now */
 if ( (tMonthStartStr > tMonthEndStr) && (thismonth >= tMonthStartStr || thismonth <= tMonthEndStr) ) {
  tMonthStartStr = (tMonthStartStr == thismonth) ? thismonth : thismonth - 1;
  tMonthEndStr = (tMonthEndStr == thismonth) ? thismonth : thismonth + 1;
  endsNextYear = true;
 } else {
  endsNextYear = false;
 }
 if ( tMonthStartStr <= thismonth && tMonthEndStr >= thismonth ) {
  var beg = extractDay( (dates[0]).split('/')[1] );
  /* if end date is undefined, set it to beginning date */
  var tmp = (endsNextYear) ? thisyear + 1 : thisyear;
  var end = (typeof(dates[1])=="undefined") ? beg : extractDay( (dates[1]).split('/')[1] );
  /* set day for 1st of this month, if start date was prior to this month */
  if ( tMonthStartStr < thismonth ) { beg = 1 };
  /* set day for end of this month, if end date is after this month (using 31 - it needs to be > the last day of the month for calculation) */
  if ( tMonthEndStr > thismonth ) { end = 31 };
  if (debug) {
   $('#bdebug').append("(" + images[j][0] + "), derived range: " + thismonth + "/" + beg + "-" + thismonth + "/"  + end + " ");
  }
  if ( thisday >= beg && thisday <= end ) {
   if (debug) {
    $('#bdebug').append("<span style='color:#080'>is in range</span>; image = " + images[j][1] + "<br>");
   }
   currentImages.push( images[j] );
  } else {
   if (debug) {
    $('#bdebug').append("is <span style='color:#f00'>NOT in range</span>; image = " + images[j][1] + "<br>");
   }
  }
 }
 /* Save default images if no special matches are found */
 if ( parseInt(images[j][0].split('/')[0],10) == 0 ) {
  defaultImages.push( images[j] );
 }
}
if (currentImages.length==0) {
 currentImages = defaultImages;
 if (debug) {
  $('#bdebug').append("<br><span style='color:#080'>No matches found for date range, using default Images!</span>");
 }
}
var inc = Math.floor( Math.random() * currentImages.length );
if (debug) {
 $('#bdebug').append("<br># of currentImages = " + currentImages.length + "<br>current random image = " + currentImages[inc][1]);
 $('#bdebug').append('<br><input type="button" value="Show All Images" onclick="checkAll()">');
}
var imgloc = ( $('#todaysimage').length ) ? '#todaysimage': '.BannerArea img';
$(imgloc).attr('src',currentImages[inc][1]);

function extractDay(tDayStr){
 /* input: target day ("1stMon" or "10"), output: day of month */
 if (!tDayStr.match('st|nd|rd|th|last')) {
  return parseInt(tDayStr,10);
 }
 var checkMonth = false;
 if (tDayStr.match('last')) {
  /* set "last" to "4th" weekday of the month, then try to add a week later */
  tDayStr = '4th' + tDayStr.substring(4,tDayStr.length);
  checkMonth = true;
 }
 /* extract out weekday text (e.g. Mon) */
 var tWeekdayStr = tDayStr.substring(3,6).toLowerCase();
 /* extract out N from date (e.g. 1 from 1st, or 2 from 2nd) */
 var tNthDay = parseInt(tDayStr.substring(0,1),10);
 var tWeekday = 0;
 for (k=0;k<weekdays.length;k++) {
  if (weekdays[k]==tWeekdayStr) { tWeekday = k; }
 }
 /* get day of the week at the beginning of the month (e.g. 9/1/2009 = Tue) */
 var oWeekday = (new Date (thisyear,thismonth-1,1)).getDay();
 /* calculate the offset (don't mess with this part, it took forever!) */
 var tOffset = (tWeekday < oWeekday) ? tWeekday + (7 - oWeekday) : tWeekday + (7 - oWeekday) - 7;
 var tDate = (tNthDay - 1) * 7 + tOffset + 1;
 /* if "last" was used, try to add another week (setup for 30 day months
  since May is the only month with a floating U.S. holiday that uses last, I think) */
 if (checkMonth && (tDate + 7) <= 30) { tDate = tDate + 7; }
 return tDate;
}
function checkAll(){
 $('body').append('<br><br><div id="thumbnails"></div>');
 var tn = $('#thumbnails');
 for (j=0;j<images.length;j++){
  tn.append('<img src="'+images[j][1]+'" height="100" width="100">');
 }
}
</script>
Customizing

Image Location
  • As the code is right now, the image will display next to this script. So you can put this script into any free form text/HTML content box and the image will display there.
  • If you want to make the script change the Banner image, remove the top line <center><img id="todaysimage" src=""></center> (in blue) and the image in the banner will be replaced.
  • If you have a subscribed site and you have more than one image in the banner, move the blue line into your banner.
Script Location
  • If the script will only change an image contained in a free form text/HTML, then you can include all of the code above in that content box (make sure you paste it while the editor is in HTML mode) - there is no size limit on it's contents.
  • If you plan on using the script for the Banner image, then it might be best to put this code into an external file because the banner HTML and footer HTML contents are limited:
  • Copy all the code between the top <script> tag and the bottom </script> tag, then paste it into a (non-rich) text editor.
  • Modify the dates and image URLs as desired
  • Save the file with a ".js" extension (e.g. banner.js)
  • Upload it to your file area
  • Now just add the following into your Banner HTML or Footer HTML:

    <script type="text/javascript" src="banner.js"></script>

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.
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 following lines in the script below the "Don't change anything below this line"

    var debug = false; /* for debugging purposes */
    var thismonth = (debug) ? 11 : date.getMonth() + 1;
    var thisday = (debug) ? 20 : date.getDate();
    var thisyear = (debug) ? 2009 : date.getFullYear();

    • Set the debug variable to "true" and then adjust the date (in purple) to manually adjust the date.
    • Run the script and you can see what the script gets for results from your variables.
    • The display will show images found for the current month (thismonth variable) and show the date it derived as well as if it's within the date range.

  • 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://myurl.com/randomImage.htm#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*/
    var locked = true;

  • 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 canclick on a button to make sure all of your images are showing, andaccess debug mode from the address bar.
TopBottom

Guppy Queen (New Admin) 9/15/2009 9:26 PM EST : RE: Change Banner/Image by Date
Guppy Queen
Posts: 41034
Zomgawsh Poster

wow this is really neat! Now I will need to update the banners

Is it possible for me to put this into a .js file and add this script to the banner area?

<script type="text/javascript" src="http://www.axiomfiles.com/Files/70851/addbanners.js"></script>

Thanks Mottie
TopBottom

Mottie (MVP) 9/15/2009 10:11 PM EST : RE: Change Banner/Image by Date
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Guppy!

Yes, you can move this script into an external file. You should end up with something like this in your Banner HTML or you could even put this in your Footer HTML:
<script type="text/javascript" src="BANNER.JS"></script>
Then put all the code between the <script> and </script> into the .js file.

Edit: Nevermind! I removed the need to have the debug <div>.. it'll add it automatically if you are in debug mode.
TopBottom

Guppy Queen (New Admin) 9/15/2009 10:18 PM EST : RE: Change Banner/Image by Date
Guppy Queen
Posts: 41034
Zomgawsh Poster

Got it. Thanks so much
TopBottom

Mottie (MVP) 9/15/2009 10:35 PM EST : RE: Change Banner/Image by Date
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I just made a minor change to the script & added Script Location section in the original post... hopefully that will make things more clear 
TopBottom

Mottie (MVP) 9/24/2009 11:07 AM EST : RE: Change Banner/Image by Date
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated again to allow you to access the debug mode from the address bar... just add #debug:12/31/2009 to the end of the web address (month/day/year)

Additionally, I added a button to show all the image on the screen at once in thumbnail size to make sure the URLs are all correct.
TopBottom

Guppy Queen (New Admin) 9/24/2009 12:15 PM EST : RE: Change Banner/Image by Date
Guppy Queen
Posts: 41034
Zomgawsh Poster

Thanks Mottie I have not implemented this yet /LOL. Been so busy with work and all. But I will eventually use this nifty script.
TopBottom

Corganno (New Admin) 5/29/2011 9:22 AM EST : RE: Change Banner/Image by Date
Corganno
Posts: 584
Zomgawsh Poster

Sorry to necro such an old post, but I was using this code to display a random image in a freeform widget. 

It was working great up until a day or two ago. In Chrome, the image is supplanted by the content of the widget below it. In IE, it just shows a broken image icon. 

I tried using the Debug option as well, but I just get an error 404. I've been fighting with it since then, but am not making any headway. I suppose I could just use a different script, but this one did exactly what I needed it to, so I was hoping to be able to just fix it. 

Any help would be much appreciated 
TopBottom

Mottie (MVP) 5/29/2011 3:54 PM EST : RE: Change Banner/Image by Date
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Corganno!

I just checked your site in IE7-9, Chrome and Firefox and it all seems to be working fine. I'm not sure what to tell you.
TopBottom

Corganno (New Admin) 5/29/2011 5:48 PM EST : RE: Change Banner/Image by Date
Corganno
Posts: 584
Zomgawsh Poster

Mottie said:
Hi Corganno!

I just checked your site in IE7-9, Chrome and Firefox and it all seems to be working fine. I'm not sure what to tell you.


I have no idea what happened. I saw it working for a moment. So I went into the code, changed the debug var back to false, save, reloaded, and now it's not working again 
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%