FAQtoid

MikeFried · Jan-12-2006, 03:48 AM #1

***************
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 Code:


			
<script language="javascript">document.title="YOUR PAGE TITLE INFO"</script>

****************

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.

Code:

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

Code:

&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 · Jan-12-2006, 03:52 AM #2

Oops - Firefox...

Very cool though :)

Andy · Jan-12-2006, 03:53 AM #3

Safari, looks good

MikeFried · Jan-12-2006, 04:44 AM #4

Quote:

Originally Posted by Andy

Very cool though :)

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

MikeFried · Jan-12-2006, 04:52 AM #5

Quote:

Originally Posted by Andy

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 · Jan-12-2006, 04:52 AM #6

Quote:

Originally Posted by MikeFried

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

FF 1.5 Mac.

Andy · Jan-12-2006, 04:54 AM #7

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 · Jan-12-2006, 10:04 AM #8

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:

Code:

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 · Jan-12-2006, 01:05 PM #9

Quote:

Originally Posted by Gary Glass

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):

Quote:

Originally Posted by Gary Glass

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

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 · Jan-12-2006, 01:35 PM #10

Quote:

Originally Posted by MikeFried

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:

Code:

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

Quote:

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 · Jan-13-2006, 01:32 AM #11

Quote:

Originally Posted by Gary Glass

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 · Jan-13-2006, 04:28 AM #12

Quote:

Originally Posted by MikeFried

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 · Jan-15-2006, 11:18 AM #13

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...39508474/Large

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

Code:

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 · Jan-16-2006, 08:58 AM #14

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:

Code:

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 · Jan-16-2006, 11:50 PM #15

Quote:

Originally Posted by Gary Glass

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 · Jan-17-2006, 05:30 AM #16

Quote:

Originally Posted by MikeFried

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.

Quote:

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.

Quote:

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).

Quote:

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.

Quote:

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?

Quote:

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.

Quote:

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 · Jan-17-2006, 11:48 AM #17

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

asd · Jan-17-2006, 07:48 PM #18

Quote:

Originally Posted by Gary Glass

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*** · Jan-18-2006, 05:17 AM #19

Quote:

Originally Posted by Gary Glass

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 · Jan-18-2006, 05:25 AM #20

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!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FAQtoid

Dgrin Challenges

Need some help with Accessories?

Tutorials

The Hot Seat

Africa!

SmugMug How To:

SmugMug News:

SmugMug Status

Jan-12-2006, 03:48 AM #1
MikeFried ^OP Technology Tamer Join Date: Jan 2006 Location: Woodinville, WA Posts: 32	Get rid of the same boring title on every page... ************* 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 Code: `<script language="javascript">document.title="YOUR PAGE TITLE INFO"</script>` ************ 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. Code: document.title = "My Site's Title"; function RelevantTitle() { var baseTitle = "My Site's Title"; 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: Code: <body onload="RelevantTitle();"> 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 Last edited by Andy; Jan-29-2006 at 04:07 PM. Reason: Cleaned up the script a little, hopefully fixed the issue Andy discovered in a clean way.

Jan-12-2006, 03:52 AM #2
Andy panasonikon Join Date: Dec 2003 Location: New York Posts: 59,971	Oops - Firefox... Very cool though :) Attached Images __________________ Andy Moon River Photography • Workshops • Google+ • Facebook • Twitter

Jan-12-2006, 03:53 AM #3
Andy panasonikon Join Date: Dec 2003 Location: New York Posts: 59,971	Safari, looks good Attached Images __________________ Andy Moon River Photography • Workshops • Google+ • Facebook • Twitter

Jan-12-2006, 04:54 AM #7
Andy panasonikon Join Date: Dec 2003 Location: New York Posts: 59,971	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 __________________ Andy Moon River Photography • Workshops • Google+ • Facebook • Twitter

Jan-17-2006, 11:48 AM #17
Gary Glass Picture Reality Join Date: Sep 2005 Location: Virginia Posts: 741	FYI. I was finally able to push the latest to my site, if you want to see what it does. __________________ [FONT="Garamond"]Gary Glass[/FONT] [FONT="Tahoma"]ShutterGlass.com[/FONT] [FONT="Tahoma"]OnlyBegotten.com[/FONT]

Jan-18-2006, 05:25 AM #20
Gary Glass Picture Reality Join Date: Sep 2005 Location: Virginia Posts: 741	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! __________________ [FONT="Garamond"]Gary Glass[/FONT] [FONT="Tahoma"]ShutterGlass.com[/FONT] [FONT="Tahoma"]OnlyBegotten.com[/FONT]