Featuring my favorite pictures (featuring a keyword gallery)

[Reeves]

Hey folks,

I wanted to have a section on my home page which featured my favorite pictures... but I didn't want to go through the labor of duplicating each picture into a new gallery to feature. After doinking with CSS for a while (and coming up very empty handed) I stumbled across devbobo's automatic "recent" featured gallery. Brilliant! As a result, I give all credit to devbobo since I really just trimmed and modified his code for this. Basically I modified devbobo's code to show a keyword gallery instead of a timeline gallery. You could, of course, use this for any keyword you choose.

You can see it in action on my site.

Note: my JS skills are minimal at best (well, I don't know JS, just C++) so I'd like to get your feedback on this tweak of David's code. It is working on my site but I may have done something silly in my futzing with the code.

I renamed the functions where appropriate to make it easier for this to coexist with the recent gallery should someone have the urge to merge them. Here's is the JavaScript code (again, copied shamelessly from devbobo):

function addKeywordFeatured(text, description, keyword, thumbUrl)
{
  if (IsClass("homepage"))
  {
    divTag = document.getElementById("featuredBox");
    if (divTag)
    {
      divTags = divTag.getElementsByTagName("div");
      for (i=0; i<divTags.length; i++)
      {
        if (divTags[i].className == "boxBottom")
        {
          miniBox = document.createElement("div");
          miniBox.className = "miniBox";
          photoBox = document.createElement("div");
          photoBox.className = "photo";
          miniBox.appendChild(photoBox);
          photoLink = document.createElement("a");
          photoLink.setAttribute("href", "/keyword/" + keyword);
          photoBox.appendChild(photoLink);
          photoImg = document.createElement("img");
          photoImg.setAttribute("border", "0");
          photoImg.setAttribute("alt", text);
          photoImg.setAttribute("title", text);
          photoImg.src = thumbUrl;
          photoImg.className = "imgBorder";
          photoLink.appendChild(photoImg);
          albumTitle = document.createElement("p");
          albumTitle.className = "albumTitle";
          miniBox.appendChild(albumTitle);
          albumLink = document.createElement("a");
          albumLink.className = "nav";
          albumLink.setAttribute("href", "/keyword/" + keyword);
          albumTitle.appendChild(albumLink);
          albumLinkText = document.createTextNode(text);
          albumLink.appendChild(albumLinkText);
 
          albumDescription = document.createElement("p");
          albumDescription.className = "description";
          miniBox.appendChild(albumDescription);
          albumDescriptionText = document.createTextNode(description);
          albumDescription .appendChild(albumDescriptionText);
          spacerDiv = document.createElement("div");
          spacerDiv.className = "spacer";
          miniBox.appendChild(spacerDiv);
          divTags[i].insertBefore(miniBox, divTags[i].childNodes[1]);
 
          break;
        }
      }
    }
  }
}
 
function IsClass(sClass) 
{
  sClassName = document.body.className;
  re = new RegExp(sClass + "( |$)") 
  if (!sClassName)
    return false;
  return re.test(sClassName);
}

Also in the JS customization section I have a function to call when the page is loaded. This function triggers the keyword customization as well as other customizations I have (removed from the example for clarity).

function OnLoadHandler()
{
   addKeywordFeatured('Favorite Pictures', 'Our favorite pictures from all our galleries.', 'Favorites', 'photos/54593627-Ti.jpg'); 
}
 

I originally used a body tag to trigger the function but devbobo pointed out that it will load more quickly if you put the onload command in the footer instead. At his recommendation I added the call to trigger the insertion via the footer instead of adding a body tag (note the asterixes should be removed):

<*script*>
    OnLoadHandler();
</script*>

That's about it. You can check out the results on my page.

Additional note:
The code for this customization changed at some point (possibly the server modified the code for security reasons). I've corrected the code in the post and, to make sure there is a clean copy available should it change again, I've also uploaded the script snippets here:

• Paste this into the JS section of your customization: http://little.org/smugmug/forJavaScriptSection.txt
• Paste this into the footer section of your customization: http://little.org/smugmug/forFooterSection.txt

Thanks again David (devbobo) for the code and inspiration.

Cheers,
Reeves

[devbobo]

Very cool Reeves...well done

[Andy]

And, there's a way to put that keyword gallery on your homepage

www.moonriverphotography.com

devbobo

[devbobo]

Originally Posted by Andy

And, there's a way to put that keyword gallery on your homepage

www.moonriverphotography.com

devbobo

couldn't help urself could u

[Andy]

Originally Posted by devbobo

couldn't help urself could u

, no, I cannot!

I'm constantly amazed at what can be done with a SmugMug site. Thanks mucho for the hacks, David!

[Reeves]

Okay boys... what's the noob missing? :) (was there already a way to do this?)

Originally Posted by Andy

, no, I cannot!

I'm constantly amazed at what can be done with a SmugMug site. Thanks mucho for the hacks, David!

[devbobo]

Originally Posted by Reeves

Okay boys... what's the noob missing? :) (was there already a way to do this?)

check out Andy's homepage, I just finished writing a hack last night that puts an album of user's choice on ur homepage in a slideshow.

[Reeves]

Originally Posted by devbobo

check out Andy's homepage, I just finished writing a hack last night that puts an album of user's choice on ur homepage in a slideshow.

That is wicked cool! Very nice.

[Barb]

Originally Posted by devbobo

check out Andy's homepage, I just finished writing a hack last night that puts an album of user's choice on ur homepage in a slideshow.

That is wonderful! It gives me an idea, but I have no clue how to do it. On my home page, would it be possible, if I removed my bio from the homepage, to have a slideshow kind of like Andy's, of a certain gallery, i.e., "Favorites", in that space? I would leave everything else alone. Does that make sense? Eesh, even after I read it, I know what I mean, but no one else may - LOL.

[devbobo]

Originally Posted by bygates

That is wonderful! It gives me an idea, but I have no clue how to do it. On my home page, would it be possible, if I removed my bio from the homepage, to have a slideshow kind of like Andy's, of a certain gallery, i.e., "Favorites", in that space? I would leave everything else alone. Does that make sense? Eesh, even after I read it, I know what I mean, but no one else may - LOL.

Hi Barb,

I am going to be writing up a tutorial on how to do this...stay tuned.

David