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

2456

Comments

  • FormerLurkerFormerLurker Registered Users Posts: 82 Big grins
    edited January 23, 2006
    That loader solved it -- thanks!
  • bwgbwg Registered Users, Retired Mod Posts: 2,119 SmugMug Employee
    edited January 23, 2006
    asd wrote:
    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.
    digging around the javascript that smugmug puts in every page, i found a nifty little function that i've actually already been using myself.

    the addEvent(obj, event, handler) function will add an event handler to a given objects event stack.

    so for example, addEvent(window, "load", ContextualizeTitle); will add the ContextualizeTitle function to the window.onload event. Your code would now look like:
    addEvent(window, "load", AddReferralCode);
    addEvent(window, "load", ContextualizeTitle);
    
    you dont need to put anything in the body tag or have any extra javascript wrapper functions. It's the ultimate in separation of behavior from content.
    Pedal faster
  • FormerLurkerFormerLurker Registered Users Posts: 82 Big grins
    edited January 23, 2006
    Works great - thanks!
    Just updated mine to include the event handler and it's working great!
  • devbobodevbobo Registered Users, Retired Mod Posts: 4,339 SmugMug Employee
    edited January 24, 2006
    Rework the code if anyone is interested, removed all the indexof code in place of regular expressions..
    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 re1 = /([\s\S]*)( - powered by smugmug)/;
      var re2 = /([\s\S]*) (galleries|sub-categories)/;
      var newTitle = document.title;
      var newText = null;
      if(!IsHomePage()) 
      {
        // add gallery title
        if(titleSettings.doGalleries)
        {
          var galleryTitle = document.getElementById("galleryTitle");
          if(galleryTitle)
          {
            var galleryTitleText = GetTextContent(galleryTitle);
            if(galleryTitleText.length > 0)
            {
              galleryTitle = galleryTitle.replace(re2, "$1")
    
              newText = titleSettings.separator + galleryTitle;
              newTitle = newTitle.replace(re1, "$1" + newText + "$2");
            }
          }
        }
    
        // 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 = newTitle.replace(re1, "$1" + newText + "$2");
            }
          }
        }
    
        // add photo title
        if(titleSettings.doPhotos)
        {
          var photoTitleText = GetPhotoCaption();
          if(photoTitleText.length > 0)
          {
            newText = titleSettings.separator + photoTitleText;
            newTitle = newTitle.replace(re1, "$1" + newText + "$2");
          }
        }
    
        if(titleSettings.maxLength > -1)
          newTitle = newTitle.substr(0, titleSettings.maxLength);
    
        document.title = newTitle;
      }
    }
    
    function GetPhotoCaption() {
      var photoTitle = document.getElementById("caption_bottom");
    
      if(!photoTitle)
        photoTitle = document.getElementById("caption_top");
    
      if(!photoTitle)
        return "";
             
      return GetTextContent(photoTitle);
    }
    
    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 classStr = document.body.className;
      var re = /homepage /;
    
      if (!classStr)
        return false;
    
      return re.test(classStr);
    }
    
    David Parry
    SmugMug API Developer
    My Photos
  • MikeFriedMikeFried Registered Users Posts: 33 Big grins
    edited February 1, 2006
    I just updated my title replacing code (tested on IE 6 and fixed a bug in Netscape 7.2 and I _assume_ it still works on Firefox 1.5 and other browsers but I haven't tested the new code on Firefox as of yet). I have some hardcoded string values in there to do some of the hacky magic. Those of you who have been following along and want to play with it, feel free. :)

    You can get just the relevant code from the attachment here.

    The old cases of category/sub-category, album, and album with photo having a caption still work. Note that I remove the normal title customization from my cobranding page, and do all title customization via this script. I find that in the absence of javascript support on a browser, I like smugmug's "uncustomized" titles better than the same title on every page.

    The new code adds a few special cases (some of which were made possible by the recent smugmug update). Here are examples of the new kinds of pages that my latest code handles:

    Homepage
    http://friedfamilyphoto.smugmug.com/

    Guestbook gallery (yes my gallery needs more work...)
    http://friedfamilyphoto.smugmug.com/gallery/1128948

    All keywords page (I need to do more work to format this page better, too, now that I can...)
    http://friedfamilyphoto.smugmug.com/keyword/

    Single keyword
    http://friedfamilyphoto.smugmug.com/keyword/mike+fried

    Combined keywords
    http://friedfamilyphoto.smugmug.com/keyword/liz%20fried-mike%20fried

    Single image (with caption set)
    http://friedfamilyphoto.smugmug.com/keyword/darwin%20finch/1/50623895/Small

    Single image (without caption set I default to "untitled photo")
    http://friedfamilyphoto.smugmug.com/keyword/darwin%20finch/1/50623755/Small

    I'm considering making the keyword pages captalize all keyword words in the title because most of my keywords are proper nouns (people, species).

    With these latest changes, it is a lot easier for me to navigate around my site and look at the breadcrumb trail in the back button dropdown. My site is nowhere near as complete an experience as other pros on this board, but I think it's ok for my first month.
    -Mike
  • MikeFriedMikeFried Registered Users Posts: 33 Big grins
    edited February 1, 2006
    It looks like I might need to add code to handle the date range pages... Sheesh, there are a lot of different kinds of pages on smugmug.
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 2, 2006
    Awesome hack! Can the gallery title be put in place of the photo caption with this hack?

    On my site, a link such as http://www.huntsvillecarscene.com/calendar.php?do=getinfo&e=3&day=2006-2-1&c=1 will have the event title in the bar. I plan to use the event title as the gallery title. So if the bar on smugmug can be changed as well--viola! It will make it even more seamless when people go from my site to my smugmug site.
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • MikeFriedMikeFried Registered Users Posts: 33 Big grins
    edited February 2, 2006
    SamirD wrote:
    Awesome hack! Can the gallery title be put in place of the photo caption with this hack?

    Anything is possible. You would just need to rewrite the javascript in such a way as to change the photo caption instead of changing the title. Since it's not purely title related, I would put it in a different block of code. Just about anything is editable on a page with the right bits of script. I think it would be nice to have access to be able to customize the underlying scripts that generate the HTML in the first place, but I realize that smugmug has an interest in keeping those under lock and key regardless of how trivial they would be to reverse engineer or add scripting there. But if you didn't know what you were doing, having that kind of access could be bad.
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 2, 2006
    devbobo wrote:
    Rework the code if anyone is interested, removed all the indexof code in place of regular expressions..
    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 re1 = /([\s\S]*)( - powered by smugmug)/;
      var re2 = /([\s\S]*) (galleries|sub-categories)/;
      var newTitle = document.title;
      var newText = null;
      if(!IsHomePage()) 
      {
        // add gallery title
        if(titleSettings.doGalleries)
        {
          var galleryTitle = document.getElementById("galleryTitle");
          if(galleryTitle)
          {
            var galleryTitleText = GetTextContent(galleryTitle);
            if(galleryTitleText.length > 0)
            {
              galleryTitle = galleryTitle.replace(re2, "$1")
    
              newText = titleSettings.separator + galleryTitle;
              newTitle = newTitle.replace(re1, "$1" + newText + "$2");
            }
          }
        }
    
        // 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 = newTitle.replace(re1, "$1" + newText + "$2");
            }
          }
        }
    
        // add photo title
        if(titleSettings.doPhotos)
        {
          var photoTitleText = GetPhotoCaption();
          if(photoTitleText.length > 0)
          {
            newText = titleSettings.separator + photoTitleText;
            newTitle = newTitle.replace(re1, "$1" + newText + "$2");
          }
        }
    
        if(titleSettings.maxLength > -1)
          newTitle = newTitle.substr(0, titleSettings.maxLength);
    
        document.title = newTitle;
      }
    }
    
    function GetPhotoCaption() {
      var photoTitle = document.getElementById("caption_bottom");
    
      if(!photoTitle)
        photoTitle = document.getElementById("caption_top");
    
      if(!photoTitle)
        return "";
             
      return GetTextContent(photoTitle);
    }
    
    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 classStr = document.body.className;
      var re = /homepage /;
    
      if (!classStr)
        return false;
    
      return re.test(classStr);
    }
    
    I think I'll be able to use this code (thanks devbobo!) and simply change the "true" to "false" on gallery and photos. This way, it should just append the album name.
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 2, 2006
    SamirD wrote:
    I think I'll be able to use this code (thanks devbobo!) and simply change the "true" to "false" on gallery and photos. This way, it should just append the album name.
    Well, I tried it just as it was written and nothing. Suspected my optional title name in the customize screen was interfering, so I deleted that--nothing. (Strangely, the title was still there too.) I think because I have the breadcrumb and gallery name off, maybe it doesn't have any name to retrieve. ne_nau.gif Oh well, this wasn't a biggie, but it would've been a nice feature. It would help keep me from getting lost in these hundreds of galleries I have to parse through. eek7.gif
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • MikeFriedMikeFried Registered Users Posts: 33 Big grins
    edited February 3, 2006
    SamirD wrote:
    Well, I tried it just as it was written and nothing.

    What is your smugmug account name? If we can't see your smugmug site, then we can't help you.
  • devbobodevbobo Registered Users, Retired Mod Posts: 4,339 SmugMug Employee
    edited February 3, 2006
    MikeFried wrote:
    What is your smugmug account name? If we can't see your smugmug site, then we can't help you.
    huntsvillecarscene.smugmug.com

    <br>
    David Parry
    SmugMug API Developer
    My Photos
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 3, 2006
    MikeFried wrote:
    What is your smugmug account name? If we can't see your smugmug site, then we can't help you.
    Oops, I keep forgetting about this. :uhoh

    My site isn't setup where you can see anything from the home page since I'm using all private links that I'll link from my web site.

    Here's a sample gallery, but this is without the code in place: http://newpics.huntsvillecarscene.com/gallery/1147319

    We can play with this one a bit and try again.
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • MikeFriedMikeFried Registered Users Posts: 33 Big grins
    edited February 3, 2006
    Your problem is that the code is not running. You need to either add:
    addEvent(window, "load", ContextualizeTitle);
    to your javascript (outside any of the functions), or
    <body onload="ContextualizeTitle();">
    To your body.

    Otherwise, no amount of customizing the script will cause any browser to do anything about it.
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 4, 2006
    MikeFried wrote:
    Your problem is that the code is not running. You need to either add:

    to your javascript (outside any of the functions), or

    To your body.

    Otherwise, no amount of customizing the script will cause any browser to do anything about it.
    I have 3 functions being called in body. The other two work fine and the syntax is the same for the ContextualTitle function call. ne_nau.gif
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 4, 2006
    Scratch that, I just got it working. Seems like there was something in my head area that was changing the title. rolleyes1.gif
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 4, 2006
    So how can the "powered by smugmug" be removed in the titles? I had it removed before and I don't want it in these custom titles either. rolleyes1.gif

    Wonderful script btw. Well written and commented. thumb.gif
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 6, 2006
    SamirD wrote:
    So how can the "powered by smugmug" be removed in the titles? I had it removed before and I don't want it in these custom titles either. rolleyes1.gif

    Wonderful script btw. Well written and commented. thumb.gif
    For anyone that's interested in doing this, you have to change the following lines.

    Everywhere you see this:
    newTitle = newTitle.replace(re1, "$1" + newText + "$2");
    
    change it to this:
    newTitle = newTitle.replace(re1, "$1" + newText);
    
    To accomodate the change needed on the homepage, add this code
    document.title = document.title.replace(re1, "$1");
    
    right after this
    var newText = null;
    
    That's it!

    You can see fully function versions of this code at newpics.huntsvillecarscene.com and newpics.huntsvillecarscene.com/gallery/1175012

    I can't believe I figured it out without messing something up! clap.gifclap.gifclap.gif
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • caseservecaseserve Registered Users Posts: 269 Major grins
    edited February 18, 2006
    Not working now
    I implement this script some time ago, it was working great. Now it only works in FF not it IE

    In FF I get the full name of the site - gallery - browser name
    But in IE I only get the site - browser name

    Any ideas, the site is caseserve.smugmug.com

    Thanks,
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited February 24, 2006
    caseserve wrote:
    I implement this script some time ago, it was working great. Now it only works in FF not it IE

    In FF I get the full name of the site - gallery - browser name
    But in IE I only get the site - browser name

    Any ideas, the site is caseserve.smugmug.com

    Thanks,
    Mine is working fine in IE 6.0 under xp home. ne_nau.gif I'd double check the code.
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • KeithHKeithH Registered Users Posts: 73 Big grins
    edited March 26, 2006
    Will page titles show in search engines?
    MikeFried wrote:
    I just updated my title replacing code (tested on IE 6 and fixed a bug in Netscape 7.2 and I _assume_ it still works on Firefox 1.5 and other browsers but I haven't tested the new code on Firefox as of yet). I have some hardcoded string values in there to do some of the hacky magic. Those of you who have been following along and want to play with it, feel free. :)

    You can get just the relevant code from the attachment here.

    The old cases of category/sub-category, album, and album with photo having a caption still work. Note that I remove the normal title customization from my cobranding page, and do all title customization via this script. I find that in the absence of javascript support on a browser, I like smugmug's "uncustomized" titles better than the same title on every page.

    The new code adds a few special cases (some of which were made possible by the recent smugmug update).....


    ....With these latest changes, it is a lot easier for me to navigate around my site and look at the breadcrumb trail in the back button dropdown. My site is nowhere near as complete an experience as other pros on this board, but I think it's ok for my first month.
    -Mike
    I like this version of the hack. Good job! It's nice to see my own title along with the category or the gallery name in the title bar of the browser. But I was wondering about one thing. Does anyone know if these page titles will show up in search engines? And if they don't, what does?

    I tried the other version of this code, and liked it too, but the browser title bar would always read "SmugMug - My Website Name: Gallery Name" and it would not show the category. The version I'm using now does just what I want it to (no SmugMug name and it it will show the category) but I worry a little the titles won't appear in search engines.

    Something I noticed is that when I was trying the two codes for this hack (and the various sub-versions) I noticed that StatCounter would show the new titles of the various pages with the Gary Glass code but would not with Mike Fried's. This got me thinking that if the latter one won't show titles in StatCounter, it won't allow them to be show them in search engines.

    The code, as it is now, would be perfect if it did what it did AND the titles showed up in StatCounter and Google.

    I hope I'm making myself clear. Thanks.
    hazweb.smugmug.com
  • ExposeTheMomentExposeTheMoment Registered Users Posts: 271 Major grins
    edited April 11, 2006
    Doing Something Wrong
    I cannot get it to work, code in place.

    http://exposethemoment.smugmug.com/
    Gary Harfield
    Owner/Photographer
    Expose The Moment

    Had a list of gear, now its to long, so lets say I have 2 bags and 15,000 worth of stuff.
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 11, 2006
    I cannot get it to work, code in place.

    http://exposethemoment.smugmug.com/

    Gary? Please be more specific. This thread has a simple version and a complex version. I see the simple version on your site, just fine:
  • ExposeTheMomentExposeTheMoment Registered Users Posts: 271 Major grins
    edited April 11, 2006
    Andy,

    if I goto http://photos.exposethemoment.com/Weddings

    thats the url I see in IE url box, but in the blue area above that I see.

    Expose The Moment - New Hampshire Wedding Photography.

    Should the complex mod that I want to use that that title bar to Expose The Moment - Then what ever page or gallery your displaying?

    Gary
    Gary Harfield
    Owner/Photographer
    Expose The Moment

    Had a list of gear, now its to long, so lets say I have 2 bags and 15,000 worth of stuff.
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited April 11, 2006
    Andy,

    if I goto http://photos.exposethemoment.com/Weddings

    thats the url I see in IE url box, but in the blue area above that I see.

    Expose The Moment - New Hampshire Wedding Photography.

    Should the complex mod that I want to use that that title bar to Expose The Moment - Then what ever page or gallery your displaying?

    Gary
    Either URL will produce the same result - that part doesn't matter. Have you implemented the more complex code? I do not see it on your site.

    ear.gif
  • ExposeTheMomentExposeTheMoment Registered Users Posts: 271 Major grins
    edited April 11, 2006
    I copied and pasted, maybe it did not save
    Gary Harfield
    Owner/Photographer
    Expose The Moment

    Had a list of gear, now its to long, so lets say I have 2 bags and 15,000 worth of stuff.
  • ExposeTheMomentExposeTheMoment Registered Users Posts: 271 Major grins
    edited April 11, 2006
    well Im going to bed for a few hours I guess I work on it tonight while Im at work, I have to rip apart my main computer today to replace a power supply and HD. I had another major comp issue. Im on my laptop now.
    Gary Harfield
    Owner/Photographer
    Expose The Moment

    Had a list of gear, now its to long, so lets say I have 2 bags and 15,000 worth of stuff.
  • ExposeTheMomentExposeTheMoment Registered Users Posts: 271 Major grins
    edited April 12, 2006
    The code is there, its just not working.headscratch.gif
    Gary Harfield
    Owner/Photographer
    Expose The Moment

    Had a list of gear, now its to long, so lets say I have 2 bags and 15,000 worth of stuff.
  • ivarivar Registered Users Posts: 8,395 Major grins
    edited April 12, 2006
    The code is there, its just not working.headscratch.gif
    It seems to be working over here....
  • ExposeTheMomentExposeTheMoment Registered Users Posts: 271 Major grins
    edited April 12, 2006
    ivar wrote:
    It seems to be working over here....

    Ok problem, my site was doing that before I added the code.

    I thought that this code was so the BLUE title Bar on Internet explorer co-displayed what page you were on.

    I'm not talking about the url box.

    When I go here I see in the url http://photos.exposethemoment.com/Portraits but in the blue title area I see Expose The Moment - Microsoft Internet Explorer
    Gary Harfield
    Owner/Photographer
    Expose The Moment

    Had a list of gear, now its to long, so lets say I have 2 bags and 15,000 worth of stuff.
Sign In or Register to comment.