» Creating an MT4 widget to display your public Picasa albums

Notice my nifty table of my public Picasa albums over there on the left sidebar. Pretty cool huh? So do I have to publish in Movable Type every time I add a new Picasa album? No, that would be silly.

Instead, I’m using some clever DHTML javascript to build an N-column table and populate it dynamically with a JSON call out to the Picasa web API.

Here’s how I built mine:

Create a new widget template by going to the Widgets quickfilter under Design…Templates and clicking the “Create Widget template” link up top. Name it something clever, like “Photo Album”.

Set up some basic HTML elements that all Widgets have:

<h3 class="widget-header"><a href="[[link/to/your/Picasa/album]]">My Photo Album</a></h3>
<div class="widget-content [[custom css class]]" id="picasa-box">
    <p>Mouse-over a thumbnail to see album name</p>
</div>

After the <p> tag, insert a script to dynamically build an N-column wide HTML table to hold the album thumbnails. I got some of the code from another site, but I can’t remember which one… Anyway, here is my version:

 <script type='text/javascript'>     
 function showalbums(json) {       
   // this functions reads all album data from the json-feed and stores it in array
   var numentries = json.feed.entry.length;
   var cols=2;  // THIS CHANGES THE NUMBER OF COLUMNS IN THE TABLE
   var table = document.createElement("table");
   table.setAttribute("cellspacing", "1");
   table.setAttribute("cellpadding", "1");       
   // main loop gets all the entries from the feed         
   for (var i = 0; i < numentries; i++) {
     // get the entry from the feed
     var entry = json.feed.entry[i];         
     // get the albumtitle from the entry
     var albumTitle = entry.title.$t;         
     // get the album url from the entry
     var albumUrl;
     for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'alternate') {
         albumUrl = entry.link[k].href;
         break;
       }
     }         
     // get the album thumbnail from the entry
     var albumThumbnail = entry.media$group.media$thumbnail[0].url;         
     var albumLink = document.createElement('A');
     albumLink.href = albumUrl;
     albumLink.title = albumTitle;         
     var albumPic = document.createElement('IMG');
     albumPic.src = albumThumbnail;
     albumPic.alt = albumTitle;
     albumPic.height = 64;
     albumPic.width = 64;
     albumPic.border = 0;         
     albumLink.appendChild(albumPic);         
     // build the table 
     if(i%cols==0) {
       row = table.insertRow(Math.floor(i/cols));
     }         
     var cell = row.insertCell(i%cols);
     cell.setAttribute("valign", "top");
     cell.appendChild(albumLink);
   }       
   var parent = document.getElementById('picasa-box');
   parent.appendChild(table);       
 } // end of showalbums 
 </script>

Change what you want. The cols variable stores the number of columns in the table. You can also choose to get your thumbnails in different sizes from the Picasa API. Go here to read about all the values. If you change the thumbnail size, be sure to change albumPic.height and albumPic.width to match.

Finally, we need a call out to the Picasa API that will in turn send a callback to our showalbums function. Here’s what that looks like:

<script src='http://picasaweb.google.com/data/feed/base/user/[[YOUR PICASA ALBUM NAME]]?kind=album&access=public&alt=json-in-script&callback=showalbums&thumbsize=64c'></script>

Once again, the query parameters are documented by Google here

Remember to keep all this enclosed in the </div> tag at the bottom. Now add your shiny new widget to a widget set (I added mine to the Primary sidebar set). Publish your pages and enjoy your new webfunktual dynamicism.

PS — This seems to work fine in FireFox 2.x and Internet Exlorer 6.0. I don’t have the time or energy to test it on anything else :)