(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.
Update 1-27-09: It’s amazing to me that this post keeps on living. Just means there’s a lot of people out there with the same problem I had. Glad I could help you all.
I’ve made a new update to the code to reduce some redundancy and eliminate the need for fopen() to be used. This should help out a few commenters who had trouble. It’s available in the Download Code button up top.
Quick Plug, if you like this code and actually use it, please support the site the next time you shop at Amazon by clicking through this link first. No cost to you, we just got a kickback on sales if you order through our link. If you wanted to donate, there’s links on the left column for paypal, or you can always get something off my Amazon wish list.
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
fredrik | 12-Oct-08 at 1:52 pm | Permalink
I get this error message on trying your v5:
Warning: fopen(rss.xml) [function.fopen]: failed to open stream: Permission denied in /www/business/8669/test/displayImages.php on line 4
PHP Version 5.2.6
Any ideas?
thanks,
F.
Rob Nieuw | 27-Jan-09 at 12:09 pm | Permalink
Hallo I really like your idea Picasa –> rss
Did some test with Picasa Gallery, but my hosting company does not support fopen
quote>Warning: fopen(rss.xml) [function.fopen]: failed to open stream: Permission denied in.
I tried to get magpierss into displayImages.php (Magpie parses a RSS feed into a simple object, with 4 fields: channel, items, image, and textinput)http://magpierss.sourceforge.net
but with no luck, I am not an expert in coding.
channel as $item){
echo “link’>$item->title\n”;
}
$items = $rss->channel;
echo “\n”;
foreach ($rss->items as $item ) {
$title = $item->title;
$content = $item->summary;
// The Dirty Work!
//
// Pull the images from the *description* section
//
$quotes = array(’”‘, “‘”, “\n”);
$imgContents = str_replace($quotes, ”, $content); # Strip ” and ‘ as well as \n from input string
$imgContents = stristr($imgContents, ’src=’); # Drop everything before the ’src’
$endTagPosition = stripos($imgContents, ‘alt’); # Position of the end tag ‘>’
$img = substr($imgContents, 4, $endTagPosition – 4); # Get everything from src to end tag –> ’src=”path” something>’
// Swap out the s288 from the small image to make the thumbnail and larger images
//
$img144 = str_replace(’/s288′, ‘/s144′, $img);
$img800 = str_replace(’/s288′, ‘/s800′, $img);
?>
<li style=”background: url(”) center center no-repeat;”>
<a href=”" title=”">
<?php
}
echo “\n”;
?>
thx in advance
law | 27-Jan-09 at 12:41 pm | Permalink
@Rob Check out hte latest version I just posted, v6. Does away with the dependancy on fopen.
Let me know if that works for you.
Rob Nieuw | 27-Jan-09 at 1:18 pm | Permalink
THX Law v6 works really great, awesome job.
last Sunday I downloaded version 5 and now v6 great
again big thanks
Rogier Gerritse | 15-Mar-09 at 1:06 am | Permalink
Thanks for this great script! Is it possible to start galleries on a new line? Now the other gallery names are shown in line with the previous one.
law | 15-Mar-09 at 5:20 am | Permalink
@Rogier You have a link to your site I can check out? Maybe an html mockup of what you want it to look like?
Rogier Gerritse | 18-Mar-09 at 2:00 am | Permalink
@law: I already figured it out, not nice but it works: I changed the last line of displayimages.php to echo “\n”;
Is it possible to set a limit to the amount of pictures Picasa Gallery will read?
law | 18-Mar-09 at 5:22 am | Permalink
Nice, glad you got that sorted.
The way I’d limit the number of images to load is like this:
$numberOfImages = 0;
foreach ($items->item as $item){
if($numberOfImages < 20){
$title = $item->title;
// And all the other code for pulling the images and displaying them
}
$numberOfImages++;
}
Basically, set a variable equal to 0 before you do the
foreachloop and add 1 to the variable every time you load an image. All you’ll need is an if greater-than statement in there to stop displaying images when you get to 20, or whatever number you want.Works…
Ernesto | 06-Apr-09 at 8:15 am | Permalink
You’re work is amazing, I’ve created a test site here
http://rhoamingparties.com/v3/gallery.php
which you can view.
I know this is a strech, but i’d figured it’d be worth a shot.
Is it possible to edit the code to strip single images from the picasa database instead of all the images.
for example
Once a user goes to the url above…instead of having the facnybox feature enlarge the photo…it will go to for example photos-detail.php and post the large version of the photo…
The reason being is that i’d like to introduce shareing features on the website for my customers…so then can easily share photos..but also keep track of the pages.
I’m not a programmer per say…so it might be a stupid question..but any help would be appreciated..if you’re in the boston area…drinks are on me!
law | 06-Apr-09 at 8:35 am | Permalink
Hmm, not sure I totally understand what you’re trying to do. Maybe a customer sees a page full of images and a little button below that lets them send single images to friends?
You can easily pull just a single image from the feed, just reference the url of that image. If you want just that single image to be large when someone visits the page, you’ll probably need to enter the url into a database and reference a unique id to pull it. URL would look something like http://rhoamingparties.com/share.php?id=12345 which uses $_GET['id'] to pull the URL of the image from a database, then display the image on your page.
Something like that?
Ernesto | 06-Apr-09 at 12:44 pm | Permalink
Ah I see, it seems like the 2nd option is the way to go…once i get it up and running i’ll be sure to send it your way. that is as soon as i find a programmer that will work for cheetos!
thanks again man