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

MikeFried · January 12, 2006

***************
MOD Edit: Adding in the Dummy's way of doing this - same title for EVERY PAGE:
put this in your HEAD TAG section of your customization:
[PHP]<script language="javascript">document.title="YOUR PAGE TITLE INFO"</script> [/PHP]
****************

A little while ago, I wrote, wondering how to do a number of things. Well, today, I share the fruits of my labor with you.

The story is that I was navigating my site, touching up a keyword here and a keyword there on a photo in this gallery and a photo in that gallery, and after switching pages a bunch of times, I hit the back button to look at where I had been... "Mike Fried's Photography, Mike Fried's Photography, Mike Fried's Photography, etc". I had a new mission. Whereas before I had learned the Zen of changing the title in a single line of JavaScript, now I needed to master the Zen of changing the title with some DHTML (Dynamic HTML) to make it appropriate to the page the user was viewing.

So I grabbed a web search, and looked around at the source to my site in my handy second web browser (I use Firefox and IE -- IE was logged into my site so I could work on the customization and I reload the site logged out in Firefox at the same time to view the results and search through source pages for interesting things to work with). After about a half hour of searching, learning, and tweaking, I had achieved my goal.

Here's how you make the title follow your current page:
1) In the co-branding section of your site, insert the following code into the JavaScript (Replace My Site's Title with something more appropriate):

* Note: This has been updated to attempt to address some issues below in this thread.

document.title = "[B]My Site's Title[/B]";
function RelevantTitle()
{
   var baseTitle = "[B]My Site's Title[/B]";
   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;
   }
}

2) In the BODY tag, add:

&lt;body onload="RelevantTitle();"&gt;

Now after your page finishes loading, the title will add the appropriate indication of your gallery title, category name, or sub-category name. Nothing will be added on your home page, or other kinds of pages (keyword, etc) -- that is an exercise I leave to the reader who wishes it. I will likely update the script on my site to do this in the near future.

Now if only I didn't have to spend an hour re-classifying all my photos last night because I only just figured out how to get a space in a keyword (use double quotes), I would have uploaded more than one new gallery from my backlog of about 60GB of photos and almost 6 years... I feel like I should install the C# SDK on my Media Center PC this weekend and write some individual photo keyword entering code for send to smugmug...
-Mike "I like to tinker with my new smugmug account" Fried

Andy · January 12, 2006

Oops - Firefox...

Very cool though

Andy · January 12, 2006

Safari, looks good

MikeFried · January 12, 2006

Andy wrote:

Very cool though

Interesting... What version of FF did you get that with?
I get this on 1.5 for PC:

MikeFried · January 12, 2006

Andy wrote:

Safari, looks good

Hrm... It looks like for Safari, I'm going to have to make some extra modifications (editing original post with new code).

Thanks for the screenshots.

Andy · January 12, 2006

MikeFried wrote:

Interesting... What version of FF did you get that with?
I get this on 1.5 for PC:

FF 1.5 Mac.

Andy · January 12, 2006

BTW, your Galapogos trip (VERY COOL PICS) is screaming for this sort of dealie:

http://jennyc.smugmug.com/gallery/1003113

http://friedfamilyphoto.smugmug.com/Vacation/141950

Gary Glass · January 12, 2006

Great idea, MikeFried! I've taken the liberty of doing a little debugging on your script. Fixed the FF1.5 issue. Here's my version:

function RelevantTitle() {
    var separator = " : ";
    var smugmugSuffix = " - powered by smugmug";
    var insertAt = document.title.indexOf(smugmugSuffix);
    var newTitle = document.title;
    var albumTitle = document.getElementById("albumTitle");
    var galleryTitle = document.getElementById("galleryTitle");
    if(albumTitle && albumTitle.innerHTML) {
        var newText = separator + Trim(albumTitle.innerHTML);
        newTitle = InsertString(newTitle, newText, insertAt);
    }
    else if(galleryTitle && galleryTitle.innerHTML) {
        var galleryTitleText = Trim(galleryTitle.innerHTML);
        var index = galleryTitleText.search(" sub-categories");
        if(index > -1) {
            // Strip " sub-categories" off the end of the text
            galleryTitleText = galleryTitleText.substr(0, index);
        } else {
            // Strip " galleries" off the end of the text
            index = galleryTitleText.search(" galleries");
            if(index > -1) {
                galleryTitleText = galleryTitleText.substr(0, index);
            }
        }
        newText = separator + galleryTitleText;
        newTitle = InsertString(newTitle, newText, insertAt);
    }
    document.title = newTitle;
}

function InsertString(text, insertText, index) {
    var newText = text.substring(0, index) + insertText + text.substring(index);
    return newText;
}

function Trim(text) {
    var regexp = /\s+/g;
    text = text.replace(regexp, "");
    return text;
}

MikeFried · January 12, 2006

Gary Glass wrote:

Great idea, MikeFried! I've taken the liberty of doing a little debugging on your script. Fixed the FF1.5 issue. Here's my version:

It's a little weird that FF on Mac had some extra stuff in the inner HTML (and I'm not seeing this on my machine running FF, so I don't know what's different with mine). Just out of curiosity, I'm having a little trouble understanding your regular expression (found a reference here, which explains the JavaScript syntax extras here):

Gary Glass wrote:

function Trim(text) {
var regexp = /\s+/g;
text = text.replace(regexp, "");
return text;
}

I assume that "/\s+/g" is the string to search (It's unusual for me to not see quotes around a string in script - is that the standard for regular expressions?). I think I get that \s+ is to search for one or more whitespace characters, and the /(exp)/g means not to stop searching/replacing the expression with the first match found, but rather to do it globally. What I don't get is how you can find anything beginning with a space in the text after removing all the white space. Also, wouldn't this remove spaces in the middle of a gallery or category title? Maybe I'm missing something. I haven't used regular expressions since college...
Thanks,
Mike

Gary Glass · January 12, 2006

MikeFried wrote:

What I don't get is how you can find anything beginning with a space in the text after removing all the white space. Also, wouldn't this remove spaces in the middle of a gallery or category title? Maybe I'm missing something.

You're absolutely right. I hadn't even thought of that. Here's the fix:

function Trim(text) {
    var regexp = /^\s+|\s+$/g;
    text = text.replace(regexp, "");
    return text;
}

I assume that "/\s+/g" is the string to search (It's unusual for me to not see quotes around a string in script - is that the standard for regular expressions?).

Yeah, but it's not a string, it's a regular expression object. What you're doing is initializing a regex object with a pattern match definition. The forward slashes delimit the pattern. The 'g' is an instruction on how to apply the pattern. You then pass that regex object to the string.replace method.

MikeFried · January 13, 2006

Gary Glass wrote:

You're absolutely right. I hadn't even thought of that.

You know, I looked at it a little more and I can do one better than using complicated RegExp to filter down the text. Instead of getting the text from element.innerHTML, I just used element.textContent. No filtering off any strange tags was required. I'm still not convinced that the regexp you provided would work. Did you test it? I only tested my new code on IE6 for Windows, and FF 1.5 for Windows. Hopefully Andy can tell me if the new code resolves the issue on the Mac.
-Mike

Gary Glass · January 13, 2006

MikeFried wrote:

You know, I looked at it a little more and I can do one better than using complicated RegExp to filter down the text. Instead of getting the text from element.innerHTML, I just used element.textContent. No filtering off any strange tags was required. I'm still not convinced that the regexp you provided would work. Did you test it?

It works. I tested it on IE, FF1.5, and Opera on WindowsXP. Your original script was failing for me on FF1.5 on XP.

As regex goes, this one is really simple. Using textContent might work just as well. It depends on how textContent handles leading and trailing whitespace. What I was think happening is that there was a linebreak and other whitespace within the tag, which was screwing up the titlebar in FF. So you'll want to test your textContent idea against that scenario. Let me know how it works!

In any case, the Trim method is handy tool to keep in your javascript toolbox. (It'd be even more elegant as an extension to the string prototype.)

Michael Landry · January 15, 2006

Hi Gang - this code is awesome, and almost works! I found one little bug, but I'm not a Javascript expert to fix it... When I click down into a gallery, then click on a photo so that the page only shows that one photo, the title bar gets filled with HTML code. See this link for an example:

http://www.michaellandry.com/gallery/874218/1/39508474/Large

Here is the code as it's currently running in my Control Panel:

function RelevantTitle() {
    var separator = " : ";
    var smugmugSuffix = " - powered by smugmug";
    var insertAt = document.title.indexOf(smugmugSuffix);
    var newTitle = document.title;
    var albumTitle = document.getElementById("albumTitle");
    var galleryTitle = document.getElementById("galleryTitle");
    if(albumTitle && albumTitle.innerHTML) {
        var newText = separator + Trim(albumTitle.innerHTML);
        newTitle = InsertString(newTitle, newText, insertAt);
    }
    else if(galleryTitle && galleryTitle.innerHTML) {
        var galleryTitleText = Trim(galleryTitle.innerHTML);
        var index = galleryTitleText.search(" sub-categories");
        if(index > -1) {
            // Strip " sub-categories" off the end of the text
            galleryTitleText = galleryTitleText.substr(0, index);
        } else {
            // Strip " galleries" off the end of the text
            index = galleryTitleText.search(" galleries");
            if(index > -1) {
                galleryTitleText = galleryTitleText.substr(0, index);
            }
        }
        newText = separator + galleryTitleText;
        newTitle = InsertString(newTitle, newText, insertAt);
    }
    document.title = newTitle;
}
function InsertString(text, insertText, index) {
    var newText = text.substring(0, index) + insertText + text.substring(index);
    return newText;
}
function Trim(text) {
    var regexp = /^\s+|\s+$/g;
    text = text.replace(regexp, "");
    return text;
}

Can we get a fix for this?? That would be great! Thanks again for all your work so far...

Michael

Gary Glass · January 16, 2006

Thanks for the bug check! I took the opportunity to make some more substantive changes to the code. I didn't like what it did on the home page, so I took it out. The home page now gets its default title. Photo pages show the gallery title followed by the photo title. Here's the new version:

function ContextualizeTitle() {
	var separator = " : ";
	var smugmugSuffix = " - powered by smugmug";
	var insertAt = document.title.indexOf(smugmugSuffix);
	var newTitle = document.title;
	var newText = null;
	if(!IsHomePage()) {
		// add photo title
		var photoTitleText = GetPhotoCaption();
		if(photoTitleText.length > 0) {
			newText = separator + photoTitleText;
			newTitle = InsertString(newTitle, newText, insertAt);
		}
		// add album title
		var albumTitle = document.getElementById("albumTitle");
		if(albumTitle) {
			var albumTitleText = GetTextContent(albumTitle);
			if(albumTitleText.length > 0) {
				newText = separator + albumTitleText;
				newTitle = InsertString(newTitle, newText, insertAt);
			}
		} else {
			// add gallery title
			var galleryTitle = document.getElementById("galleryTitle");
			if(galleryTitle) {
				var galleryTitleText = GetTextContent(galleryTitle);
				if(galleryTitleText.length > 0) {
					var index = galleryTitleText.indexOf(" galleries");
					if(index > -1) {
						galleryTitleText = galleryTitleText.substr(0, index);
					}
					newText = separator + galleryTitleText;
					newTitle = InsertString(newTitle, newText, insertAt);
				}
			}
		}
		document.title = newTitle;
	}
}

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 InsertString(text, insertText, index) {
	var newText = text.substring(0, index) + insertText + text.substring(index);
	return newText;
}

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;
}

MikeFried · January 17, 2006

Some things are broken...

Gary Glass wrote:

I took the opportunity to make some more substantive changes to the code.

In IE, nodeValue doesn't do the right thing. You want innerText in IE instead of textContent, and you don't need to recurse to get the text. Take a look at this page with IE, and look at the title bar. Also, the script you provided assumes that the user set something in their co-branding page for their title, and manipulates it, whereas mine always obliterates it. I found another way to get the title for the photo, and I noticed that your regular expression would remove either the before part or the after part of the white space (not sure about before AND after, my guess is the g option would make it do both, but I separated it into two replaces just in case).

Anyway, I've incorporated your recent changes, fixed these issues, tested with IE and FF, and changed my coding style slightly. I'm curious how we might add keywords, maybe by parsing the document's URL, but that will have to wait for another day...

Attached is part of the code from my site, made more suitable for a sample (I've given up on this code formatted in the text editor thing).
-Mike

Gary Glass · January 17, 2006

MikeFried wrote:

In IE, nodeValue doesn't do the right thing. You want innerText in IE instead of textContent,

Actually, I had innerText before nodeValue and forgot to change it back. Though, because of the recursion, I doubt it makes any difference.

and you don't need to recurse to get the text.

I recurse because I don't like the way textContent/innerText extracts the text: they give you a concatentation of the text of the current node and all the text of all its child nodes.

Take a look at this page with IE, and look at the title bar.

Yeah, that's the very problem that the posted code fixes. However, I haven't had a chance to push that code to my own site yet (I did it on my dev machine).

Also, the script you provided assumes that the user set something in their co-branding page for their title, and manipulates it, whereas mine always obliterates it.

Mine starts with whatever document title the page has, and appends the gallery name and/or album name and/or photo name to it.

I found another way to get the title for the photo,

Not sure why you're doing it this other way. What's your thinking there?

and I noticed that your regular expression would remove either the before part or the after part of the white space (not sure about before AND after, my guess is the g option would make it do both, but I separated it into two replaces just in case).

It does both. The "or" pipe in the middle & the /g instruction in the end assure that.

Anyway, I've incorporated your recent changes, fixed these issues, tested with IE and FF, and changed my coding style slightly.

You're still doing a few things that, if you were one of my developers, I'd make you change!

Gary Glass · January 17, 2006

FYI. I was finally able to push the latest to my site, if you want to see what it does.

asd · January 17, 2006

Gary Glass wrote:

FYI. I was finally able to push the latest to my site, if you want to see what it does.

Thank you both for working on this - I love the script and it's fixed, at least for users (not bots), a little thing that's nagged me for awhile.

:

bwg · January 18, 2006

Gary Glass wrote:

FYI. I was finally able to push the latest to my site, if you want to see what it does.

ok Gary...insanity coming at you:

firefox 1.5 - logged in
firefox 1.5 - logged out
IE 6 - logged in
IE 6 - logged out

all on winxp sp2

Gary Glass · January 18, 2006

Dang! Why you making me work so hard! Hey, do me a favor, post the URLs of those pages, and I'll check into it. Thanks, Big Guy!

bwg · January 18, 2006

Gary Glass wrote:

Dang! Why you making me work so hard! Hey, do me a favor, post the URLs of those pages, and I'll check into it. Thanks, Big Guy!

the gallery in the screenshot is:
http://bigwebguy.smugmug.com/gallery/950478

but it happens in all my galleries...i've got your script running site-wide.

the gallery with the screenshots is:
http://bigwebguy.smugmug.com/gallery/668526

Gary Glass · January 18, 2006

bigwebguy wrote:

but it happens in all my galleries...i've got your script running site-wide.

Hey, can you IM me so I can ask you some questions about what's going on there? My IM's are in my profile.

cwphotos · January 18, 2006

It doesnt seem to work on my site. Can someone take a look and see what I did wrong?

Gary Glass · January 18, 2006

bigwebguy wrote:

the gallery in the screenshot is:
http://bigwebguy.smugmug.com/gallery/950478

but it happens in all my galleries...i've got your script running site-wide.

the gallery with the screenshots is:
http://bigwebguy.smugmug.com/gallery/668526

I figured out what was going on. (I think Mr Fried had tried to tell me this in a previous post, and I didn't get what he was saying. My bad!)

Here's the deal: this is only going to work if you customize your title on the co-branding screen. If you don't have a customized title already, you don't need this code because you should already have a contextualized (i.e., breadcrumbed) title. I've made a few tweaks to the code anyway. Here's the latest:

var titleSettings = new Array();
/*
--------------------------------------------------
	customize page title settings
--------------------------------------------------
*/
titleSettings.separator   = ": "; // text to insert between parts of title
titleSettings.maxLength   = -1;   // limits length of title (-1 == no limit)
titleSettings.doPhotos    = true; // true == append photo captions
titleSettings.doAlbums    = true; // true == append album names
titleSettings.doGalleries = true; // true == append gallery names

function ContextualizeTitle() {
	var smugmugSuffix = " - powered by smugmug";
	var insertAt = document.title.indexOf(smugmugSuffix);
	var newTitle = document.title;
	var newText = null;
	if(!IsHomePage()) {
		// add photo title
		if(titleSettings.doPhotos) {
			var photoTitleText = GetPhotoCaption();
			if(photoTitleText.length > 0) {
				newText = titleSettings.separator + photoTitleText;
				newTitle = InsertString(newTitle, newText, insertAt);
			}
		}
		// add album title
		if(titleSettings.doAlbums) {
			var albumTitle = document.getElementById("albumTitle");
			if(albumTitle) {
				var albumTitleText = GetTextContent(albumTitle);
				if(albumTitleText.length > 0) {
					newText = titleSettings.separator + albumTitleText;
					newTitle = InsertString(newTitle, newText, insertAt);
				}
			}
		}
		// add gallery title
		if(titleSettings.doGalleries) {
			var galleryTitle = document.getElementById("galleryTitle");
			if(galleryTitle) {
				var galleryTitleText = GetTextContent(galleryTitle);
				if(galleryTitleText.length > 0) {
					var index = galleryTitleText.indexOf(" galleries");
					if(index > -1) {
						galleryTitleText = galleryTitleText.substr(0, index);
					}
					newText = titleSettings.separator + galleryTitleText;
					newTitle = InsertString(newTitle, newText, insertAt);
				}
			}
		}
		if(titleSettings.maxLength > -1) {
			newTitle = newTitle.substr(0, titleSettings.maxLength);
		}
		document.title = newTitle;
	}
}

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 InsertString(text, insertText, index) {
	var newText = "";
	if(index > -1 && index < text.length) {
		newText = text.substring(0, index) + insertText + text.substring(index);
	} else {
		newText = text + insertText;
	}
	return newText;
}

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;
}

Gary Glass · January 18, 2006

cwphotos wrote:

It doesnt seem to work on my site. Can someone take a look and see what I did wrong?

I don't see the code on your site at all, cw!

bwg · January 18, 2006

Gary Glass wrote:

I figured out what was going on. (I think Mr Fried had tried to tell me this in a previous post, and I didn't get what he was saying. My bad!)

Here's the deal: this is only going to work if you customize your title on the co-branding screen. If you don't have a customized title already, you don't need this code because you should already have a contextualized (i.e., breadcrumbed) title. I've made a few tweaks to the code anyway. Here's the latest:

yeah, uh, i knew that. i was just testing you...yeah, that's it.

i'll check things out and see if i like your titles better than the default ones...thanks for all the hard work Gary.

MikeFried · January 18, 2006

Gary Glass wrote:

I figured out what was going on. (I think Mr Fried had tried to tell me this in a previous post, and I didn't get what he was saying. My bad!)

Glad you figured it out before I got back to this thread.

Once I noticed that most of the smugmug founders had decent titles on their albums set without client-side script, I realized that turning off title customization made a difference. Since I had been blowing it away before, it didn't bother me to continue to do so, but I liked that the server side script populated the album/photo title into the pages, and "smugmug - {my name} ... {album name} : {photo name}" was preferable to me over "{my custom title} - powered by smumug" when considering what would be displayed when JavaScript is disabled.

Also, the behavior of using document.title = outside of the function calls means that when the page is shown in IE or FF, it already has the customized title, and then the script builds the rest of it - less text changes by being removed/replaced, which distracts from the script slightly less.

Gary Glass wrote:

If you don't have a customized title already, you don't need this code because you should already have a contextualized (i.e., breadcrumbed) title.

Except of course category and subcategory pages (I eventually will get around to cracking keywords and putting them in the title for keyword pages, too).
-Mike

Michael Landry · January 22, 2006

Mine stopped working...

Gary, thanks for all your help! I posted your latest code, and it all stopped working for me...

http://michaellandry.smugmug.com

I pasted your code into the JavaScript customization section, I have a Page Title put in (Michael Landry Photography), and the Body tag calls RelevantTitle: per the instructions on the first page of this thread. When I go to a page, I see the title blink, so I assume something is happening...?

Any ideas for me? Again, you guys rock!! Thanks!

Michael

FormerLurker · January 22, 2006

Mine isn't working either, although I'm not sure whether it's because of the CSS or the body tag. I already had an onload in my body tag to delete the hover. Is it possible to add a second? If so, what is the correct syntax? Thanks.

asd · January 22, 2006

Michael Landry wrote:

Gary, thanks for all your help! I posted your latest code, and it all stopped working for me...

http://michaellandry.smugmug.com

I pasted your code into the JavaScript customization section, I have a Page Title put in (Michael Landry Photography), and the Body tag calls RelevantTitle: per the instructions on the first page of this thread. When I go to a page, I see the title blink, so I assume something is happening...?

Any ideas for me? Again, you guys rock!! Thanks!

Michael

You're running Gary Glass's version so you need to be calling ContextualizeTitle(), not RelevantTitle().

asd · January 23, 2006

FormerLurker wrote:

Mine isn't working either, although I'm not sure whether it's because of the CSS or the body tag. I already had an onload in my body tag to delete the hover. Is it possible to add a second? If so, what is the correct syntax? Thanks.

I'm not sure what your site is so I can't look, but it sounds like you just aren't calling the ContextualizeTitle function since your onload handler is already taken.

I use a neat little loader that I got from one of jfriend's posts on here. In essence, you specify this function as your onload handler and then dump into it calls to all the other functions you want run.

&lt;body onload="OnLoadHandler();"&gt;

function OnLoadHandler() {
	AddReferralCode();
	ContextualizeTitle();
}

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

Comments