(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.
mhorsch | 22-Feb-08 at 11:46 pm | Permalink
Hi,
I stumbled accross this solution of yours and I love it! I’m curious if you know, off hand, how to get it to work without having to click a button..
For instance, how to hardcode in the feed and just have it load it without clicking that button.
Thanks!
law | 23-Feb-08 at 9:09 am | Permalink
Sure thing. I actually thought this was the default behavior in the package I put together, but I see it’s not.
I just uploaded a new *.zip with the updated code for you to change (PicasaGallery_v3.zip). You can grab it from the Download Code link.
In a nutshell, all you need to do is declare $url as your feed URL.
On the example page, and old version, I use a form so you can try it out with your own feeds. All that’s doing is taking the POST data from the form you submit and making the URL you entered the $url variable. You just need to tell the $url variable a fixed URL.
Take a look at the new code and lemme know if you have any questions. Also, if you get it up and running, let me know the link so I can check it out.
jmatthews | 03-Mar-08 at 8:57 pm | Permalink
Hi there,
This is a great set of scripts! I’ve been trying to work out a solution to exactly the same problem for my brother and his wife (displaying galleries from picasa on a little website for their new baby), and this is perfect. I’ll forward you a link to their website once it’s worked out.
Thanks so much!
law | 08-Mar-08 at 5:23 pm | Permalink
Glad I could help you out. Let me know if you run into any issues.
Forrest | 22-Mar-08 at 9:38 pm | Permalink
getting the following message.
Fatal error: Call to undefined function: simplexml_load_file() in /homepages/6/d173828284/htdocs/pictures/displayImages.php on line 14
http://pictures.winterburn.us/
I love the idea of this script, perfect for what I, and I’m sure many others need.
Forrest | 22-Mar-08 at 10:03 pm | Permalink
It appears that my previous comment is a php4 vs. php5 issue. Please disregard. see http://members.theultimatenichestore.com/viewtopic.php?f=24&p=63
law | 23-Mar-08 at 9:04 pm | Permalink
Yeah, was just gonna say it sounds like a php4 issue. I’ll add something to the post to note that it requires php5 to run.
Did you get it working eventually?
Hans | 02-Apr-08 at 3:13 am | Permalink
Hi, i have one question. What i need to modify to preserve orignal size of picture uploaded on picasa when i click on thumbnail?
Thanks
law | 02-Apr-08 at 6:59 am | Permalink
Depending on what you want to do, I’ll explain how it all works and give you a few options.
Picasa’s urls dictate what size the photo will be. Just look for the part of the url with /s###/ to size. You can change it to s144/s288/s400/s800 and it’ll work. I can’t confirm that it’s *original size* but if you remove the s### from the url all together, it’ll show a large, maybe 1600px, image.
For example:
144px thumb = http://lh4.google.com/lawandamanda/R-WgpBr227I/AAAAAAAAECc/xZ-3yzPBy2U/s144/DSC_5028.JPG.jpg
400px thumb = http://lh4.google.com/lawandamanda/R-WgpBr227I/AAAAAAAAECc/xZ-3yzPBy2U/s400/DSC_5028.JPG.jpg
Really large image = http://lh4.google.com/lawandamanda/R-WgpBr227I/AAAAAAAAECc/xZ-3yzPBy2U/DSC_5028.JPG.jpg
So to modify the script to show the huge image, find this line in displayImages.php
$largeimg = str_replace('s144', 's400', $image);and replace with this
$largeimg = str_replace('/s144', '', $image);What we’re doing here is replacing the /s144 from the feed url with empty space, so removing the thumbnail from the url all together.
There’s a catch though…
While the URL will work and you can download the image, for some reason when I link to it from Lightbox or within a page, it forces a download and won’t display on the page. Maybe this will work for you, maybe not.
If you’re looking for a solution to show a large image, like a Lightbox script or something, I’d recommend going with the s800 thumbnail size and linking to the huge image from that photo. You can find an example of that on http://maxineingraham.com where I use it with Lightbox.
The code looks like this for the 800px thumbnail:
$largeimg = str_replace('s144', 's800', $image);Let me know if this helps.
Hans | 02-Apr-08 at 8:04 am | Permalink
Hi, thanks for your ansver.
Another question is, is gallery crawled by google and other serach engines. Indexed by name of picture as keyword, because there is no alt tag in pictures link?
So if name of my picture in album is cute_dog.jpg, google will ads keywords “cute” and “dog” to his serch engine database?
Hans | 02-Apr-08 at 9:20 am | Permalink
Yes another thing. I found this java script based slideshow for picasa
http://anton.shevchuk.name/internet/google/google-photogallery-picasa/
Is possible like here, when you click on center of image you will not get redirect to picasa but it ask you to download image?
law | 02-Apr-08 at 11:04 am | Permalink
Hey Hans
Everything is crawled by google unless you say otherwise. The way I have the example and the downloaded code, I’ve used CSS to put the small 144px thumbnails as centered backgrounds rather than displaying them with img tags. The title tags for the links are the name you set for each photo.
It’s easy enough to display the images inline with the proper alt tag. Just replace line 44 of displayImages.php with this code. You’ll also want to change the CSS for li, li a to remove the set width and height.
<li>
<a href="<?php echo $link; ?>">
<img src="<?php echo $image; ?>" alt="<?php echo $title; ?>" />
</a>
</li>
I zipped this modified version of these scripts with the images inline and the image title next to it here and you can see a demo here.
Now, having it link to the large image is more difficult. I did a little research and it seems google won’t allow for external linking to any images larger than 800px. So, either you cache the 1600px images locally, then link to them on your server (messy) or just link to the picasa page directly.
Here’s where I found the discussion: http://groups.google.com/group/Google-Picasa-Data-API/msg/571442e4cf2de1af
I’ll keep playing with the idea though, there’s probably a solution I’m just not thinking of.
Greg | 14-Apr-08 at 8:08 pm | Permalink
I’ve been looking for a solution for creating a thumbnail gallery out of Picasa … so thanks!
I was wondering if you ever thought of using a regular expression to pull the image out? I was trying this earlier:
<?php
// link to rss feed
$rss = “http://picasaweb.google.com/data/feed/base/user/greg.tammi/”
. “albumid/5188761646096587857?kind=photo&alt=rss&hl=en_US” ;
// load rss data
$rssData = file_get_contents($rss) ;
// dump rss data into simplexml object
$xml=simplexml_load_string($rssData) ;
// regex pattern to match imgs
$pattern = “/\<a href.*\\/” ;
// display imgs
foreach($xml->channel->item as $img) {
$desc = $img->description ;
preg_match($pattern, $desc, $links) ;
echo $links[0] ;
}
?>
Wondering what your thoughts are on using this over the displayImages and imageGrabber code pieces?
Greg | 14-Apr-08 at 8:19 pm | Permalink
sorry for the spam, can’t get the whole regex pattern to post right … so I have it here:
http://gregandliz.dyndns.org/regex/pattern.htm
law | 14-Apr-08 at 8:51 pm | Permalink
Greg’s full regex is here, filtered out the other comments
/\<a href.*\<img style=\".*\" src=\".*\" alt=\".*\"\/\>\<\/a\>/Interesting idea for sure, would make the code much cleaner and smaller. I’ll play with it, good thought.
Yvette | 30-Apr-08 at 10:17 am | Permalink
Hi! Thanks for this, it works great.
Micah Wardell | 19-Jul-08 at 9:39 pm | Permalink
Used your code for my wife’s blog she was wanting the exact kind of thing and I am still real new to web development and this was perfect thanks so much!!
Bob | 29-Jul-08 at 10:17 am | Permalink
Has anyone tried taking your code above and make it a WP plugin? The code seems great and it would be really awesome if it was bundled in a way to easily use in CMS tools like Wordpress. Any assistance would be great.
law | 29-Jul-08 at 10:47 am | Permalink
Thanks for your comment. I haven’t thought about making this a plugin, but I think it’d be pretty easy. Not sure if anyone else has done it, but I’ll take a stab this weekend when I have some time.
Lawpower’s Code :: Customize your PicasaWeb Album - ShareMyAlbum.com | 27-Aug-08 at 6:23 pm | Permalink
[...] and useable. Of course, I’m using the same open source code I posted a few months ago to parse through the Picasa RSS feed and grab all the photos. so even if ShareMyAlbum.com doesn’t do what you want it to, at least [...]
Fredrik | 08-Sep-08 at 8:08 am | Permalink
Hi,
Thanks for sharing this. On a side-note:
On a site I am working on, I’d like to first display an overview of Picasa albums, and on clicking the thumbnail display the album gallery as per the gallery here. This would mean I’d need to retrieve/pass the corresponding RSS to the new page I am opening. Any ideas how I could achieve this without hardcoding the rss-url in the album view?
Lawpower’s Code :: Picasa Web Albums: Select Album by User | 08-Sep-08 at 9:06 am | Permalink
[...] initial development of my Picasa RSS gallery required the user to paste their RSS feed into the tool to get their albums. Few problems with [...]
law | 08-Sep-08 at 9:09 am | Permalink
Fredrik:
Glad you like it. Funny enough, I posted something pretty similar to that just today. It’s used on ShareMyAlbum.com and should fit the bill.
Select Picasa Album by User