Get rid of the same boring title on every page...

1235

Comments

  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 5, 2009
    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.
  • CharlesSACharlesSA Registered Users Posts: 63 Big grins
    edited January 5, 2009
    Gary Glass wrote:
    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 wellthumb.gif

    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!
    My website: HERE
  • digitalpinsdigitalpins Registered Users Posts: 448 Major grins
    edited January 5, 2009
    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.

    449500190_QHwFr-M.jpg

    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

    Gary Glass wrote:
    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;
    }
    
    www.lamontphotography.com
    Canon 60D
    Canon Rebel XTi (400)
    Canon 10-22mm, Canon 50mm f/1.8 II
    MacBook, MacPro
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 5, 2009
    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.
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 5, 2009
    Does this make sense?

    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?
  • digitalpinsdigitalpins Registered Users Posts: 448 Major grins
    edited January 5, 2009
    ok thanks for getting back to me I will play around with it and try to figure it out..

    clap.gif
    Thanks again
    Ryan
    www.lamontphotography.com
    Canon 60D
    Canon Rebel XTi (400)
    Canon 10-22mm, Canon 50mm f/1.8 II
    MacBook, MacPro
  • CharlesSACharlesSA Registered Users Posts: 63 Big grins
    edited January 6, 2009
    Gary Glass wrote:
    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.

    Thanks!!
    My website: HERE
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 6, 2009
    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.
  • jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited January 6, 2009
    Gary Glass wrote:
    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...
    --John
    HomepagePopular
    JFriend's javascript customizationsSecrets for getting fast answers on Dgrin
    Always include a link to your site when posting a question
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 7, 2009
    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.

    And thanks for the kind remarks on the code.
  • CharlesSACharlesSA Registered Users Posts: 63 Big grins
    edited January 8, 2009
    Hi Gary

    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?
    My website: HERE
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 8, 2009
    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?

    That bit should be pretty easy.
  • Mohamed.GhuloomMohamed.Ghuloom Registered Users Posts: 305 Major grins
    edited January 27, 2009
    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);
    Mohamed Photos
    Give a Message
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 27, 2009
    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.
  • jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited January 27, 2009
    Gary Glass wrote:
    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.
    --John
    HomepagePopular
    JFriend's javascript customizationsSecrets for getting fast answers on Dgrin
    Always include a link to your site when posting a question
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 27, 2009
  • jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited January 27, 2009
    Gary Glass wrote:

    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.
    --John
    HomepagePopular
    JFriend's javascript customizationsSecrets for getting fast answers on Dgrin
    Always include a link to your site when posting a question
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited January 27, 2009
    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.
  • jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited January 27, 2009
    Gary Glass wrote:
    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.
    --John
    HomepagePopular
    JFriend's javascript customizationsSecrets for getting fast answers on Dgrin
    Always include a link to your site when posting a question
  • Tomkirk23Tomkirk23 Registered Users Posts: 55 Big grins
    edited February 1, 2009
    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.


    Thanks,

    Tom K.
  • PixelPiePixelPie Registered Users Posts: 22 Big grins
    edited February 5, 2009
    Tomkirk23 wrote:
    Hi -

    This approach is simpler and a bit more manual, but provides great flexibility.... This enables you to specifically title any page.

    Thanks,

    Tom K.

    Wow Tom. That works like a charm. Very easy to implement. Thank you!
    PixelPie Photography
    Weddings | Portraits
    Site & Blog
    heather@pixelpiephotos.com
  • eccentricrealityeccentricreality Registered Users Posts: 15 Big grins
    edited February 21, 2009
    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
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited February 28, 2009
    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.
  • NixieleeNixielee Registered Users Posts: 8 Beginner grinner
    edited March 4, 2009
    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

    Many Thanks!


    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);
  • Ryan ArmbrustRyan Armbrust Registered Users Posts: 329 Major grins
    edited March 6, 2009
    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?

    Thanks
  • rachael_ritchierachael_ritchie Registered Users Posts: 24 Big grins
    edited April 17, 2009
    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!
    ne_nau.gif

    Thank you in advance!
    Rachael Ritchie

    http://www.rachaelritchiephotography.com
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited April 17, 2009
    It doesn't look like you're actually invoking the ContextualizeTitle method anywhere. There's different ways to do it:

    You can add it to your body tag:

    onload="ContextualizeTitle();"

    You can add an event handler anywhere in your javascript:

    addEvent(window, "load", ContextualizeTitle);
  • Big_DBig_D Registered Users Posts: 12 Big grins
    edited May 18, 2009
    I am new here and in need of some help
    ne_nau.gifwings.gif
    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,bowdown.gif
  • Gary GlassGary Glass Registered Users Posts: 744 Major grins
    edited May 19, 2009
    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.
  • blackshadowblackshadow Registered Users Posts: 79 Big grins
    edited August 7, 2009
    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; }}

    And I put this in the Body Tag section

    <body onload="RelevantTitle();">

    But it wouldn't accept my changes.

    What am I doing wrong?
Sign In or Register to comment.