Picasa Gallery - Fixing Google’s Cruel RSS feed
(Update: If just want to customize your picasaweb album, check out my post on my new project ShareMyAlbum.com)
Problem:
Well, the wife loves her Picasa. She used to work at Google and I guess it’s the “eat your own dogfood” culture she’s grown up with. Not that Picasa isn’t a great service, but I really wish she’d been using flickr instead. hell, even .Mac would be a better pick.
When the baby came, we started taking a ton of pictures. Of course, these images were being shared on Picasaweb. We found that the design of Picasa wasn’t great for sharing massive amounts of pictures. Too many clicks. Also, since we were shooting video as well, I wanted a way to setup one site with pictures up top and the videos down below, which wasn’t possible with Picasaweb.
I tried a few things to make this work. I set up a tumblr.com account and had the rss feed from picasa push to the page, updating the video whenever the new one was posted. This worked ok, but the video always dropped off the front page unless I manually changed the template to show the video at the bottom, not ideal. Also, the wife wasn’t happy with the “very web 1.0″ design of just a single photo on top of another photo in a vertical column. She wanted thumbnails, I agreed.
Then I tried using LastRSS and MagpieRSS to parse the feed and created a page of my own. The problem then was the stupid Google RSS feed, which rather than including a plain url of an image in the description tag, formats it into a table (a table, seriously?) with comments, title, etc. I just want the stupid picture and title, that’s it. Don’t give me tables, just give me an img tag!! I tried some CSS trickery and set the table td to display none, unless it’s an img which would display, but that was a crappy hack and I lost the titles and links to the images, not gonna work.
Solution:
So what I ended up doing was take the rss feed from picasaweb and stripping out the img url and titles manually. I used some code I found by Aristidis Karidis to parse through the images on a webpage, just repurposed it to parse through the images I wanted from the rss feed. The rest was just trying to figure out Picasa’s weird url naming structure and making it work.
All that’s required is a simple require_once of the imageGrabber.php file and a form pushing POST data with the url of the Picasa RSS feed. I’ve added some Javascript to the index.php to enable to thumbnail to change the large image, title and link so users can visit the picasaweb page directly and download the high-res version.
Make sure you’re running php5. I use simplexml_load_file(); to sift through the rss feed and pull out the image links and album titles. If you aren’t running php5, you’ll get a “Fatal error: Call to undefined function” since php4 doesn’t know what simplexml_load_file means.
Update 1-28-08: Now, I’ve run into a problem with this design. There’s way too many images to keep the large version visible after scrolling to the bottom. My live version is now using lightbox to make the thumbnails show the large version. I’ve also changed to the 800 pixel versions rather than the 400 pixel versions I had before since the lightbox allows the pictures to lay overtop.
Update 2-2-08: Found another problem. I had the function as well as the code in the same imageGrabber.php file. While this is fine for single feeds, if I wanted to have multiple feeds on a page it would crash. The solution was to separate the imageGrabber function into it’s own file and create a new file I called displayImages.php with just the image processing stuff. Wherever you want to put images, just declare the $url variable with the Picasa RSS feed and include the displayImages.php file. Much better solution and is now standard with the package.
Update: 4-8-08: Seems Google changed their RSS today to include enclosures for 72px, 144px and 288px images as well. That broke the script, since I was only looking for enclosure:thumbnail rather than a specific size. Never fear though, updated scripts are now available with a better solution.
What’s different? Well now instead of the enclosure tag, I’m going to the description tag and stripping out the image from the table we love so much. The catch is that this image is 288px, so an extra line of code was needed to change that into 144px. I think this will be a much more future-proof solution, but if they change it again, I’ll figure out a way to make it work.
Also, look for an announcement soon for a hosted version of these scripts you can use to share your galleries. I hope to have it online by the weekend.
Update: 4-24-08: Been working on the new hosted version of this script. It’s not ready yet, but it’s getting close. Having a few friends test it out now and they seem to like it. Should be easy enough for your Mom to use, least that’s what I’m aiming for.
There was a comment from Greg who had a great idea about how to optimize the script. I’ve played with it a bit and came to the conclusion that Greg is a genius. I think I was so set in my method that I couldn’t think of the easy way to make this work, Greg’s way of replacing just the *description* section, not the whole xml.
I updated the script to this new method, only two files required now, and the package is down to 3509 bytes
from 4657 bytes, a good bit of code.
You’ll also see I removed the javascript from the downloadable code with v5, was never a big fan of it to be honest. The example page though is now using Slimbox to power the large images. It’s like the Lightbox you see everywhere but much faster and smaller. Of course, once you download the script you can do whatever you want with it.
Update 9-24-08: There’s a great photography site called True Life Pixels Photography using the script to display their photos. Added a little white :hover to the thumbnails, nice touch. Check it out for another example, clicking on the tabs loads the sample photos.