mbrady
Jul-04-2005, 04:36 PM
I had a situation with cobranding where I wanted to have a different banner image and color scheme for each category page. The smugmug customization does allow a custom header and style attributes for colors, but they're global across your whole account.
I've worked out a way to sort of cheat and get this to work (with a few limitations). I figured I would share it here in case this would come in handy for others looking for something similar.
First off, to see the end result, go to http://www.ruama.com (http://www.ruama.com/)
In plain English, what I did was create a script that runs each time the page loads that checks the url and if it finds specific words (corresponding to the category names in my case) and changes the img tag to show a different image. It also changes the background color style attribute. This same technique could be used on a per gallery basis too (anything that has a unique url really). Although the script could get lengthy if you have a whole lot of possible different sections.
There are a couple downsides though. For one, since the script doesn't run until the page is finished loading, there can be a short period of time (depends on connection speed and how much there is on the page to load) as the page is loading where the banner image is not shown and the colors are not set. Then when the page finished loading, the banner image and new colors pop into place. That can be a little goofy, but without having separate headers for each page, there's not a whole lot that can be done about it. Personally it doesn't bug me too much.
Another downside, is that when actually viewing the actual galleries and photos themselves, you don't get the custom settings (doing url comparisons for all that would be prohibitive). In my case, I only want the banner image on the main category page anyway, so I prefer that anyway. It would be nice to keep the color scheme though.
And now for a more detailed explanation (you can view source on the pages to see everything in place if you're curious).
I set up a custom header with a simple table. I set the ID property of the TD cell that I want to hold the image to "bannerCell".
I change the Body tag to run a script when the onload even fires:
<body onload="setBanner()" >
In my Javascript section I put in the setBanner function that checks the url:
function setBanner() {
var url = window.location.href;
// Determine which banner image to show
switch (true) {
case url == 'http://ruama.smugmug.com/' || url == 'http://www.ruama.com/':
// Home page banner
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25437157-O.jpg'>";
break;
case url.indexOf('Disney') > -1:
// Disney page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25427988-O.jpg'>";
document.body.style.backgroundColor='#9966FF';
break;
case url.indexOf('Everything') > -1:
// Everything Else page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25427990-O.jpg'>";
document.body.style.backgroundColor='#A6C5A5';
break;
case url.indexOf('Cats') > -1:
// Cats page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25427991-O.gif'>";
document.body.style.backgroundColor = '#c0c0c0';
break;
case url.indexOf('Trips') > -1:
// Trips page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25438543-O.gif'>";
document.body.style.backgroundColor='#9999FF';
break;
default:
// Any other page - no banner graphic
bannerCell.style.display = 'NONE';
}
}
if you've done any basic Javascript programming it should be fairly self-explanatory, but if you want more details, feel free to ask.
I'm sure there are several ways this could be tweaked to fit other similar situations too.
Matt
I've worked out a way to sort of cheat and get this to work (with a few limitations). I figured I would share it here in case this would come in handy for others looking for something similar.
First off, to see the end result, go to http://www.ruama.com (http://www.ruama.com/)
In plain English, what I did was create a script that runs each time the page loads that checks the url and if it finds specific words (corresponding to the category names in my case) and changes the img tag to show a different image. It also changes the background color style attribute. This same technique could be used on a per gallery basis too (anything that has a unique url really). Although the script could get lengthy if you have a whole lot of possible different sections.
There are a couple downsides though. For one, since the script doesn't run until the page is finished loading, there can be a short period of time (depends on connection speed and how much there is on the page to load) as the page is loading where the banner image is not shown and the colors are not set. Then when the page finished loading, the banner image and new colors pop into place. That can be a little goofy, but without having separate headers for each page, there's not a whole lot that can be done about it. Personally it doesn't bug me too much.
Another downside, is that when actually viewing the actual galleries and photos themselves, you don't get the custom settings (doing url comparisons for all that would be prohibitive). In my case, I only want the banner image on the main category page anyway, so I prefer that anyway. It would be nice to keep the color scheme though.
And now for a more detailed explanation (you can view source on the pages to see everything in place if you're curious).
I set up a custom header with a simple table. I set the ID property of the TD cell that I want to hold the image to "bannerCell".
I change the Body tag to run a script when the onload even fires:
<body onload="setBanner()" >
In my Javascript section I put in the setBanner function that checks the url:
function setBanner() {
var url = window.location.href;
// Determine which banner image to show
switch (true) {
case url == 'http://ruama.smugmug.com/' || url == 'http://www.ruama.com/':
// Home page banner
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25437157-O.jpg'>";
break;
case url.indexOf('Disney') > -1:
// Disney page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25427988-O.jpg'>";
document.body.style.backgroundColor='#9966FF';
break;
case url.indexOf('Everything') > -1:
// Everything Else page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25427990-O.jpg'>";
document.body.style.backgroundColor='#A6C5A5';
break;
case url.indexOf('Cats') > -1:
// Cats page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25427991-O.gif'>";
document.body.style.backgroundColor = '#c0c0c0';
break;
case url.indexOf('Trips') > -1:
// Trips page
bannerCell.innerHTML = "<img src='http://www.ruama.com/photos/25438543-O.gif'>";
document.body.style.backgroundColor='#9999FF';
break;
default:
// Any other page - no banner graphic
bannerCell.style.display = 'NONE';
}
}
if you've done any basic Javascript programming it should be fairly self-explanatory, but if you want more details, feel free to ask.
I'm sure there are several ways this could be tweaked to fit other similar situations too.
Matt