Picasa wordpress sidebar widget

Posted in Open Source, PHP, Programming, wordpress by sandaruwan on June 2nd, 2007

When I saw cool random photo display gadget at wela’s blog, I also wanted something like that. Earlier I had a gallery2 installed, but when Google released picasa, I found it much easier. It actually optimizes the photos and then uploads. So, I switched to picasa. Fortunately, picasa have RSS feeds for each album :).

At first I thought of writing a normal wordpress plugin, but then since it’s in the sidebar, I thought of writing a widget. My blog was running wordpress 2.1 and either I had to install the widget plugin or install the new wordpress 2.2(Wordpress 2.2 comes with the builtin support for widgets). Since there are some bug fixes in version 2.2, I upgraded to that.

Then, after coping about three lines of codes into my theme, I widgetized it. Then, finally it’s writing the widget.

Actually, the widget was fairly easy to write because the wordpress itself has a rss parser. Even though, it doesn’t completely parse the RSS given by picasa, I managed to use some regular expressions and get the necessary values.

When I finished writing the widget, I realized that there is no point of downloading the RSS each time when someone requests the site. So, I put a download delay time and the stored the parsed RSS results as a wordpress option.

If you want to try this, click here to download. Copy the file into wp-content/plugins/widgets directory. Then, activate the plugin and add that to the sidebar from Presentation -> widgets. (You should have widgets plugin installed)

43 Responses to “Picasa wordpress sidebar widget”

  1. Jason Says:

    This plugin is great! I have tried many others and they simply do not work as well as this one does. Thank you for it!

    June 3rd, 2007 at 9:31 pm

  2. Lon Says:

    awesome, works simply and sweetly. i only wish the photos could be resized a tad smaller, but i suppose i can live with it. thanks so much for developing and sharing!

    June 14th, 2007 at 10:02 am

  3. Lon Says:

    i’m no coder, but is there something in the php file that i can edit to make the width of the photos a bit smaller?

    June 14th, 2007 at 10:14 am

  4. sandaruwan Says:

    Hey Lon, Thanks for the comments. You can use a smaller size by removing the line 55($src = str_replace(”imgmax=288″,”imgmax=160″,$sub[1]);). hmmm.. I should also put this in the admin panel….

    June 14th, 2007 at 4:16 pm

  5. Lon Says:

    thanks for the quick response. i tried removing it, it didn’t seem to make a difference. am i suppose to edit it to some other size there instead?

    June 14th, 2007 at 10:20 pm

  6. sandaruwan Says:

    That’s because the image urls are arleady cached in the database. Goto the widgets section and set the RSS download delay to 0. Then, by visiting your site, it’ll update the urls. After that you can reset the download delay.

    June 14th, 2007 at 10:58 pm

  7. Lon Says:

    thanks, i just tried that a few times, and even tried deactivating/re-activating the plugin and doing full refreshes. when i remove that line of code:
    $src = str_replace(”imgmax=288″,”imgmax=160″,$sub[1]);

    it ends up with only text links and no photos at all

    June 15th, 2007 at 7:26 am

  8. sandaruwan Says:

    oppss.. sorry.. you should change that line to $src=$sub[1]; or you can change the next line to “$photos[]=array(”photo” => $sub[1],”link” => $item2['link'],”title” => $item2['title']);”

    June 15th, 2007 at 7:34 am

  9. Lon Says:

    sorry to be such a nuisance. but if i go with the first change you suggested

    change that line to $src=$sub[1];

    the pictures actually get a lot larger (I’d like them a bit smaller)

    and the second option:
    “$photos[]=array(”photo” => $sub[1],”link” => $item2[’link’],”title” => $item2[’title’]);”

    seems to just give me a blank space?

    it’s not a big deal if you don’t have time for this, maybe it’s something you can debug later. I even tried adjusting those numbers which i assume are pixels to smaller numbers and the pictures still come our large for some reason.. strange.

    June 15th, 2007 at 7:53 am

  10. sandaruwan Says:

    oh.. i have mistaken that again…. it was using 160 as the size.. by changing that line, it makes the maximum size to 288.. unfortunately, picasa only gives you 160, 288 options.. the program has to be changed to handle that…i’ll add that feature sometime later.. when, i’m free.

    June 15th, 2007 at 8:10 am

  11. Lon Says:

    thanks, i really appreciate it. this is still by far the simpliest and most workable picasa widget that i’ve tried.. i think i’ve tried 4! thanks again and looking forward to updates.

    June 15th, 2007 at 8:13 am

  12. THE CRACK » Blog Archive » Wordpress, Picasa and RSS Says:

    [...] Now you can see three random photos on my sidebar and every time you refresh the page there are three new photos. If you are using wordpress and picasaweb you can also try this. Click here to download the widget. Copy the file into wp-content/plugins/widgets directory. Then, activate the plugin and add that to the sidebar from Presentation -> widgets. If you encounter any problem leave a comment on this page or here. [...]

    June 22nd, 2007 at 11:28 am

  13. sqjtaipei Says:

    finally… found a simple solution for what I wanted
    great job
    thanks for this great plugin/widget

    June 25th, 2007 at 6:43 am

  14. SQJTaipei Says:

    sandaruwan
    I still agree with my earlier post… this is a great plugin/widget

    I’m having one small issue… when I view my site on my laptop (an old one with a small screen in 1024 res) the picasaweb images show up as perfect size thumbs… they fit in the sidebar perfectly. But when I view it on a larger monitor the thumbs are about 2 times as wide and stick out past the edge of the sidebar. It is nice to see the bigger pics, but It looks funny. You can see my site by clicking on my name.

    Do you know a way for me to make those smaller?

    I don’t really know anything about programming… does your plugin allow for 288px wide thumbs if there is room and if not it goes to 160px? I think the thumbs on my lappy are 160 and the ones on my desktop with the big screen are 288. I’d just like them to be 160 all the time.

    Thanks for the plugin.

    June 27th, 2007 at 5:04 am

  15. Thomas Says:

    Hi Sandaruwan
    THANKS FOR a super widget. I love it!

    Can I in any way edit the file to make the clicking on a photo open op in a new window? I tried adding a target=_blank” at the end of the a href tag… however, this makes the plugin disactivate…. can you help??

    June 27th, 2007 at 5:22 am

  16. sandaruwan Says:

    Hey guys thanks for the comments..

    SQJTaipei,
    Google seems to have changed their RSS format. I have upgraded the widget. Please download that again, and make your download delay to ‘0′ to re-download image urls from the album. Once it started displaying, you can change that.

    Thomas,
    change line 74 :
    $str.=”<p style=\”text-align:center\”><a href=\”$selected[link]\” target=\”_blank\” rel=”nofollow”><img border=\”0\” src=\”$selected[photo]\” alt=\”$selected[title]\”/></a></p>”;

    and it should work. I think you probably forgot to escape the ” characters.

    June 27th, 2007 at 8:11 am

  17. sqjtaipei Says:

    @sandaruwan
    I came back to this post to let you know that my last post was incorrect… it wasn’t related to screen size but was actually displaying the wider pics all the time.

    And I discovered that you had already replied to my post.

    Your solution worked perfectly… I downloaded and upped the new picasa.php and it worked right away.

    Thanks so much.

    June 27th, 2007 at 8:19 am

  18. geekzy Says:

    I have this error what should I do?

    Warning: Invalid argument supplied for foreach() in /home2/geekinfo/public_html/dbanjeers/wp-content/plugins/picasa.php on line 53

    June 28th, 2007 at 8:11 am

  19. Tom Says:

    It does not work for me.

    I only get ‘x’ boxes. I looked at the ‘x’ box properties and they were linking to my wordpress directory (http://www.mysite.com/wordpress)

    Also, the picasweb I’m using is localized meaning it’s not google.com but google.co.kr (I’m in Korea)

    I tried changing the .com in this line with co.kr but without any luck. I even tried changing the hl=en_US value to hl=ko_KR but nothing.

    $rss = fetch_rss(”http://picasaweb.google.com/data/feed/base/user/”.$user.”?kind=album&alt=rss&hl=en_US&access=public”);

    Please help, thx!

    July 3rd, 2007 at 10:24 am

  20. sandaruwan Says:

    Tom,

    I’m in process of upgrading the widget from the feedback I got. If you can show me your picasaweb URL, I’ll be able to update the widget.

    July 3rd, 2007 at 3:22 pm

  21. Tom Says:

    Here it is.

    http://picasaweb.google.co.kr/ineverpay/Stuffs

    July 4th, 2007 at 11:20 am

  22. Carl Says:

    Looks promising, but how does one configure the widget to use the correct Picasa user name. Edit the php file directly?

    July 4th, 2007 at 12:57 pm

  23. sameer Says:

    For some reason the plug in will ONLY display 1 photo and won’t cycle through my picasa album. The website is here:
    http://xoch.reemasville.com

    and the album is here:
    http://picasaweb.google.com/vohra.sameer/Xochitl

    Can anyone help me out?

    July 6th, 2007 at 9:30 am

  24. reemas Says:

    I am having a problem with the plugin refreshing the cache / displaying more than 1 photo from an album.

    I set the cache to 0 and waited for the cache to update. But for some reason, my plug in ONLY displays ONE photo from my album. It doesn’t go through them randomly. Any ideas why?

    Hope someone can help, thanks!

    July 6th, 2007 at 9:45 am

  25. sandaruwan Says:

    Hello Reemas/Sameer,

    I have gone through your site.. and it actually cycles through the photos. May be you’ll see the same photo over and over again because it picks a random picture each time, you only have 4 photos in your album. You can try refreshing the page many times, or upload some more photos.

    July 6th, 2007 at 10:14 am

  26. reemas Says:

    hey there. i actually created a new account and login. but just so you know, it was stuck earlier on just one photo. I tried many times. then i went to picasa and renamed the album.

    still only one photo showed, however, this time when i clicked on the one photo, google/picasa gave me an error saying the album no longer existed.

    i’m assuming the photo viewer you wrote was using an old cache even though i kept refreshing the cache by setting the delay to 0.

    i created a new account for now. thanks for looking into it, and i hope you keep updating this awesome plugin!

    July 6th, 2007 at 11:45 am

  27. reemas Says:

    Feature Request:

    I think it would be great if you could add multiple instances of your plugin in the sidebar, yet restrict each one to a specific album in picasa.

    For example I can title one instance of the plugin with New York trip and it will only show photos from my NY album.

    Anyways, thanks!

    July 6th, 2007 at 7:47 pm

  28. damian Says:

    hey!

    this is an excellent tool! but i have to agree with reemas: is there a posibility to show pictures from just ONE album of my picasa account?

    thank you!

    July 10th, 2007 at 9:41 am

  29. sandaruwan Says:

    Hello all,

    Thank you for the comments. The widget has been updated.

    Check http://www.sandaru1.com/2007/07/11/picasa-widget-updated/

    Thanks.

    July 11th, 2007 at 10:57 pm

  30. Alex Says:

    Hi Sandaruwan,

    your plugin is great. Is it somehow possible to have the picture not all under each other, instead having to little thumbnails next to each other and two underneath, like a quader with 4 pictures. I try to do it with my css but I can’t make it :( . YOu can see what I mean on my testing website on the right nav . There is your plugin listed and right under it, the style I would like to have it.

    Would be great if you can help.

    Thanks a lot

    Alex

    July 13th, 2007 at 10:33 am

  31. sandaruwan Says:

    Hello Alex,

    You just have to remove the “p” tags and put them inside a div with the id - “recentphotos”. Try doing this :

    change line 89 to

    $str.=”<a href=\”$selected[link]\” rel=”nofollow”><img border=\”0\” src=\”$photo\” alt=\”$selected[title]\”/></a>”;

    change line 91 to

    return ‘<div id=”recentphotos”>’.$str.’</div>;

    then it should display photos with your style.

    July 13th, 2007 at 10:54 am

  32. Alex Says:

    thanks a lot but it didn’t work :) it showed me following error Parse error: parse error, unexpected T_STRING in /home/afrison/public_html/wp-content/plugins/picasa.php on line 89

    thanks

    Alex

    July 13th, 2007 at 7:05 pm

  33. Alex Says:

    sorry, I meant :( and not a :)

    July 13th, 2007 at 7:06 pm

  34. nomad Says:

    Hi there, thanks a stack for this useful little widget. I notice someone else also asked but so far I have not been able to figure out how to configure this widget, can someone help us dummies use this thing please. Thx again!

    July 17th, 2007 at 9:30 am

  35. andy Says:

    I just installed the picasa widget but all i get is x boxes linking back to my site. I saw another user in Korea having the same issue but didn’t see a fix. Any idea on what i messed up? Thanks.

    July 17th, 2007 at 2:39 pm

  36. Ben Says:

    Hi Sandaruwan,

    Many thanks for the great widget!

    I have the same feature request as Alex: could you make the widget do a quad-matrix of images, please?

    I tried the code change you suggested. The widget still functioned, but it didn’t make any difference (I still got a column of images.) I am not a coder, by the way, so it would be great to have this as a configurable selection in the config panel.

    Thanks again, keep up the great work!

    July 17th, 2007 at 4:18 pm

  37. sandaruwan Says:

    Hello guys,

    Thank you for the comments. I think some of you are still using the old version of the widget. Please try the new one :
    http://www.sandaru1.com/2007/07/11/picasa-widget-updated/

    Ben,

    The changed line is for only Alex’s blog. It’s on his CSS styles. I will have this feature in the next release.

    Thanks.

    July 18th, 2007 at 9:37 am

  38. Alex Says:

    Hi Sandaruwan,

    even after I changed the lines, as you recommended it works now but I don’t get the results as it should look like :( . I really appreciate any help

    Alex

    July 23rd, 2007 at 12:26 am

  39. Sandaruwan Says:

    Hello Alex,

    You might have to change your css files. I’ll release another version of this widget with this feature as soon as possible.

    - Sandaruwan.

    July 23rd, 2007 at 9:45 am

  40. Alex Says:

    Hey Sandaruwan,

    that would be great. I’m looking forward to see your new plugin :)

    thanks

    Alex

    July 24th, 2007 at 6:49 pm

  41. tK Says:

    Hello! I’m trying to use your widget (latest version here) but it doesn’t work. It seems to pull images from a wrong path, I found a “s150″ in the path but right-clicking my photos from within picasa web it looks like the right path is “s144″. Maybe it is due to localization or something like this.. could you please take a look? Address is http://www.lazycoder.net.

    TIA, tK

    August 2nd, 2007 at 4:25 am

  42. MSN Display Pictures Says:

    Hi! You just won one more regular reader ;)..
    Good luck!
    l8rz. Big lol

    August 2nd, 2007 at 12:10 pm

  43. sandaruwan Says:

    Hell tK,

    That’s very odd. I’m not really sure what’s going on. Try changing the picture size from the admin interface.
    -
    Sandaruwan.

    August 2nd, 2007 at 10:50 pm

Leave a Reply