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

[Andy]

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.

You can have the gallery be anything! Any gallery you want. I like reeves' idea here about the keyworded favorites - way cool. But really, the slideshow is served up by javascript from a regular gallery on SmugMug.

[Barb]

Originally Posted by devbobo

Hi Barb,

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

David

[Barb]

Originally Posted by Andy

You can have the gallery be anything! Any gallery you want. I like reeves' idea here about the keyworded favorites - way cool. But really, the slideshow is served up by javascript from a regular gallery on SmugMug.

I tried reeves' script but it wasn't working, and i'm too tired to try to figure it out. But I really think it's a great idea!

[Barb]

Originally Posted by 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.

Finally had the time to implement this on my site. And I gotta say, I love it! I had previously made a separate gallery called "Favorites" and make second copies of certain photos to place in that gallery. This eliminates that altogether and works flawlessly for me. Thank you!

[Reeves]

Originally Posted by bygates

Finally had the time to implement this on my site. And I gotta say, I love it! I had previously made a separate gallery called "Favorites" and make second copies of certain photos to place in that gallery. This eliminates that altogether and works flawlessly for me. Thank you!

Glad to hear it's up and running. (Your pictures look great!)

[Barb]

Originally Posted by Reeves

Glad to hear it's up and running. (Your pictures look great!)

Thank you!

[juliank]

Andy,

Where can I find info how to implement a slideshow like you have on your homepage? (www.moonriverphotography.com_)

Thanks in advance!

Julian

[DodgeV83]

Originally Posted by juliank

Andy,

Where can I find info how to implement a slideshow like you have on your homepage? (www.moonriverphotography.com_)

Thanks in advance!

Julian

You'll have to wait for Devbobo to write a tutorial.

[Redskeeter]

I figured out how to include the code and get it working, how the heck you guys figger this stuff out is amazing... good work.

Now for the head scratcher: The behavior when displaying horizontal vs vertical pictures gives some strange behavior, at least in IE 6. Seems the large picture of the thumbnail (displayPhoto), when horizontal goes to the bottom of the page. When you try to scroll down, IE just sort of jiggles but does not move unless you use the scroll bar.

In my other galleries, the style of the display photo is such that it fits beside the thumbs. I also note the thumbnail overlaps the text in firefox on the created gallery. I guess there is something not getting set somewhere. More on the customization angle, how do you get Guess I'll need "professional help" to fix this one.

Is this some of this sort of thing going into the How To that is in the works?

Thanks to all who work on this stuff!

www.wildstate.com is the site, btw

Evidently, I didn't make it clear where the "featured gallery" with keywords is located, it is located at www.wildstate.com, my smugmug site.

[Mike Lane]

Originally Posted by Redskeeter

Now for the head scratcher: The behavior when displaying horizontal vs vertical pictures gives some strange behavior, at least in IE 6. Seems the large picture of the thumbnail (displayPhoto), when horizontal goes to the bottom of the page. When you try to scroll down, IE just sort of jiggles but does not move unless you use the scroll bar.

What page are you talking about exactly?

Originally Posted by Redskeeter

In my other galleries, the style of the display photo is such that it fits beside the thumbs. I also note the thumbnail overlaps the text in firefox on the created gallery. I guess there is something not getting set somewhere. More on the customization angle, how do you get Guess I'll need "professional help" to fix this one.

I need a specific example to help you out.