wolfier
Aug-05-2009, 07:39 PM
After reading tutorials on how to create galleries using redirect tables, I've slightly modified the method to suit my needs. I got this idea from a couple of earlier tutorials, including the redirect table tutorials (http://www.dgrin.com/showthread.php?t=47386), the tutorial to add referral code to the Smugmug footer link, and the one that shows how to replace "Galleries" with "Home" in breadcrumbs.
Like many here, I've decided the categories and subcategories to be too limited. I rearranged all my galleries so they only belong to custom categories named simply after the year (2003, 2008, 2009, etc.) because this is the only logical way a gallery will not have a chance to cross categories.
On my site, I use Gallery keywords for the general description of the gallery (family, wedding, etc...), and individual photos would have their own keywords for other purposes, e.g. travel, slideshow, abstract...
Now, I want galleries with the same gallery keywords to show up on one summary page. If the gallery keywords can be used in much the same way as photo keywords, the better. Currently, only the search box would provide a similar functionality.
In another virtual gallery tutorial, we were required to create a "phantom" gallery in each new category from which the target gallery wants redirection from. While it is a good method, I don't like having to create many phantom galleries with 1 picture each just for the redirection to work. Also, the method of redirection using location.replace introduces a very slight delay and not work with the back button for some browser versions. Here is a slight variation:
Create an unlisted, summary gallery, let's call it "Galleries". It is the starting point of all the galleries - view it as our "category" - just that now we can put the same gallery under many categories. Make its view style "traditional", no printing, and other settings that makes sense for a gallery list.
For each virtual category, select a picture that can represent this virtual category and copy it to "Galleries". Now we'll have one picture for each category in this "Galleries".
Create the "redirect table", in pretty much the same way as described in earlier tutorials. Insert this into the top of your Bottom Javascript section:
var galleryRedirectTable = new Object();
Immediately after the above line, for each virtual category picture copied to "Galleries", notice its picture id and key and insert an entry in the galleryRedirectTable. In this example, 1 line is given for the "family" virtual category, this virtual category is for galleries and pictures with keyword "family", its the picture id is 123456789 and key is abcde (use all-lowercase key here, so if the key is AbCdE, use abcde), account "yourname" - replace the terms in italics with your own.
For example, if you have 5 virtual categories, you will have 5 lines, each will looks like the following:
galleryRedirectTable['123456789_abcde'] = 'http://yourname.smugmug.com/search/index.mg?searchWords=family&searchType=InUser&NickName=yourname';
Add this line if you don't have the onContentReady line. If you do, only copy the function body of onContentReadyCode to the top of the original onContentReady function. I'm using the "rename Galleries to Home" tutorial as an example:
YE.onContentReady("breadCrumbTrail", ReplaceTopOfBreadcrumbWithHome);
Make your ReplaceTopOfBreadcrumbWithHome look like this, where 9876543 is the id of gallery "Galleries" and "vwxyz" is the key of "Galleries" - again, replace with your own. The line with (52, 15) would be used to extract the picture id and key from "Galleries". For example, if the link of the "family" category picture goes to "http://yourname.smugmug.com/gallery/9876543_vwxyz/1/123456789_abcde/Small", then "123456789_abcde" would start at the 52nd character, with a length of 15. You can enhance it with something more robust - something not hardcoded, but since I have only 1 "Galleries" gallery list, I find it good enough for now.
function ReplaceTopOfBreadcrumbWithHome() {
// Replace Hrefs
if (!YD.hasClass(document.body, 'loggedIn'))
{
var path = window.location.pathname.toLowerCase().substr(9);
if (path.substr(0,13) == "9876543_vwxyz") {
var alllinks = document.getElementsByTagName('A');
if (alllinks) {
for (var i=0, len=alllinks.length; i<len; ++i) {
var plink = alllinks.item(i);
var pathkey = plink.href.substr(52,15).toLowerCase();
var newURL = galleryRedirectTable[pathkey];
if (newURL && (newURL != window.location))
{
plink.href = newURL;
}
}
}
}
}
// original cotents of ReplaceTopOfBreadcrumbWithHome
var str = this.innerHTML.replace(/\n/g, " ");
this.innerHTML = str.replace(/\>[^\<]+<\/a>/i, ">Home</a>");
}
Test it to see if it works - you can rename ReplaceTopOfBreadcrumbWithHome() function with another name because now it's doing something differently. For example, "OnBreadcrumbsReadyCode".
What the above code does is similar to checkRedirects() in earlier tutorials. What it does differently, is that it now tries to replace links before you click, instead of checking the current URL and redirect. This will eliminate a slight delay and make it compatible with the back button of all (DOM-scriptable) browser versions.
If you are used to a "Clean" look of gallery lists and prefer not to display the "Last Updated" from the search results, add .updated {display: none;} to your CSS block.
This is my first contribution here and I hope it helps - the explanation is not as clear as I want, it's time to sleep.
Like many here, I've decided the categories and subcategories to be too limited. I rearranged all my galleries so they only belong to custom categories named simply after the year (2003, 2008, 2009, etc.) because this is the only logical way a gallery will not have a chance to cross categories.
On my site, I use Gallery keywords for the general description of the gallery (family, wedding, etc...), and individual photos would have their own keywords for other purposes, e.g. travel, slideshow, abstract...
Now, I want galleries with the same gallery keywords to show up on one summary page. If the gallery keywords can be used in much the same way as photo keywords, the better. Currently, only the search box would provide a similar functionality.
In another virtual gallery tutorial, we were required to create a "phantom" gallery in each new category from which the target gallery wants redirection from. While it is a good method, I don't like having to create many phantom galleries with 1 picture each just for the redirection to work. Also, the method of redirection using location.replace introduces a very slight delay and not work with the back button for some browser versions. Here is a slight variation:
Create an unlisted, summary gallery, let's call it "Galleries". It is the starting point of all the galleries - view it as our "category" - just that now we can put the same gallery under many categories. Make its view style "traditional", no printing, and other settings that makes sense for a gallery list.
For each virtual category, select a picture that can represent this virtual category and copy it to "Galleries". Now we'll have one picture for each category in this "Galleries".
Create the "redirect table", in pretty much the same way as described in earlier tutorials. Insert this into the top of your Bottom Javascript section:
var galleryRedirectTable = new Object();
Immediately after the above line, for each virtual category picture copied to "Galleries", notice its picture id and key and insert an entry in the galleryRedirectTable. In this example, 1 line is given for the "family" virtual category, this virtual category is for galleries and pictures with keyword "family", its the picture id is 123456789 and key is abcde (use all-lowercase key here, so if the key is AbCdE, use abcde), account "yourname" - replace the terms in italics with your own.
For example, if you have 5 virtual categories, you will have 5 lines, each will looks like the following:
galleryRedirectTable['123456789_abcde'] = 'http://yourname.smugmug.com/search/index.mg?searchWords=family&searchType=InUser&NickName=yourname';
Add this line if you don't have the onContentReady line. If you do, only copy the function body of onContentReadyCode to the top of the original onContentReady function. I'm using the "rename Galleries to Home" tutorial as an example:
YE.onContentReady("breadCrumbTrail", ReplaceTopOfBreadcrumbWithHome);
Make your ReplaceTopOfBreadcrumbWithHome look like this, where 9876543 is the id of gallery "Galleries" and "vwxyz" is the key of "Galleries" - again, replace with your own. The line with (52, 15) would be used to extract the picture id and key from "Galleries". For example, if the link of the "family" category picture goes to "http://yourname.smugmug.com/gallery/9876543_vwxyz/1/123456789_abcde/Small", then "123456789_abcde" would start at the 52nd character, with a length of 15. You can enhance it with something more robust - something not hardcoded, but since I have only 1 "Galleries" gallery list, I find it good enough for now.
function ReplaceTopOfBreadcrumbWithHome() {
// Replace Hrefs
if (!YD.hasClass(document.body, 'loggedIn'))
{
var path = window.location.pathname.toLowerCase().substr(9);
if (path.substr(0,13) == "9876543_vwxyz") {
var alllinks = document.getElementsByTagName('A');
if (alllinks) {
for (var i=0, len=alllinks.length; i<len; ++i) {
var plink = alllinks.item(i);
var pathkey = plink.href.substr(52,15).toLowerCase();
var newURL = galleryRedirectTable[pathkey];
if (newURL && (newURL != window.location))
{
plink.href = newURL;
}
}
}
}
}
// original cotents of ReplaceTopOfBreadcrumbWithHome
var str = this.innerHTML.replace(/\n/g, " ");
this.innerHTML = str.replace(/\>[^\<]+<\/a>/i, ">Home</a>");
}
Test it to see if it works - you can rename ReplaceTopOfBreadcrumbWithHome() function with another name because now it's doing something differently. For example, "OnBreadcrumbsReadyCode".
What the above code does is similar to checkRedirects() in earlier tutorials. What it does differently, is that it now tries to replace links before you click, instead of checking the current URL and redirect. This will eliminate a slight delay and make it compatible with the back button of all (DOM-scriptable) browser versions.
If you are used to a "Clean" look of gallery lists and prefer not to display the "Last Updated" from the search results, add .updated {display: none;} to your CSS block.
This is my first contribution here and I hope it helps - the explanation is not as clear as I want, it's time to sleep.