Recent Galleries listing

PaulSpot

Little tip for anybody else out there using this and needing to put that "loading" gallery in there.. if you go to "customize gallery" and mark it as "unlisted", then it won't show up in your RSS feed but it's also not private so you can still feature it. In other words, it makes it work the way you want... shows "Loading..." gallery until the RSS loads, then no "Loading..." gallery in the recent galleries list.

Darrl- you're right, I forgot that if I stopped using categories, I could have recent galleries. Guess I'm just greedy

darryl

PaulSpot wrote:

Little tip for anybody else out there using this and needing to put that "loading" gallery in there.. if you go to "customize gallery" and mark it as "unlisted", then it won't show up in your RSS feed but it's also not private so you can still feature it. In other words, it makes it work the way you want... shows "Loading..." gallery until the RSS loads, then no "Loading..." gallery in the recent galleries list.

Darrl- you're right, I forgot that if I stopped using categories, I could have recent galleries. Guess I'm just greedy

Hey Paul--

I came up with another nice little hack. Put an image into your "Loading..." gallery of an animated loading gif. You can generate one to match your color scheme here: http://www.ajaxload.info/

You end up with a nice bit of animation to let people know something is happening: http://gladlee.smugmug.com/

Re: SmugMug's built-in Arrange by Galleries vs Categories, as noted in my last post, picking Galleries shows *all* of your galleries in reverse chronological order. It gets really unwieldy really fast. Categories are a necessity, but they introduce their own problems. Like, what if you wanted to mix single albums with categories? You can't.

PaulSpot

darryl wrote:

Hey Paul--

I came up with another nice little hack. Put an image into your "Loading..." gallery of an animated loading gif. You can generate one to match your color scheme here: http://www.ajaxload.info/

You end up with a nice bit of animation to let people know something is happening: http://gladlee.smugmug.com/

Re: SmugMug's built-in Arrange by Galleries vs Categories, as noted in my last post, picking Galleries shows *all* of your galleries in reverse chronological order. It gets really unwieldy really fast. Categories are a necessity, but they introduce their own problems. Like, what if you wanted to mix single albums with categories? You can't.

Nice tip! I had used a PNG file I had on hand that I thought looked "loady", but an animated file would be even cooler.

Raina.Rae

Thank you for code
Darryl,

Thank you for writing this code and documenting it so someone else knows what going on in the code. It works a lot better and is a lot simpler then any of the other recent gallary hacks I have seen. You saved me hours of fustration. Thanks.

Heather
www.munchkinphotos.smugmug.com

darryl wrote:

Ok, all issues pretty much resolved except that Gallery Description is *not* included. I can kind of live with this, but am toying with the idea of making a JSON call to pull it from the API. However, a few hours trying to get JSON to work has made my head hurt. :-{

Anywho, not that anybody cares, but:

http://gladlee.smugmug.com/
Here is my whole stinking ugly mess:

{edit - fixed IE incompatibility; need to actually *call* getRSS; added tiny bit of CSS to make grouping tighter, since we don't have description anyways; added body tag to call function; didn't *really* want multiline searching; fixed 0:00 (midnight) hours}

Javascript section:
[code]
// RECENT GALLERIES HACK

// This hack replaces your Featured Galleries with Recent Galleries as determined by the RSS feed.
//

darryl

Raina.Rae wrote:

Darryl,

Thank you for writing this code and documenting it so someone else knows what going on in the code. It works a lot better and is a lot simpler then any of the other recent gallary hacks I have seen. You saved me hours of fustration. Thanks.

Heather
www.munchkinphotos.smugmug.com

Heather -- while I'm thrilled that somebody is getting use out of my code, I wish that SmugMug would actually build this into their system, because my method is really inefficient and slow.

Unfortunately, since it works (kind of -- no gallery descriptions, which might be a problem for you, looking at your current page), that probably lets them think "Well, hey, somebody can just use Darryl's ugly hack and we don't have to fix it. Yay."

:-{

Tawcan

Nm got it working now.

hrsa

Still some problems...
Now "Recent galleries" is doubled and is over my "bio".
What am i doing wrong?
UPD: Now recent galleries have disappeared
What's more - an unlisted gallery is now shown in that box!
I've put this in "Footer Javascript":

// RECENT GALLERIES HACK

// This hack replaces your Featured Galleries with Recent Galleries as determined by the RSS feed.
//
// RSS parsing code from Paul Sobocinski found here:
// http://www.xml.com/pub/a/2006/09/13/rss-and-ajax-a-simple-news-reader.html?page=5

// NOTE: You must have one gallery set to featured, as a placeholder to make the Featured Box show up
// This placeholder gallery will not show up once the hack is in place.

// Rename Featured Galleries to Recent Galleries
YE.onContentReady('featuredTitle', function() {this.innerHTML='Recent uploads'});

// Specify how many recent galleries you'd like to see
var rsscount = 6 ;

// Specify your RSS feed for Recent Galleries (replace XXXXXX with your site name)
// ImageCount needs to be "padded" if you have a lot of private galleries mixed in with your public 
// galleries.  If you are not seeing 6 (or however many) recent galleries, try increasing ImageCount

var rssurl = "http://hrsa.smugmug.com/hack/feed.mg?Type=nickname&Data=hrsa&format=rss200&ImageCount=18";

// Added a line to the doOnLoad function that is also used by the removeLinkFromImg() function and others.  
// So you may only need to append the if//getRSS clause below.

function doOnLoad() {
  if (YD.hasClass(document.body, "homepage")) //
     getRSS();
}

//OBJECTS

//objects inside the RSS2Item object
function RSS2Enclosure(encElement)
{
    if (encElement == null)
    {
        this.url = null;
        this.length = null;
        this.type = null;
    }
    else
    {
        this.url = encElement.getAttribute("url");
        this.length = encElement.getAttribute("length");
        this.type = encElement.getAttribute("type");
    }
}

function RSS2Guid(guidElement)
{
    if (guidElement == null)
    {
        this.isPermaLink = null;
        this.value = null;
    }
    else
    {
        this.isPermaLink = guidElement.getAttribute("isPermaLink");
        this.value = guidElement.childNodes[0].nodeValue;
    }
}

function RSS2Source(souElement)
{
    if (souElement == null)
    {
        this.url = null;
        this.value = null;
    }
    else
    {
        this.url = souElement.getAttribute("url");
        this.value = souElement.childNodes[0].nodeValue;
    }
}

//object containing the RSS 2.0 item
function RSS2Item(itemxml)
{
    //required
    this.title;
    this.link;
    this.description;

    //optional vars
    this.author;
    this.comments;
    this.pubDate;

    //optional objects
    // this.category;
    this.enclosure;
    this.guid;
    this.source;

    var properties = new Array("title", "link", "description", "author", "comments", "pubDate");
    var tmpElement = null;
    for (var i=0; i<properties.length; i++)
    {
        tmpElement = itemxml.getElementsByTagName(properties[i])[0];
        if (tmpElement != null)
            eval("this."+properties[i]+"=tmpElement.childNodes[0].nodeValue");
    }

    // this.category = new RSS2Category(itemxml.getElementsByTagName("category")[0]);
    this.enclosure = new RSS2Enclosure(itemxml.getElementsByTagName("enclosure")[0]);
    this.guid = new RSS2Guid(itemxml.getElementsByTagName("guid")[0]);
    this.source = new RSS2Source(itemxml.getElementsByTagName("source")[0]);
}

//objects inside the RSS2Channel object
function RSS2Category(catElement)
{
    if (catElement == null)
    {
        this.domain = null;
        this.value = null;
    }
    else
    {
        this.domain = catElement.getAttribute("domain");
        this.value = catElement.childNodes[0].nodeValue;
    }
}

//object containing RSS image tag info
function RSS2Image(imgElement)
{
    if (imgElement == null)
    {
    this.url = null;
    this.link = null;
    this.width = null;
    this.height = null;
    this.description = null;
    }
    else
    {
        imgAttribs = new Array("url","title","link","width","height","description");
        for (var i=0; i<imgAttribs.length; i++)
            if (imgElement.getAttribute(imgAttribs[i]) != null)
                eval("this."+imgAttribs[i]+"=imgElement.getAttribute("+imgAttribs[i]+")");
    }
}

//object containing the parsed RSS 2.0 channel
function RSS2Channel(rssxml)
{
    //required
    this.title;
    this.link;
    this.description;

    //array of RSS2Item objects
    this.items = new Array();

    //optional vars
    this.language;
    this.copyright;
    this.managingEditor;
    this.webMaster;
    this.pubDate;
    this.lastBuildDate;
    this.generator;
    this.docs;
    this.ttl;
    this.rating;

    //optional objects
    // this.category;
    this.image;

    var chanElement = rssxml.getElementsByTagName("channel")[0];
    var itemElements = rssxml.getElementsByTagName("item");

    for (var i=0; i<itemElements.length; i++)
    {
        Item = new RSS2Item(itemElements[i]);
        this.items.push(Item);
        //chanElement.removeChild(itemElements[i]);
    }

    var properties = new Array("title", "link", "description", "language", "copyright", "managingEditor", "webMaster", "pubDate", "lastBuildDate", "generator", "docs", "ttl", "rating");
    var tmpElement = null;
    // this.category = new RSS2Category(chanElement.getElementsByTagName("category")[0]);
    this.image = new RSS2Image(chanElement.getElementsByTagName("image")[0]);
}

//PROCESSES

//uses xmlhttpreq to get the raw rss xml
function getRSS()
{
    //call the right constructor for the browser being used
    if (window.ActiveXObject)
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    else if (window.XMLHttpRequest)
        xhr = new XMLHttpRequest();
    else
        alert("not supported");

    //prepare the xmlhttprequest object
    xhr.open("GET",rssurl,true);
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("Pragma", "no-cache");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4)
        {
            if (xhr.status == 200)
            {
                if (xhr.responseText != null)
                    processRSS(xhr.responseXML);
                else
                {
                    alert("Failed to receive RSS file from the server - file not found.");
                    return false;
                }
            }
            else
                alert("Error code " + xhr.status + " received: " + xhr.statusText);
        }
    }

    //send the request
    xhr.send(null);
}

//processes the received rss xml
function processRSS(rssxml)
{
    RSS = new RSS2Channel(rssxml);
    showRSS(RSS);
}

//shows the RSS content in the browser
function showRSS(RSS)
{

    divTags = YD.getElementsByClassName("boxBottom", "div", YD.get("featuredBox"));
    
    while(divTags[0].firstChild) divTags[0].removeChild(divTags[0].firstChild);    

//populate the items

    for (var i=0; i<rsscount && i<RSS.items.length; i++)
    {
        galimage = RSS.items[i].description;

        galimage = galimage.replace(/^.+src="(.*?)" .*/, "$1") ;
        galimage = galimage.replace(/(.*-)Th(-\d+)?(\.\w+)/i, "$1Ti$2$3") ;

        pubdate = RSS.items[i].pubDate ;
        pubdate.match(/^\w{3}, (\d\d) (\w{3}) (\d{4}) (\d\d):(\d\d):\d\d -\d\d\d\d/) ;

        // Fix up date formatting
        if (RegExp.$4>12) { meridian = 'pm'; hrs = RegExp.$4-12 } else { meridian = 'am'; if (RegExp.$4==0) { hrs = 12 } else { hrs = RegExp.$4-0 }} ;

        fixdate = "updated: " + RegExp.$2 + " " + RegExp.$1 + ", " + RegExp.$3 + " " + hrs + ":" + RegExp.$5 + meridian + " PST" ;

        miniBox = document.createElement("div");
        miniBox.className = "miniBox miniminiBox";

        photoBox = document.createElement("div");
        photoBox.className = "photo";
        miniBox.appendChild(photoBox);

        photoLink = document.createElement("a");
        photoLink.setAttribute("href", RSS.items[i].link);
        photoBox.appendChild(photoLink);

        photoImg = document.createElement("img");
        photoImg.setAttribute("border", "0");
        photoImg.setAttribute("alt", RSS.items[i].title);
        photoImg.setAttribute("title", RSS.items[i].title);
        photoImg.src = galimage;
        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", RSS.items[i].link);
        albumTitle.appendChild(albumLink);

        albumLinkText = document.createTextNode(RSS.items[i].title);
        albumLink.appendChild(albumLinkText);

        albumUpdated = document.createElement("p");
        albumUpdated.className = "updated";
        miniBox.appendChild(albumUpdated);
        albumUpdatedText = document.createTextNode(fixdate);
        albumUpdated.appendChild(albumUpdatedText);

        spacerDiv = document.createElement("div");
        spacerDiv.className = "spacer";
        miniBox.appendChild(spacerDiv);

        divTags[0].appendChild(miniBox);
        // insertAfter(miniBox, divTags[0].childNodes[divTags[0].childNodes.length-2]);

    }
    spacerDiv = document.createElement("div");
    spacerDiv.className = "spacer";
    divTags[0].appendChild(spacerDiv);

    //we're done
    return true;
}

var xhr;

darryl

hrsa wrote:

Still some problems...
Now "Recent galleries" is doubled and is over my "bio".
What am i doing wrong?
UPD: Now recent galleries have disappeared
What's more - an unlisted gallery is now shown in that box!
I've put this in "Footer Javascript":

Hi:

It needs to be in Header Javascript. Footer Javascript is something new and I never tested the script there. As it happens, it *does* work in Footer Javascript, but takes a really long time.

Before moving it, you should click on [don't feature] under your unlisted gallery.

There is a use for an unlisted gallery though. It lets you put a "loading" graphic up there while people wait for the recent galleries to load. See post #33 up above.

--Darryl

hrsa

I've put the code in header javascript.
it worked, but after i've refreshed the page - only caption changes, recent galleries don't show up

darryl

hrsa wrote:

I've put the code in header javascript.
it worked, but after i've refreshed the page - only caption changes, recent galleries don't show up

It's working for me, after multiple reloads on Firefox 2.0.0.14 and IE 7.0.5730.13.

I hate to say this -- but maybe try clearing your cache? Also, try logging out of your SmugMug account to see what it'll look like to other users.

Clearing .smugmug.com cookies might be worthwhile.

--Darryl

hrsa

Hm, i've tried to load this page from 5 different computers - all of them seem to stuck on "Loading"

hrsa

You were right about CNAME, it's working perfectly on hrsa.smugmug.com.

Unfortunately, that change didn't help, although the link for the feed is alright - it can be opened in any rss reader. It's strange that it doesn't work

darryl

hrsa wrote:

You were right about CNAME, it's working perfectly on hrsa.smugmug.com.

Unfortunately, that change didn't help, although the link for the feed is alright - it can be opened in any rss reader. It's strange that it doesn't work

Whoops. Another fix:

var rssurl = "http://hrsa.ru/hack/feed.mg?Type=nickname&Data=XXXXXX&format=rss200&ImageCount=10";

That should do it.

hrsa

darryl wrote:

Whoops. Another fix:

var rssurl = "http://hrsa.ru/hack/feed.mg?Type=nickname&Data=XXXXXX&format=rss200&ImageCount=10";

That should do it.

Indeed! Works perfectly, thank you very much!

darryl

Wow! SmugMug has finally implemented a Recent Photos widget for their homepage.

http://blogs.smugmug.com/release-notes/2009/10/23/animoto-better-viewing-and-homepage-goodies-for-all-october-22-2009/

Hopefully this means that the Recent Galleries widget is coming soon. We can only hope! I'd love to have my nasty JavaScript hackery excised from the SmugMug universe.

Also, 7x7s? Dang, I would've been down for that!

http://blogs.smugmug.com/don/2009/10/22/windows-7-party-with-seven-7x7-in-n-out-burgers/

PaulSpot

excited
Count me in for waiting with great anticipation!

TalkieT

Ditto - the monet I saw the recent photos feature, I started searching for recent galleries (which would be far more useful for me) and came across this thread... I'm wondering if I should integrate this hack into my site or hope SM will add recent galleries kinda soon.

I already know the answer of course...

Cheers -N
www.nzsnaps.com

TalkieT

Wow... that's awesome... Took all of 3 minutes to setup and didn't break any of my current formatting!!! Great stuff...

I see that you have replaced featured galleries... I'd like to keep them, so I might sacrifice another homepage feature... I presume I could use the new "recent photos" as the container for this as well?

ANyway - thanks for this - I've been wanting this for some time.

My site has it working at www.nzsnaps.com

Cheers - N

darryl

Glad it's working for you. HOLY CRAP -- your theming is awesome. It looks *nothing* like a SmugMug site. Now *that's* nice work!

Also, Ultimate, yeah! Great shots!

TalkieT

darryl wrote:

Glad it's working for you. HOLY CRAP -- your theming is awesome. It looks *nothing* like a SmugMug site. Now *that's* nice work!

Also, Ultimate, yeah! Great shots!

Thanks for that Darryl! I can't take all the credit for the design... I drew a lot of inspiration from BigWebguy's site and took a long time and many many questions to engineer something similar....

But I'm very very happy with how it looks now...

Ultimate does rock... I have played at world once (Perth, 2006) in the masters division, but injured my knee there and it's never fully recovered so I have started travelling a little to shoot... I was an official photographer in Perth (double duty as well as playing!), travelled to Vancouver in 2008 for worlds and will be in Pargue next year for world clubs...

Cheers - N
www.nzsnaps.com

TalkieT

Oh, as an update... I changed this recent galleries hack to replace the recent photos section instead of featured galleries.

This means I can now have recent galleries as well as featured galleries on my homepage. I currently have 4 of each.

I would like a better way of delineating the recent and featured, but for now I'm happy with the result (except for the delay in loading the recent galleries of course, but until SM adds native recent galleries - I think I will have to live with that)

Cheers - N
www.nzsnaps.com

fivegrainja

I didn't see a request for this over on the official smugmug feedback forum, so I created one. If you would like to see smugmug implement a Recent Galleries section for the homepage consider voting for this:

http://smugmug.uservoice.com/forums/17723-smugmug/suggestions/448635-recent-galleries-on-homepage?ref=title

darryl

TalkieT wrote: »

Oh, as an update... I changed this recent galleries hack to replace the recent photos section instead of featured galleries.

This means I can now have recent galleries as well as featured galleries on my homepage. I currently have 4 of each.

I would like a better way of delineating the recent and featured, but for now I'm happy with the result (except for the delay in loading the recent galleries of course, but until SM adds native recent galleries - I think I will have to live with that)

Cheers - N
www.nzsnaps.com

Hey Neil - I was just linking to your site as an example of somebody using my hack. As always, I'm in awe of your work.

One note about using the "recent photos" section instead of "featured galleries" -- if people are on a slower connection, there are a few seconds where your most recent photos show up before they're replaced with recent galleries. Not much you can do about this, but kind of a bummer.

(Using "featured galleries" I could feature a "Loading..." gallery that has an animated "loading..." gif as the thumbnail, which I think worked pretty nicely. This worked because if an image was smaller than the standard thumbnail size (100px on one side) and a valid image format, SmugMug would leave that as the thumbnail. More recently they force that image to be a 100px JPEG, which breaks my hack for anybody else who doesn't already have a "loading..." gif uploaded somewhere.)

Sure would be nice if we didn't have to do this hack at all though, eliminating the load delays. :-/

aporter

Thumbnails too large for very recently added albums
I added a few albums last night and found that only the new thumbnails are too large while the old ones are still just fine. After close inspection of the RSS feed I found that the path to thumbnails is different for my most recently added albums. Instead of this:

http://domain/category/album/imagename/1140366362_US6ig-Th.jpg

The new ones have:

http://domain/category/album/i-8HnbBKN/0/Th/imagename-Th.jpg

If I manually change the filename to -Ti SmugMug loads the image but redirects to the -Th version instead. It looks like this is what the javascript code is doing with the galimage = galimage.replace line near the populate items comment. I tried changing the /Th/ folder to /Ti/ and that did the trick for getting the smaller thumbnail manually, so I added the following new line to the javascript code and now my thumbnails are happy again:

        // Replace new Th folder with Ti in image link path
        galimage = galimage.replace(/\/Th\//i, "\/Ti\/") ;

I added this right after the two other galimage = galimage.replace lines.

Just thought I'd share this in case others encounter the same enlarged thumbnail issue.

Andrew

afarber

Fantastic! Thanks for posting this. I had the same problem and this fixed it perfectly.

Sweet!

aporter wrote: »

I tried changing the /Th/ folder to /Ti/ and that did the trick for getting the smaller thumbnail manually, so I added the following new line to the javascript code and now my thumbnails are happy again:

        // Replace new Th folder with Ti in image link path
        galimage = galimage.replace(/\/Th\//i, "\/Ti\/") ;

I added this right after the two other galimage = galimage.replace lines.

Just thought I'd share this in case others encounter the same enlarged thumbnail issue.

darryl

I'm sad people still have to use this hack. :-{

Thanks for fixing the code Andrew. I should probably edit the sources.