Picasa web album slideshow – Development guide
I was looking for a application to embed slideshow using pictures from picase web album. I found some plugins which can be used in blog or myspace. Some of them uses the picasa slide show url opened in a iframe or div. Then you will have less control on the slideshow as it is controlled by the slideshow application of picasa. But I required more control on the images from picasa.
I was looking for some application which will fetch/store all the images for an album in picasa and create a slideshow with more control on the images. I found nothing thats suites my requirement. So I started to design an application of such kind. On the basis of functionality I sub devided it into two major part. First is fetch the image related information for an album and store it if required. Second is display the slideshow using those image information.
In picasa you can view the pictures as set or individual but you won’t get actual picture name or its location. So I found now simple way to get the pictures name and their location. While searching more for such option I found there is a RSS feed for each album. The RSS feed provides image names and its location details. It makes my job easier. Now objective became to process the RSS feed to get the image related information. For this purpose I used XML-RSS package from PEAR. Here is snapshot of the code I wrote to process the feed:
[code lang=”php”]
parse();
$rssArray = $rss->getStructure();
$PicasaDataArray = array();
$InfoArray = array();
for($C=0; $C
‘image’ => $rssArray[$C][‘enclosures’][0][‘url’],
‘link’ => $rssArray[$C][‘link’],
‘description’ => $rssArray[$C][‘description’],
);
}
elseif($rssArray[$C][‘type’] == ‘image’)
{
$AlbumTitle = $rssArray[$C][‘title’];
$AlbumPicture = $rssArray[$C][‘url’];
$CreateDate = $MetaInfo[‘lastbuilddate’];
}
}
// this $PicasaDataArray contains all the picture related information of an album from picasa web.
?>
[/code]
Now this $PicasaDataArray can be stored in files/database or can be directly used for the slideshow. While processing the feed by this I found the feed contain other information like title, description, link of the album, its last build date etc. So I modified the code a little more to store these information too. So the first part of my application is complete.
Now the second part – slideshow using $PicasaDataArray. For this section I didn’t tried to put my head to develop slide show application as I had already seen some very nice attractive slideshow application. They are also easy to use and configure. One of my favourite is Lightbox JS. Another good slideshow script is Highslide. Both of them are very nice and easy to configure. So I used one of them for my purpose. Here is another snapshot of code
[code lang=”php”]
parse();
$rssArray = $rss->getStructure();
$PicasaDataArray = array();
$InfoArray = array();
for($C=0; $C
‘image’ => $rssArray[$C][‘enclosures’][0][‘url’],
‘link’ => $rssArray[$C][‘link’],
‘description’ => $rssArray[$C][‘description’],
);
}
elseif($rssArray[$C][‘type’] == ‘image’)
{
$AlbumTitle = $rssArray[$C][‘title’];
$AlbumPicture = $rssArray[$C][‘url’];
$CreateDate = $MetaInfo[‘lastbuilddate’];
}
}
?>
‘.$ImageInfo[‘title’].’
‘;
}
?>
[/code]
I made this code simple and easy to use. Though I have used xml-rss class from pear but it can be repalced by and standard xml-rss parser class. Experienced developer can modify this code or enhance its feature much more as per their requirement. If like to use this code or if you have any suggestion let me know about it via your comment.
I was very excited when I found this, and began work immediately to implement it to try it out. I have been looking for days for a straight forward implementation of this that doesn’t provide links back to Picasa. Unfortunately, after a few hours figuring this out, downloading, unpacking and de-tarring the Pear files, downloading and installing all the Lightbox files, learning about PHP and working it all out, I came to realize that my web site hosting company (Homestead) does not support PHP (shaking head).
Is it possible to implement the RSS parsing section in the site code itself if the feed (array) is being piped directly to the display code (not stored)? I am not an experienced code developer so forgive me if the answer is obvious. If it is possible, would it make sense to do this in JS? Did you by chance implement this in JS first and then convert it to PHP? It would be a stretch (read: time consuming learning experience) for me to attempt to convert it myself. Something I just don’t have time for right now.
Do you have an example site you can provide a link to that shows the result of the above implementation?
Also, my Picasa RSS string had an authentication code embedded into it (….alt=rss&kind=photo&authkey=Gv1sRgCKSzvd7g97Xs2gE&hl=en_US”). Is this new since you published this? I did not see one in your RSS string.
Rss feed is basically data in the XML format. So Parsing section can be done in site code too. But it will be a time consuming process to write the bug free code. PEAR classes or other php classes are meant for making your job easy.
Implementing this into JS code is almost same as designing the plugin for Picasa album show. I am sorry to say that I haven’t got that time to do that. But if you are experienced with designing the plugin then I think it should not take much time to do that.
The project where I have used this code is now running in the beta stage. When it will run in the production server as main site then only I can provide the reference. You can understand the responsibility towards client.
I am not very sure about the authkey in the rss feed. Is your album available for public view? In picasa there is a album visibility option, I don’t know if you have used it or not. Or may be you haven’t shared your album.
Susenjit, thank you very much. I would use Picasa’s embed code except for all the link backs to their site. Like you, I need/want to avoid these. I am not experienced (yet) with writing (only using) JS code. I am not sure what you mean when you refer to designing a “plugin” in this case.
You are correct. I have not shared my album or made it public. Perhaps that is the reason for the authkey.
I understand about the example with your client’s site. I was suggesting perhaps you could set up a quick demo on your own site with a few pics of your own in PWA. I assume the code you wrote isn’t proprietary and owned by your client (or it wouldn’t be here). If you can’t, oh well. Thanks anyway.
I learned some more in attempting to implement your solution. So close. Homestead has their head in the sand (no PHP). But for now I am tied to them. My quest for a clean non-PHP solution to display PWA photos with no link backs to PWA continues….
I don’t think doing this thing only using JS is possible. Using simple javascript you can’t fetch rss feed from the remote server. So you require either pure server side scripting or AJAX.
Now my client’s project is running as a subdomain of the main site so you can see the example as
http://newsite.arenaparkstreet.com/showcase/graphics.php
or within a week or so you will get it in the main site as http://www.arenaparkstreet.com/showcase/graphics.php
As I mostly busy with clients project, I do marely get time to work for my own site. As a result mine is almost a static site. 🙂
Though I haven’t checked thoroughly but there is a solution provided by google. I wish you can check it if it works for you. It is Ajax Slide show using Google AJAX Feed API.
Could not find a suitable section so I written here, how to become a moderator for your forum, that need for this?
Ohh, sorry to say this but I am not still ready to start a forum. If you have your opinion please post it here as comment so that I can discuss about it.
It’s really quite fun isn’t it? We’re finding out how the same we all are. Guess blogging shows we have a lot more in common than we ever thought we did.
I use both Picassa and Flickr for sharing photos over the internet but i use Flickr more often than Picassa.,..
i would prefer to use Flickr compared to Picassa since flickr have more features. ‘