Let me check whether I'm understanding what you're after: you want to be able to specify title-building different rules for different page types? So for your home page you'll have one set of rules, for a gallery another set, and for a photo a third set? Currently, the code uses one set of rules globally. So there's no way to modify the rules to achieve what you're after, we'd have to alter the code to do that.
Let me check whether I'm understanding what you're after: you want to be able to specify title-building different rules for different page types? So for your home page you'll have one set of rules, for a gallery another set, and for a photo a third set? Currently, the code uses one set of rules globally. So there's no way to modify the rules to achieve what you're after, we'd have to alter the code to do that.
Hi Gary
Thanks for responding. Just the right person as well
O.k. , currently I am happy with the code and with what it is achieving. However, the MAIN thing that I don't like is that my startpage/bio-page seems to be called "Galleries" and NOT "Home" as one would expect. I know some users will for instance remove their BIO page altogether, create a new gallery and name it Home and configure it as their start page. This I guess is an alternative solution but not one I want to apply.
I want to keep my bio page as is, but would like to just have the name of it change from "Galleries" to "Home". Not sure if this is even possible.
As a second request... (although it is not a major issue, but a nice to have), I want the existing behavior of the code, but just want it to swop the text by placing PageName in front followed by PageTitle as opposed to the current PageTitle followed by PageName.
Does this make sense? The best is to view the link I provided where there is a working example.
Hi Gary, so all of your code below goes in my javascript box correct? So right now I have none of your code on my website at all now... before I had it in my CSS box and I just removed it now...
So with no of your coding below on my website, when I search in google for my site it shows like this pic here.
Notice that it is showing my smugmug link not my custom domain www.lamontphotography.com any idea why?
Also if I do insert your coding below in my javascript is it just a simple cut and paste or is there anything I have to change. Plus will your coding help in google showing my custom domain...
Thank you sorry for the questions but I really dont know HTML thing at all.... I'm really trying here
I suspect I know what the problem is. I'm guessing you guys may have copied the new code I posted over the entire code in the previous version. I had only rewritten the Contextualize title class itself. I didn't change any of the little helper methods it relies on and I didn't re-post them. So if you replaced the previous version in its entirety with just the new class code, the new class won't work because it won't be able to find the helper methods. I'm re-posting here the entire thing. And I'm marking the utility methods especially. I'll also update the wiki.
/*
--------------------------------------------------
ContextualizeTitle Settings
--------------------------------------------------
*/
var titleSettings = {
separator : ": ", // Text to insert between parts of title.
maxLength : -1, // Limits length of title (-1 == no limit).
doPhotos : true, // true == append photo captions
doAlbums : true, // true == append album names
doGalleries : true, // true == append gallery names
stripSmugmug : true, // true == remove " - powered by SmugMug" from title bar text
inverse : false, // true == reverse order of home/gallery/album/photo
siteTitle : null // null == use normal site title. "" == suppress site title. "Any Value" == replaces normal site title.
};
/*
--------------------------------------------------
ContextualizeTitle Class
--------------------------------------------------
*/
function ContextualizeTitle ()
{
var pieces = new TitlePieces();
var newTitle = "";
if (titleSettings.inverse)
{
newTitle = MakeTitleBackward();
}
else
{
newTitle = MakeTitleForward();
}
if (titleSettings.maxLength > -1)
{
newTitle = newTitle.substr(0, titleSettings.maxLength);
}
if (titleSettings.stripSmugmug == false)
{
newTitle += " - powered by SmugMug";
}
document.title = newTitle;
// METHODS
function MakeTitleBackward ()
{
var title = "";
title += pieces.Photo
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Main.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Main;
return title;
}
function MakeTitleForward ()
{
var title = "";
title += pieces.Main;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Photo.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Photo
return title;
}
// CLASSES
function TitlePieces ()
{
this.Main = GetMainTitle();
this.Gallery = GetGalleryTitle();
this.Album = GetAlbumTitle();
this.Photo = GetPhotoTitle();
function GetMainTitle ()
{
var value = titleSettings.siteTitle;
if (value == null)
{
var index = document.title.indexOf("- powered by SmugMug");
value = document.title.substr(0, index);
}
return value;
}
function GetGalleryTitle ()
{
var value = "";
if (titleSettings.doGalleries)
{
var element = document.getElementById("galleryTitle");
if (element)
{
value = GetTextContent(element);
if (value.length > 0)
{
// remove " galleries" from title
var index = value.indexOf(" galleries");
if (index > -1)
{
value = value.substr(0, index);
}
}
}
}
return value;
}
function GetAlbumTitle ()
{
var value = "";
if (titleSettings.doAlbums)
{
var element = document.getElementById("albumTitle");
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
function GetPhotoTitle ()
{
var value = "";
if (titleSettings.doPhotos)
{
var element = document.getElementById("caption_bottom");
if (!element)
{
element = document.getElementById("caption_top");
}
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
}
} // end of ContextualTitle class
/*
--------------------------------------------------
Utility Methods
--------------------------------------------------
*/
function GetPhotoCaption()
{
var caption = "";
var photoTitle = document.getElementById("caption_bottom");
if(!photoTitle)
{
photoTitle = document.getElementById("caption_top");
}
if(photoTitle)
{
caption = GetTextContent(photoTitle);
}
return caption;
}
function GetTextContent(node)
{
var text = "";
if(node)
{
if(node.children)
{
text = GetTextContent(node.firstChild);
}
else
{
if(node.nodeValue)
{
text = node.nodeValue; // IE
}
else
{
text = node.textContent; // mozilla
}
}
}
text = Trim(text);
return text;
}
function Trim(text)
{
var regexp = /^\s+|\s+$/g;
text = text.replace(regexp, "");
return text;
}
function IsHomePage()
{
var isHomePage = false;
// test for the "homepage" class name in the <BODY> tag
var classStr = document.body.className;
if (classStr && (classStr.indexOf("homepage") != -1))
{
isHomePage = true;
}
return isHomePage;
}
Also if I do insert your coding below in my javascript is it just a simple cut and paste or is there anything I have to change. Plus will your coding help in google showing my custom domain...
You also have to invoke the ContextuallizeTitle (CT) method. I do this by assigning a custom method called "DoOnLoad" to the onload handler of the document. My custom method then calls all the other things I want done, such as CT. There are various ways to assign the handler, but I did it by assigning a custom value to the body tag on the customizations screen:
<body onload="DoOnload();">
In your case, you might want to call CT. Note, that is not the most elegant way to do it. For example, later you might want to do something else onload too. I change this by editing my DoOnLoad method, but there is also a way to add a method to the onload event handler using the SM and/or YUI API, however I don't know what it is offhand. It's probably documented on the wiki somewhere or here in the discussion forums. Maybe someone who knows will respond.
I would update the wiki, but I've been told that SM has limited licenses for the wiki and so it's not editable by just anyone who has an interest. I used to be an editor, but for this reason I'm not anymore.
As for your questions about google, I really don't know. Again, maybe someone else here does.
I think so. But it is a non-trivial change. At least the 2nd part is, I think. Re the first issue, couldn't you just set a custom Page Title on your customizations screen?
I think so. But it is a non-trivial change. At least the 2nd part is, I think. Re the first issue, couldn't you just set a custom Page Title on your customizations screen?
Hi Gary
But I do have a custom Page Title entered in the customizations screen? It is this very Page Title that is propagated to ALL my pages on my site. Your script goes further and APPENDS at the END of my PAGE TITLE the "individual" pages name. For instance, if I have a gallery labeled / named "Services"... your script uses the PAGE TITLE as entered in my customizations field BUT your script then also APPENDS the word "Services" behind that Page Title... and it is this that makes each page unique as far as bookmarking is concerned.
I can easily name a gallery whatever I want...simple procedure. But as for the start page where the BIO is entered... that exists by default and does not have the same field to change its name as a gallery page has. Which brings me to my question of HOW TO CHANGE the name of a BIO page which is generally your HOMEPAGE.
I hope this is making sense...if not, let me know and I will take screenshots to further illustrate.
OK, I understand what you're getting at. It's just going to take a bit of work to make the script do this. Essentially what you'd want is to be able to specify a separate set of title rules for each type of page. I would code it so you can specify a global rule set, then optionally specify overrides for each page type. So the set up would end up looking something like this:
var titleSettings = {
global : {
separator : ": ", // Text to insert between parts of title.
maxLength : -1, // Limits length of title (-1 == no limit).
doPhotos : true, // true == append photo captions
doAlbums : true, // true == append album names
doGalleries : true, // true == append gallery names
stripSmugmug : true, // true == remove " - powered by SmugMug" from title bar text
inverse : false, // true == reverse order of home/gallery/album/photo
siteTitle : null // null == use normal site title. "" == suppress site title. "Any Value" == replaces normal site title.
},
// override global settings on home page
home : {
siteTitle: "Home"
},
// override global settings on gallery pages
galleries : {
inverse: true
}
};
Or something along those lines. Doable, but the trouble is that this makes it more complicated for the user to set up, even if they don't want all that flexibility.
You also have to invoke the ContextuallizeTitle (CT) method. I do this by assigning a custom method called "DoOnLoad" to the onload handler of the document. My custom method then calls all the other things I want done, such as CT. There are various ways to assign the handler, but I did it by assigning a custom value to the body tag on the customizations screen:
<body onload="DoOnload();">
In your case, you might want to call CT. Note, that is not the most elegant way to do it. For example, later you might want to do something else onload too. I change this by editing my DoOnLoad method, but there is also a way to add a method to the onload event handler using the SM and/or YUI API, however I don't know what it is offhand. It's probably documented on the wiki somewhere or here in the discussion forums. Maybe someone who knows will respond.
I would update the wiki, but I've been told that SM has limited licenses for the wiki and so it's not editable by just anyone who has an interest. I used to be an editor, but for this reason I'm not anymore.
As for your questions about google, I really don't know. Again, maybe someone else here does.
Gary, you may find it simpler to suggest that people invoke your function with this line of JS using the YUI event library that's built-in to Smugmug:
YE.onDOMReady(ContextualizeTitle);
This does basically the same thing as an onLoad handler, but it has the advantage that you can have one nice little block of JS that is self contained and you don't have to separately maintain the onLoad handler elsewhere in Smugmug's customization UI. It's also simpler to explain to folks how to do it. All you have to tell them is to paste this block of code into your bottom javascript and you're good to go.
FYI, I like the elegance with which you wrote your function. Nice data structures for keeping track of stuff, nested functions to contain the namespace, etc...
Thanks, JF. I remember someone posting somewhere about that simple handler, but when I saw it I already had my own thing implemented and was too lazy to go change it. But yeah, the YUI implementation is much better.
Sorry for being away for a few days...am back now!
Ok, I won't lie and let you believe I understand that code in the slightest. My skills go as far as copy and paste.:D
Now, as for Page Title names... how simple will the code be to JUST cater for the changing of the name of my START page? Is it a total redevelopment or is there just a line here and there that must be added?
All my pages already have unique names thanks to your code.... BUT I o only now need to change the name of my BIO page.
Now, as for Page Title names... how simple will the code be to JUST cater for the changing of the name of my START page? Is it a total redevelopment or is there just a line here and there that must be added?
It toke me 14 pages to get this done, and bottom line:
Add this to your top javascript:
/*
--------------------------------------------------
ContextualizeTitle Settings
--------------------------------------------------
*/
var titleSettings = {
separator : ": ", // Text to insert between parts of title.
maxLength : -1, // Limits length of title (-1 == no limit).
doPhotos : true, // true == append photo captions
doAlbums : true, // true == append album names
doGalleries : true, // true == append gallery names
stripSmugmug : true, // true == remove " - powered by SmugMug" from title bar text
inverse : false, // true == reverse order of home/gallery/album/photo
siteTitle : null // null == use normal site title. "" == suppress site title. "Any Value" == replaces normal site title.
};
/*
--------------------------------------------------
ContextualizeTitle Class
--------------------------------------------------
*/
function ContextualizeTitle ()
{
var pieces = new TitlePieces();
var newTitle = "";
if (titleSettings.inverse)
{
newTitle = MakeTitleBackward();
}
else
{
newTitle = MakeTitleForward();
}
if (titleSettings.maxLength > -1)
{
newTitle = newTitle.substr(0, titleSettings.maxLength);
}
if (titleSettings.stripSmugmug == false)
{
newTitle += " - powered by SmugMug";
}
document.title = newTitle;
// METHODS
function MakeTitleBackward ()
{
var title = "";
title += pieces.Photo
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Main.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Main;
return title;
}
function MakeTitleForward ()
{
var title = "";
title += pieces.Main;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Photo.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Photo
return title;
}
// CLASSES
function TitlePieces ()
{
this.Main = GetMainTitle();
this.Gallery = GetGalleryTitle();
this.Album = GetAlbumTitle();
this.Photo = GetPhotoTitle();
function GetMainTitle ()
{
var value = titleSettings.siteTitle;
if (value == null)
{
var index = document.title.indexOf("- powered by SmugMug");
value = document.title.substr(0, index);
}
return value;
}
function GetGalleryTitle ()
{
var value = "";
if (titleSettings.doGalleries)
{
var element = document.getElementById("galleryTitle");
if (element)
{
value = GetTextContent(element);
if (value.length > 0)
{
// remove " galleries" from title
var index = value.indexOf(" galleries");
if (index > -1)
{
value = value.substr(0, index);
}
}
}
}
return value;
}
function GetAlbumTitle ()
{
var value = "";
if (titleSettings.doAlbums)
{
var element = document.getElementById("albumTitle");
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
function GetPhotoTitle ()
{
var value = "";
if (titleSettings.doPhotos)
{
var element = document.getElementById("caption_bottom");
if (!element)
{
element = document.getElementById("caption_top");
}
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
}
} // end of ContextualTitle class
/*
--------------------------------------------------
Utility Methods
--------------------------------------------------
*/
function GetPhotoCaption()
{
var caption = "";
var photoTitle = document.getElementById("caption_bottom");
if(!photoTitle)
{
photoTitle = document.getElementById("caption_top");
}
if(photoTitle)
{
caption = GetTextContent(photoTitle);
}
return caption;
}
function GetTextContent(node)
{
var text = "";
if(node)
{
if(node.children)
{
text = GetTextContent(node.firstChild);
}
else
{
if(node.nodeValue)
{
text = node.nodeValue; // IE
}
else
{
text = node.textContent; // mozilla
}
}
}
text = Trim(text);
return text;
}
function Trim(text)
{
var regexp = /^\s+|\s+$/g;
text = text.replace(regexp, "");
return text;
}
function IsHomePage()
{
var isHomePage = false;
// test for the "homepage" class name in the <BODY> tag
var classStr = document.body.className;
if (classStr && (classStr.indexOf("homepage") != -1))
{
isHomePage = true;
}
return isHomePage;
}
Add this to your bottom javascript
YE.onDOMReady(ContextualizeTitle);
I'd like to see SM do a better job of keeping the wiki up to date. It is frustrating to have to read thru these enormous threads to figure out how to implement a hack.
I'd like to see SM do a better job of keeping the wiki up to date. It is frustrating to have to read thru these enormous threads to figure out how to implement a hack.
These hacks are not Smugmug documented or supported. They come from the user community and are only documented by the user community.
The way I do it in a thread like this one, is I keep the first message in the thread up-to-date with the full instructions and latest code.
You can ask Smugmug what their intentions are with this, but I think they are fine with helping to collect links to various dgrin threads (that's what your first link is), but I don't think they intend to actually document hacks and keep them up to date.
I have done. Originally the wiki was open to the user community. Now it isn't, due, I have been told, to limited licensing. In my opinion, this is SM's problem. If they want to encourage user-developed hacks, they need to make up their own minds about it. Your example doesn't work well and this thread is an example of why. I didn't start this thread, and for that reason I can't keep the first message up to date. All I did was refactor and enhance the code that someone else on the thread had developed. Discussion threads are not, in my opinion, a sufficient way to support user-developed customization.
I have done. Originally the wiki was open to the user community. Now it isn't, due, I have been told, to limited licensing. In my opinion, this is SM's problem. If they want to encourage user-developed hacks, they need to make up their own minds about it. Your example doesn't work well and this thread is an example of why. I didn't start this thread, and for that reason I can't keep the first message up to date. All I did was refactor and enhance the code that someone else on the thread had developed. Discussion threads are not, in my opinion, a sufficient way to support user-developed customization.
I would agree that discussion threads are not ideal. I am responsible for many different hacks (I have a list of 20-30 in a file) and I've never once seen Smugmug attempt to document any of them or offer me any tools to publish documentation on them so my next best alternative is here at dgrin. That's all I was trying to say.
Here is a simpler alternative approach for those with a limited number of pages...
Hi -
This approach is simpler and a bit more manual, but provides great flexibility.... This enables you to specifically title any page.
Top Javascript
function UpdatedPageTitle()
{
var baseTitle = "YOUR BASE PAGE TITLE";
var separator = " - ";
var updatedPageTitle = document.getElementById("updatedPageTitle");
if( updatedPageTitle && updatedPageTitle.innerHTML )
{document.title = baseTitle + separator + updatedPageTitle.innerHTML;}
else {document.title = baseTitle;}
}
Body Tag
<body onload="UpdatedPageTitle();">
CSS
#updatedPageTitle {display:none;}
Anywhere on a page that you want to title a specific way
<div id=updatedPageTitle>YOUR UPDATED TITLE</div>
Note: If you do NOT implement the <div id=updatedPageTitle> statement on a given page, that page will display the base title that is set in the Javascript section.
Phew
Hi All,
For the last three hours I have been working away on this trying to get it to work. I have finally managed to get one of the versions working which is:
/*
--------------------------------------------------
ContextualizeTitle Settings
--------------------------------------------------
*/
var titleSettings = {
separator : ": ", // Text to insert between parts of title.
maxLength : -1, // Limits length of title (-1 == no limit).
doPhotos : true, // true == append photo captions
doAlbums : true, // true == append album names
doGalleries : true, // true == append gallery names
stripSmugmug : true, // true == remove " - powered by SmugMug" from title bar text
inverse : true, // true == reverse order of home/gallery/album/photo
siteTitle : null // null == use normal site title. "" == suppress site title. "Any Value" == replaces normal site title.
};
/*
--------------------------------------------------
ContextualizeTitle Class
--------------------------------------------------
*/
function ContextualizeTitle ()
{
var pieces = new TitlePieces();
var newTitle = "";
if (titleSettings.inverse)
{
newTitle = MakeTitleBackward();
}
else
{
newTitle = MakeTitleForward();
}
if (titleSettings.maxLength > -1)
{
newTitle = newTitle.substr(0, titleSettings.maxLength);
}
if (titleSettings.stripSmugmug == false)
{
newTitle += " - powered by SmugMug";
}
document.title = newTitle;
// METHODS
function MakeTitleBackward ()
{
var title = "";
title += pieces.Photo
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Main.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Main;
return title;
}
function MakeTitleForward ()
{
var title = "";
title += pieces.Main;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Photo.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Photo
return title;
}
// CLASSES
function TitlePieces ()
{
this.Main = GetMainTitle();
this.Gallery = GetGalleryTitle();
this.Album = GetAlbumTitle();
this.Photo = GetPhotoTitle();
function GetMainTitle ()
{
var value = titleSettings.siteTitle;
if (value == null)
{
var index = document.title.indexOf("- powered by SmugMug");
value = document.title.substr(0, index);
}
return value;
}
function GetGalleryTitle ()
{
var value = "";
if (titleSettings.doGalleries)
{
var element = document.getElementById("galleryTitle");
if (element)
{
value = GetTextContent(element);
if (value.length > 0)
{
// remove " galleries" from title
var index = value.indexOf(" galleries");
if (index > -1)
{
value = value.substr(0, index);
}
}
}
}
return value;
}
function GetAlbumTitle ()
{
var value = "";
if (titleSettings.doAlbums)
{
var element = document.getElementById("albumTitle");
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
function GetPhotoTitle ()
{
var value = "";
if (titleSettings.doPhotos)
{
var element = document.getElementById("caption_bottom");
if (!element)
{
element = document.getElementById("caption_top");
}
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
}
} // end of ContextualTitle class
/*
--------------------------------------------------
Utility Methods
--------------------------------------------------
*/
function GetPhotoCaption()
{
var caption = "";
var photoTitle = document.getElementById("caption_bottom");
if(!photoTitle)
{
photoTitle = document.getElementById("caption_top");
}
if(photoTitle)
{
caption = GetTextContent(photoTitle);
}
return caption;
}
function GetTextContent(node)
{
var text = "";
if(node)
{
if(node.children)
{
text = GetTextContent(node.firstChild);
}
else
{
if(node.nodeValue)
{
text = node.nodeValue; // IE
}
else
{
text = node.textContent; // mozilla
}
}
}
text = Trim(text);
return text;
}
function Trim(text)
{
var regexp = /^\s+|\s+$/g;
text = text.replace(regexp, "");
return text;
}
function IsHomePage()
{
var isHomePage = false;
// test for the "homepage" class name in the <BODY> tag
var classStr = document.body.className;
if (classStr && (classStr.indexOf("homepage") != -1))
{
isHomePage = true;
}
return isHomePage;
}
However on my site (http://gallery.eccentricreality.com ) none of the actual captions seem to be showing for any of the photos, only the album names. Anyone have any ideas?
Cheers
Stuart
For the last three hours I have been working away on this trying to get it to work. I have finally managed to get one of the versions working which is:
I'm feeling frustrated with SM's support of customer-provided hacks. I keep seeing people posting things (like you did) saying basically, "There's code all over the place. I just want to know how to make it work." I thought the wiki was a great step toward easing the pain of maintaining hacks and giving users a single place to go and get the code, together with instructions on how to use it. But now that SM no longer allows the community to edit the wiki (sort of defeats the purpose of a wiki, doesn't it?), and they haven't been doing a good job of keeping the hacks on it up to date themselves, we have this situation. If SM really wants the community to develop and support and implement customization hacks, then I think SM really needs to make it easier for us. Discussions threads are a great way to discuss hacks. But they're a terrible documentation system and a worse code repository.
Title Bar Help
I used this method by Mohamed Ghuloom on http://www.photos.nixielee.com.
All is well exept one small bug. On the Catagories "Glitz" and "SledgeHammer" the catagory name is not displayed in the title bar. I use a different theme for these catagories could that be what is affecting the display and how so??
Many Thanks- ultimae goal examples
Nixielee Photography (Home Page)
Glitz - Nixielee Photography (Glitz Catagory)
Glitz - Blue Haven Lounge - Nixielee Photography (Blue Haven Sub Catagory)
ect...
It's not a huge deal when they are on an album the album name shows up and the Powered by Smug Mug is gone which is my main goal.
But if you have any ideas for what I may have done wrong let me know
It toke me 14 pages to get this done, and bottom line:
Add this to your top javascript:
/*
--------------------------------------------------
ContextualizeTitle Settings
--------------------------------------------------
*/
var titleSettings = {
separator : ": ", // Text to insert between parts of title.
maxLength : -1, // Limits length of title (-1 == no limit).
doPhotos : true, // true == append photo captions
doAlbums : true, // true == append album names
doGalleries : true, // true == append gallery names
stripSmugmug : true, // true == remove " - powered by SmugMug" from title bar text
inverse : false, // true == reverse order of home/gallery/album/photo
siteTitle : null // null == use normal site title. "" == suppress site title. "Any Value" == replaces normal site title.
};
/*
--------------------------------------------------
ContextualizeTitle Class
--------------------------------------------------
*/
function ContextualizeTitle ()
{
var pieces = new TitlePieces();
var newTitle = "";
if (titleSettings.inverse)
{
newTitle = MakeTitleBackward();
}
else
{
newTitle = MakeTitleForward();
}
if (titleSettings.maxLength > -1)
{
newTitle = newTitle.substr(0, titleSettings.maxLength);
}
if (titleSettings.stripSmugmug == false)
{
newTitle += " - powered by SmugMug";
}
document.title = newTitle;
// METHODS
function MakeTitleBackward ()
{
var title = "";
title += pieces.Photo
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Main.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Main;
return title;
}
function MakeTitleForward ()
{
var title = "";
title += pieces.Main;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Photo.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Photo
return title;
}
// CLASSES
function TitlePieces ()
{
this.Main = GetMainTitle();
this.Gallery = GetGalleryTitle();
this.Album = GetAlbumTitle();
this.Photo = GetPhotoTitle();
function GetMainTitle ()
{
var value = titleSettings.siteTitle;
if (value == null)
{
var index = document.title.indexOf("- powered by SmugMug");
value = document.title.substr(0, index);
}
return value;
}
function GetGalleryTitle ()
{
var value = "";
if (titleSettings.doGalleries)
{
var element = document.getElementById("galleryTitle");
if (element)
{
value = GetTextContent(element);
if (value.length > 0)
{
// remove " galleries" from title
var index = value.indexOf(" galleries");
if (index > -1)
{
value = value.substr(0, index);
}
}
}
}
return value;
}
function GetAlbumTitle ()
{
var value = "";
if (titleSettings.doAlbums)
{
var element = document.getElementById("albumTitle");
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
function GetPhotoTitle ()
{
var value = "";
if (titleSettings.doPhotos)
{
var element = document.getElementById("caption_bottom");
if (!element)
{
element = document.getElementById("caption_top");
}
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
}
} // end of ContextualTitle class
/*
--------------------------------------------------
Utility Methods
--------------------------------------------------
*/
function GetPhotoCaption()
{
var caption = "";
var photoTitle = document.getElementById("caption_bottom");
if(!photoTitle)
{
photoTitle = document.getElementById("caption_top");
}
if(photoTitle)
{
caption = GetTextContent(photoTitle);
}
return caption;
}
function GetTextContent(node)
{
var text = "";
if(node)
{
if(node.children)
{
text = GetTextContent(node.firstChild);
}
else
{
if(node.nodeValue)
{
text = node.nodeValue; // IE
}
else
{
text = node.textContent; // mozilla
}
}
}
text = Trim(text);
return text;
}
function Trim(text)
{
var regexp = /^\s+|\s+$/g;
text = text.replace(regexp, "");
return text;
}
function IsHomePage()
{
var isHomePage = false;
// test for the "homepage" class name in the <BODY> tag
var classStr = document.body.className;
if (classStr && (classStr.indexOf("homepage") != -1))
{
isHomePage = true;
}
return isHomePage;
}
Add this to your bottom javascript
YE.onDOMReady(ContextualizeTitle);
It toke me 14 pages to get this done, and bottom line:
Add this to your top javascript:
/*
--------------------------------------------------
ContextualizeTitle Settings
--------------------------------------------------
*/
var titleSettings = {
separator : ": ", // Text to insert between parts of title.
maxLength : -1, // Limits length of title (-1 == no limit).
doPhotos : true, // true == append photo captions
doAlbums : true, // true == append album names
doGalleries : true, // true == append gallery names
stripSmugmug : true, // true == remove " - powered by SmugMug" from title bar text
inverse : false, // true == reverse order of home/gallery/album/photo
siteTitle : null // null == use normal site title. "" == suppress site title. "Any Value" == replaces normal site title.
};
/*
--------------------------------------------------
ContextualizeTitle Class
--------------------------------------------------
*/
function ContextualizeTitle ()
{
var pieces = new TitlePieces();
var newTitle = "";
if (titleSettings.inverse)
{
newTitle = MakeTitleBackward();
}
else
{
newTitle = MakeTitleForward();
}
if (titleSettings.maxLength > -1)
{
newTitle = newTitle.substr(0, titleSettings.maxLength);
}
if (titleSettings.stripSmugmug == false)
{
newTitle += " - powered by SmugMug";
}
document.title = newTitle;
// METHODS
function MakeTitleBackward ()
{
var title = "";
title += pieces.Photo
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Main.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Main;
return title;
}
function MakeTitleForward ()
{
var title = "";
title += pieces.Main;
if (title.length > 0
&& pieces.Gallery.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Gallery;
if (title.length > 0
&& pieces.Album.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Album;
if (title.length > 0
&& pieces.Photo.length > 0)
{
title += titleSettings.separator;
}
title += pieces.Photo
return title;
}
// CLASSES
function TitlePieces ()
{
this.Main = GetMainTitle();
this.Gallery = GetGalleryTitle();
this.Album = GetAlbumTitle();
this.Photo = GetPhotoTitle();
function GetMainTitle ()
{
var value = titleSettings.siteTitle;
if (value == null)
{
var index = document.title.indexOf("- powered by SmugMug");
value = document.title.substr(0, index);
}
return value;
}
function GetGalleryTitle ()
{
var value = "";
if (titleSettings.doGalleries)
{
var element = document.getElementById("galleryTitle");
if (element)
{
value = GetTextContent(element);
if (value.length > 0)
{
// remove " galleries" from title
var index = value.indexOf(" galleries");
if (index > -1)
{
value = value.substr(0, index);
}
}
}
}
return value;
}
function GetAlbumTitle ()
{
var value = "";
if (titleSettings.doAlbums)
{
var element = document.getElementById("albumTitle");
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
function GetPhotoTitle ()
{
var value = "";
if (titleSettings.doPhotos)
{
var element = document.getElementById("caption_bottom");
if (!element)
{
element = document.getElementById("caption_top");
}
if (element)
{
value = GetTextContent(element);
}
}
return value;
}
}
} // end of ContextualTitle class
/*
--------------------------------------------------
Utility Methods
--------------------------------------------------
*/
function GetPhotoCaption()
{
var caption = "";
var photoTitle = document.getElementById("caption_bottom");
if(!photoTitle)
{
photoTitle = document.getElementById("caption_top");
}
if(photoTitle)
{
caption = GetTextContent(photoTitle);
}
return caption;
}
function GetTextContent(node)
{
var text = "";
if(node)
{
if(node.children)
{
text = GetTextContent(node.firstChild);
}
else
{
if(node.nodeValue)
{
text = node.nodeValue; // IE
}
else
{
text = node.textContent; // mozilla
}
}
}
text = Trim(text);
return text;
}
function Trim(text)
{
var regexp = /^\s+|\s+$/g;
text = text.replace(regexp, "");
return text;
}
function IsHomePage()
{
var isHomePage = false;
// test for the "homepage" class name in the <BODY> tag
var classStr = document.body.className;
if (classStr && (classStr.indexOf("homepage") != -1))
{
isHomePage = true;
}
return isHomePage;
}
Add this to your bottom javascript
YE.onDOMReady(ContextualizeTitle);
Does anyone know if using this code will change the gallery titles in a google search or will they all still be the same?
So I have been reading multiple threads and have just gone in circles over what exactly to put. I believe I have put everything that Gary has said to put, and I would just like to have someone possibly take a look at my site and see if i've goofed anything up or mixed up codes. I have put everything in my bottom Javascript instead of my top which might be causing a problem. Also, I did insert my title into the "" (that is what I was supposed to do right?) But I don't believe it is working with what I have so I messed something up for sure. Any help would be greatly appreciated!
I have been following this thread for the last couple days and I can't make heads or tails out of what is happening. I don't even know if this is what I was looking for so if someone answer this I would be so greatful.
All I want to do is remove the words sub-categories, categories and galleries from the page title. Simple put I would like to see:
CategoryName not CategoryName + categories
Sub-CategoryName not Sub-CategoryName + sub-categories
Can someone please point me in the right direction?
Big_D, this hack is about modifying the text displayed in the titlebar of the browser, not what's shown on the page itself.
I understand your frustration, and again, I renew my call to Smugmug to provide a better way for all of us to maintain and document user-contributed hacks. User-contributed hacks add real value to SM. But they are not being well utilized.
I've been looking through this and trying to implement it but I need a real dummy's guide step by step set of instructions to get it working.
I put this code in the Top JavaScript section:
document.title = "Black Shadow Photography – Richard Sharman a photographer in Melbourne";function RelevantTitle(){ var baseTitle = " Black Shadow Photography – Richard Sharman a photographer in Melbourne"; var separator = " - "; var albumTitle = document.getElementById("albumTitle"); var galleryTitle = document.getElementById("galleryTitle"); if( albumTitle && albumTitle.textContent ) document.title = baseTitle + separator + albumTitle.textContent; else if( galleryTitle && galleryTitle.textContent ) { var galleryTitleText = galleryTitle.textContent; // Strip " sub-categories" off the end of the category text var finalPositionCategory = galleryTitleText.search(" sub-categories"); if( finalPositionCategory >= 0 ) galleryTitleText = galleryTitleText.substr( 0, finalPositionCategory ); else { // Strip " galleries" off the end of the category/sub-category text var finalPositionSubCategory = galleryTitleText.search(" galleries"); if( finalPositionSubCategory >= 0 ) galleryTitleText = galleryTitleText.substr( 0, finalPositionSubCategory ); } document.title = baseTitle + separator + galleryTitleText; } else // Not Gallery, Category, or Subcategory { // Set title on homepage document.title = baseTitle; }}
Comments
ShutterGlass.com
OnlyBegotten.com
Hi Gary
Thanks for responding. Just the right person as well
O.k. , currently I am happy with the code and with what it is achieving. However, the MAIN thing that I don't like is that my startpage/bio-page seems to be called "Galleries" and NOT "Home" as one would expect. I know some users will for instance remove their BIO page altogether, create a new gallery and name it Home and configure it as their start page. This I guess is an alternative solution but not one I want to apply.
I want to keep my bio page as is, but would like to just have the name of it change from "Galleries" to "Home". Not sure if this is even possible.
As a second request... (although it is not a major issue, but a nice to have), I want the existing behavior of the code, but just want it to swop the text by placing PageName in front followed by PageTitle as opposed to the current PageTitle followed by PageName.
Does this make sense? The best is to view the link I provided where there is a working example.
Thanks Gary!
So with no of your coding below on my website, when I search in google for my site it shows like this pic here.
Notice that it is showing my smugmug link not my custom domain www.lamontphotography.com any idea why?
Also if I do insert your coding below in my javascript is it just a simple cut and paste or is there anything I have to change. Plus will your coding help in google showing my custom domain...
Thank you sorry for the questions but I really dont know HTML thing at all.... I'm really trying here
Canon 60D
Canon Rebel XTi (400)
Canon 10-22mm, Canon 50mm f/1.8 II
MacBook, MacPro
You also have to invoke the ContextuallizeTitle (CT) method. I do this by assigning a custom method called "DoOnLoad" to the onload handler of the document. My custom method then calls all the other things I want done, such as CT. There are various ways to assign the handler, but I did it by assigning a custom value to the body tag on the customizations screen:
<body onload="DoOnload();">
In your case, you might want to call CT. Note, that is not the most elegant way to do it. For example, later you might want to do something else onload too. I change this by editing my DoOnLoad method, but there is also a way to add a method to the onload event handler using the SM and/or YUI API, however I don't know what it is offhand. It's probably documented on the wiki somewhere or here in the discussion forums. Maybe someone who knows will respond.
I would update the wiki, but I've been told that SM has limited licenses for the wiki and so it's not editable by just anyone who has an interest. I used to be an editor, but for this reason I'm not anymore.
As for your questions about google, I really don't know. Again, maybe someone else here does.
ShutterGlass.com
OnlyBegotten.com
I think so. But it is a non-trivial change. At least the 2nd part is, I think. Re the first issue, couldn't you just set a custom Page Title on your customizations screen?
ShutterGlass.com
OnlyBegotten.com
Thanks again
Ryan
Canon 60D
Canon Rebel XTi (400)
Canon 10-22mm, Canon 50mm f/1.8 II
MacBook, MacPro
Hi Gary
But I do have a custom Page Title entered in the customizations screen? It is this very Page Title that is propagated to ALL my pages on my site. Your script goes further and APPENDS at the END of my PAGE TITLE the "individual" pages name. For instance, if I have a gallery labeled / named "Services"... your script uses the PAGE TITLE as entered in my customizations field BUT your script then also APPENDS the word "Services" behind that Page Title... and it is this that makes each page unique as far as bookmarking is concerned.
I can easily name a gallery whatever I want...simple procedure. But as for the start page where the BIO is entered... that exists by default and does not have the same field to change its name as a gallery page has. Which brings me to my question of HOW TO CHANGE the name of a BIO page which is generally your HOMEPAGE.
I hope this is making sense...if not, let me know and I will take screenshots to further illustrate.
Thanks!!
Or something along those lines. Doable, but the trouble is that this makes it more complicated for the user to set up, even if they don't want all that flexibility.
ShutterGlass.com
OnlyBegotten.com
YE.onDOMReady(ContextualizeTitle);
This does basically the same thing as an onLoad handler, but it has the advantage that you can have one nice little block of JS that is self contained and you don't have to separately maintain the onLoad handler elsewhere in Smugmug's customization UI. It's also simpler to explain to folks how to do it. All you have to tell them is to paste this block of code into your bottom javascript and you're good to go.
FYI, I like the elegance with which you wrote your function. Nice data structures for keeping track of stuff, nested functions to contain the namespace, etc...
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
And thanks for the kind remarks on the code.
ShutterGlass.com
OnlyBegotten.com
Sorry for being away for a few days...am back now!
Ok, I won't lie and let you believe I understand that code in the slightest. My skills go as far as copy and paste.:D
Now, as for Page Title names... how simple will the code be to JUST cater for the changing of the name of my START page? Is it a total redevelopment or is there just a line here and there that must be added?
All my pages already have unique names thanks to your code.... BUT I o only now need to change the name of my BIO page.
Hope you can help?
That bit should be pretty easy.
ShutterGlass.com
OnlyBegotten.com
Add this to your top javascript:
Add this to your bottom javascript
YE.onDOMReady(ContextualizeTitle);
Give a Message
ShutterGlass.com
OnlyBegotten.com
The way I do it in a thread like this one, is I keep the first message in the thread up-to-date with the full instructions and latest code.
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
http://wiki.smugmug.net/display/SmugMug/Hacks+and+Apps
http://wiki.smugmug.net/display/SmugMug/Titlebar+Customizer
ShutterGlass.com
OnlyBegotten.com
You can ask Smugmug what their intentions are with this, but I think they are fine with helping to collect links to various dgrin threads (that's what your first link is), but I don't think they intend to actually document hacks and keep them up to date.
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
ShutterGlass.com
OnlyBegotten.com
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Hi -
This approach is simpler and a bit more manual, but provides great flexibility.... This enables you to specifically title any page.
Top Javascript
function UpdatedPageTitle()
{
var baseTitle = "YOUR BASE PAGE TITLE";
var separator = " - ";
var updatedPageTitle = document.getElementById("updatedPageTitle");
if( updatedPageTitle && updatedPageTitle.innerHTML )
{document.title = baseTitle + separator + updatedPageTitle.innerHTML;}
else {document.title = baseTitle;}
}
Body Tag
<body onload="UpdatedPageTitle();">
CSS
#updatedPageTitle {display:none;}
Anywhere on a page that you want to title a specific way
<div id=updatedPageTitle>YOUR UPDATED TITLE</div>
Note: If you do NOT implement the <div id=updatedPageTitle> statement on a given page, that page will display the base title that is set in the Javascript section.
Thanks,
Tom K.
Wow Tom. That works like a charm. Very easy to implement. Thank you!
Weddings | Portraits
Site & Blog
heather@pixelpiephotos.com
Hi All,
For the last three hours I have been working away on this trying to get it to work. I have finally managed to get one of the versions working which is: However on my site (http://gallery.eccentricreality.com ) none of the actual captions seem to be showing for any of the photos, only the album names. Anyone have any ideas?
Cheers
Stuart
I'm feeling frustrated with SM's support of customer-provided hacks. I keep seeing people posting things (like you did) saying basically, "There's code all over the place. I just want to know how to make it work." I thought the wiki was a great step toward easing the pain of maintaining hacks and giving users a single place to go and get the code, together with instructions on how to use it. But now that SM no longer allows the community to edit the wiki (sort of defeats the purpose of a wiki, doesn't it?), and they haven't been doing a good job of keeping the hacks on it up to date themselves, we have this situation. If SM really wants the community to develop and support and implement customization hacks, then I think SM really needs to make it easier for us. Discussions threads are a great way to discuss hacks. But they're a terrible documentation system and a worse code repository.
ShutterGlass.com
OnlyBegotten.com
I used this method by Mohamed Ghuloom on http://www.photos.nixielee.com.
All is well exept one small bug. On the Catagories "Glitz" and "SledgeHammer" the catagory name is not displayed in the title bar. I use a different theme for these catagories could that be what is affecting the display and how so??
Many Thanks- ultimae goal examples
Nixielee Photography (Home Page)
Glitz - Nixielee Photography (Glitz Catagory)
Glitz - Blue Haven Lounge - Nixielee Photography (Blue Haven Sub Catagory)
ect...
It's not a huge deal when they are on an album the album name shows up and the Powered by Smug Mug is gone which is my main goal.
But if you have any ideas for what I may have done wrong let me know
Many Thanks!
Does anyone know if using this code will change the gallery titles in a google search or will they all still be the same?
Thanks
Thank you in advance!
Rachael Ritchie
http://www.rachaelritchiephotography.com
You can add it to your body tag:
onload="ContextualizeTitle();"
You can add an event handler anywhere in your javascript:
addEvent(window, "load", ContextualizeTitle);
ShutterGlass.com
OnlyBegotten.com
I have been following this thread for the last couple days and I can't make heads or tails out of what is happening. I don't even know if this is what I was looking for so if someone answer this I would be so greatful.
All I want to do is remove the words sub-categories, categories and galleries from the page title. Simple put I would like to see:
CategoryName not CategoryName + categories
Sub-CategoryName not Sub-CategoryName + sub-categories
Can someone please point me in the right direction?
http://www.joedecluette.smugmug.com
Thank you so much,
I understand your frustration, and again, I renew my call to Smugmug to provide a better way for all of us to maintain and document user-contributed hacks. User-contributed hacks add real value to SM. But they are not being well utilized.
ShutterGlass.com
OnlyBegotten.com
I put this code in the Top JavaScript section:
document.title = "Black Shadow Photography – Richard Sharman a photographer in Melbourne";function RelevantTitle(){ var baseTitle = " Black Shadow Photography – Richard Sharman a photographer in Melbourne"; var separator = " - "; var albumTitle = document.getElementById("albumTitle"); var galleryTitle = document.getElementById("galleryTitle"); if( albumTitle && albumTitle.textContent ) document.title = baseTitle + separator + albumTitle.textContent; else if( galleryTitle && galleryTitle.textContent ) { var galleryTitleText = galleryTitle.textContent; // Strip " sub-categories" off the end of the category text var finalPositionCategory = galleryTitleText.search(" sub-categories"); if( finalPositionCategory >= 0 ) galleryTitleText = galleryTitleText.substr( 0, finalPositionCategory ); else { // Strip " galleries" off the end of the category/sub-category text var finalPositionSubCategory = galleryTitleText.search(" galleries"); if( finalPositionSubCategory >= 0 ) galleryTitleText = galleryTitleText.substr( 0, finalPositionSubCategory ); } document.title = baseTitle + separator + galleryTitleText; } else // Not Gallery, Category, or Subcategory { // Set title on homepage document.title = baseTitle; }}
And I put this in the Body Tag section
<body onload="RelevantTitle();">
But it wouldn't accept my changes.
What am I doing wrong?