New Blogger Widget for Picasa Web Albums
Notice - as of May 17, 2007 Picasa Web Albums now offers their own easy to use flash embedded slideshow, effectively making this one obsolete.
Picasa Web Albums Now with Slideshows.
Everything here still works, but the native flash presentation from Picasa Web Albums is slicker and probably what you want to use if you want a slideshow.
To follow up on my previous post about Picasa Web Albums now making their data available in JSON, I've gone ahead and worked up a customizable (somewhat) one-click widget creator for the New Blogger.
The widget will work for either displaying your public albums, or for listing images from one particular album. Right now only one of these PWA widgets can be displayed on a page.
I've tried to keep it somewhat simple on the options, but here is the complete rundown of what each option means.
The first input box is where you type in your Picasa Web Albums username. Your Picasa Web Albums username is usually(the first part before the @)of your google account username, but can be changed. If you are unsure, goto Picasa Web Albums and sign in. Click on SETTINGS in the UPPER RIGHT of the page and then scroll down to your Gallery URL. Your current gallery url will be in the format
http://picasaweb.google.com/USERNAME
After you enter in your Picasa Web Albums username, then click the Submit link. The page will then fetch the list of albums and display their names in a drop down menu. Select the album you want to display from that list, or choose the Show All Albums option.
Display the Widgets Title -- Select whether or not to display the actual name of the widget on your blog. Defaults to displayed. The default name is Picasa Web Albums but it can be changed when adding.
Show as SlideShow -- This is a poor man's slideshow. Will display one image at a time, rotating them with their links. Is set to default to the SlideShow.
If the SlideShow is deslected, then two additional options appear. To show as either a Vertical or Horizontal strip. They do what they say. If you want a vertical strip of images choose vertical, if you want the images to line up horizontally, then choose horizontal.
Show Album Title as Header -- This sets whether to display the title at Picasa Web Albums for the selected group as a header. Defaults to displayed.
Show Border Around Image -- Sets whether to show a border around the images.
Slide Show Speed in Seconds(10 max) -- If the slideshow is selected, then this sets the interval for displaying the next image. Defaults to 5 secs. 10 seconds is the max.
Number of Images to Display (20 max) -- Sets how many images (or albums) to display. Default is All but the upper limit is 20.
Size of Thumbnails -- Sets the size of the displayed images, you have 3 choices. The default is 160px, a small 64px size, and an extra small 48px.
Border Color (in Hex) -- Sets the color of the images borders (if shown) in hexadecimal format. Default is black (#000). You can use either 3 or 6 hex numbers. The # should not be entered.
After you are satisfied with the settings, click the "Generate Widget and Code" button. You can view or use the raw code if you want (could be used on any webpage) but if you are in New Blogger then click on the "Add Picasa Web Album Widget" button.
If you have never added a one-click widget before you may want to read first the Blogger Help page "How do I add third-party page elements to my layout?" but it's pretty simple. Once the widget has been added you can drag it wherever it's needed.
The widget creator has been tested to work in will probably work from most browsers, has been tested in IE7, Firefox 2 and Opera 9. The displayed widget tested in all those and appears to work in Safari as well. I don't think it would be an issue for any browser, but you never know. Also I think I've tested just about ever possible combination of options, but I may have missed something.
So if you got this far then here is the widget creator.
Ricardo Santos has made a Portuguese translation available at Widgets para o blogger - Phydeaux3
Note - May 14, 2007 Post was rewritten to update the instructions for a sligtly updated version of the widget maker
Note - 4-24-07 Moved my personal Widget out of the sidebar into this post, as I need the sidebar real estate for other stuff. :-)
Note Added-3-22-07 Widget Maker Updated to work with new Picasa Web Albums API changes. Widgets made before this date most likely need to be remade to work fully.
Picasa Web Albums Example Widget
Everything here still works, but the native flash presentation from Picasa Web Albums is slicker and probably what you want to use if you want a slideshow.
To follow up on my previous post about Picasa Web Albums now making their data available in JSON, I've gone ahead and worked up a customizable (somewhat) one-click widget creator for the New Blogger.
The widget will work for either displaying your public albums, or for listing images from one particular album. Right now only one of these PWA widgets can be displayed on a page.
I've tried to keep it somewhat simple on the options, but here is the complete rundown of what each option means.
The first input box is where you type in your Picasa Web Albums username. Your Picasa Web Albums username is usually(the first part before the @)of your google account username, but can be changed. If you are unsure, goto Picasa Web Albums and sign in. Click on SETTINGS in the UPPER RIGHT of the page and then scroll down to your Gallery URL. Your current gallery url will be in the format
http://picasaweb.google.com/USERNAME
After you enter in your Picasa Web Albums username, then click the Submit link. The page will then fetch the list of albums and display their names in a drop down menu. Select the album you want to display from that list, or choose the Show All Albums option.
Display the Widgets Title -- Select whether or not to display the actual name of the widget on your blog. Defaults to displayed. The default name is Picasa Web Albums but it can be changed when adding.
Show as SlideShow -- This is a poor man's slideshow. Will display one image at a time, rotating them with their links. Is set to default to the SlideShow.
If the SlideShow is deslected, then two additional options appear. To show as either a Vertical or Horizontal strip. They do what they say. If you want a vertical strip of images choose vertical, if you want the images to line up horizontally, then choose horizontal.
Show Album Title as Header -- This sets whether to display the title at Picasa Web Albums for the selected group as a header. Defaults to displayed.
Show Border Around Image -- Sets whether to show a border around the images.
Slide Show Speed in Seconds(10 max) -- If the slideshow is selected, then this sets the interval for displaying the next image. Defaults to 5 secs. 10 seconds is the max.
Number of Images to Display (20 max) -- Sets how many images (or albums) to display. Default is All but the upper limit is 20.
Size of Thumbnails -- Sets the size of the displayed images, you have 3 choices. The default is 160px, a small 64px size, and an extra small 48px.
Border Color (in Hex) -- Sets the color of the images borders (if shown) in hexadecimal format. Default is black (#000). You can use either 3 or 6 hex numbers. The # should not be entered.
After you are satisfied with the settings, click the "Generate Widget and Code" button. You can view or use the raw code if you want (could be used on any webpage) but if you are in New Blogger then click on the "Add Picasa Web Album Widget" button.
If you have never added a one-click widget before you may want to read first the Blogger Help page "How do I add third-party page elements to my layout?" but it's pretty simple. Once the widget has been added you can drag it wherever it's needed.
The widget creator has been tested to work in will probably work from most browsers, has been tested in IE7, Firefox 2 and Opera 9. The displayed widget tested in all those and appears to work in Safari as well. I don't think it would be an issue for any browser, but you never know. Also I think I've tested just about ever possible combination of options, but I may have missed something.
So if you got this far then here is the widget creator.
Widget Creator for Picasa Web Albums and New Blogger
Ricardo Santos has made a Portuguese translation available at Widgets para o blogger - Phydeaux3
Note - May 14, 2007 Post was rewritten to update the instructions for a sligtly updated version of the widget maker
Note - 4-24-07 Moved my personal Widget out of the sidebar into this post, as I need the sidebar real estate for other stuff. :-)
Note Added-3-22-07 Widget Maker Updated to work with new Picasa Web Albums API changes. Widgets made before this date most likely need to be remade to work fully.
Picasa Web Albums Example Widget
Posts
Post a Comment
64 comments:
Quite customizable! Slideshow looks cool. I gotta create a picasa album first to make use of this.
Looks great! Time to get rid of the dumb flickr one!
How would I make add this to a regular post and not a widget? :D
ken.vs.ryu
If you just copy/paste the generated code into a post it should work. You would probably want to paste it into edit html mode of the editor, and I wouldn't switch to compose mode for that post either, as sometimes it does weird things to some scripting.
Also, when you publish a post with script tags in it, it will initially give you an error message saying tag is not allowed, but if you check off the box that says stop showing errors then go again it should publish.
thank you Phydeaux! very nice indeed, isnt there a way to set the pictures width to the same width as the sidebar?
Nice work!
When I go to one of my albums on Picasa what am I supposed to do in order to get the information to put into your creator of pictures. I don't see any RSS.
Thanks for any help you can provide
Ron
REGENCY EMAILER-
When you look at either the group of your public albums, or when looking at the page that displays all the images in an album, in the bottom right corner of the box that displays the images there is a link labeled RSS. That's the url you need.
Ricardo Santos-
Well, there could be. I made some design decisions when writing on the script, and for certain reasons decided on using the largest square photos that PWA provides. Which is 160px. They provide larger images of course, but not (that I could find) in a cropped perfect square. So I choose the squares.
Cool, Kirk! As usual.
Thank you!
Now I don't need to create each slideshow manually...
I have also implemented your label clouds - cool stuff.
Cheers! =)
Hehe! You cheated! This is not really a widget! :P
Nicely done! :) 'Jeneralissimo of Javascript' and all eh? :P Haha!
I don't cheat! At least not here anyways.. :-)
It is too a widget! It comes in non-widget and widget format, look again my friend. :-D
Is there a way to use a variation of this script to display hosted images, on say, Photobucket, then when the image is clicked, it takes you to a page in your blog? That would be cool!
Please reply to: nostalgiamanilamail[at]yahoo[dot]com
Thanks!
Nostalgia Manila,
I don't reply via email, only here.
And I have no idea if a variation of the script would work for photobucket, as I don't use them. Only if they offer feeds, and even then anything would have to be targeted to their setup, what I have is geared towards Picasa Web Albums and would probably be of no use.
Hi, Liked your widget. Do you think if it is possible to have multiple of these showing on the same page?
Cheers
If you just copy/paste the generated code into a post it should work. You would probably want to paste it into edit html mode of the editor, and I wouldn't switch to compose mode for that post either, as sometimes it does weird things to some scripting.
I just tried this and it didn't work. :(
@Clumsy_Hacker
Yes it would be possible, if I had written the code properly. Right now as it is it won't. A failing on my part. I mean to go back in correct that along with a few other little issues, but just haven't got the chance yet.
@ken_vs_ryu
Don't know then, it works for me. If you are putting it in a post, then why not use the static html that picasaweb provides, assuming you are linking to static content?
Dude. This rocks. Exactly what I was looking for!!
Thanks!
how bout a random photo grab for the slideshow?
This is FANTASTIC, and looks great on my blog, www.Hammerfel.com. One question, how do I get rid of that little white arrow? Was it added by my template somehow? http://www.blogblog.com/rounders2/icon_arrow_sm.gif
nathan,
Yeah, that little arrow is an oversight on my part. I realized a bit after I made this that I neglected to add a style for those templates that use an image for unordered lists. I should fix it in the script, but haven't got around to it yet.
But, you can get rid of that arrow just for that widget by adding this to your stylesheet section
#pwFeed ul li {
background-image:none;
}
I am traveling in Asia for quite a while and I am looking for a widget that will just display the last 10 photos, because my albums are quite book. This would be good if I could set it so that it only displays the 10 most recent photos (and if it was a horizontal instead of a vertical strip). Any thoughts on how to do this?
tks for this great program! im just wondering if you can randomize the pictures? or tell how to do it...
again, great work :)
Thanx very cool widget - have a problem though:
I would like my images to float left, and can do that simply by adding:
div#pwFeed img {float:left;}
to my header.
But as you can see here, thay do not align correctly:
http://www.veo.dk/test4.htm
Any surgestions?
Tanx a lot, Jesper Denmark
To Everyone: Take note of the Update at the beginning of this post. Unfortunately all widgets made before March 22, 2007 will need to be deleted, remade and reinstalled to continue to function correctly. I apologize, but hopefully now that the Picasa Web Albums API has been documented, they won't be making any more changes on their end.
@kjems,
Not withstanding the notice about it needing to be recreated... :-)
Ummm..well from what I see the images ARE floating left. It's just they are floating left up against one another into a horizontal strip.
I'm not sure how you are ultimately wanting to use this, but if they absolutely have to be floated, instead of floating the images why not give the containing div a specified width, and floating it. Like say something like
div#pwFeed img {margin:5px; padding:0;}
div#pwFeed {width:170px; float:left;}
Would that work for what you have in mind?
Tanx for your answer. Well i actually want to float up against each other in a horisontal strip - just need then to "vertical-align" correctly.
Maybe some margin or padding somewhere.
Thanx Jesper
Oh, i now see its working in Firefox - but not in IE7
Ah, then maybe it's our different browsers. I just checked in IE7 and see a much different layout than what I was seeing in Firefox.
Firefox had a nice horizontal line.
IE7 shows a staggered horizontal alignment...I suppose that's what you are seeing. :-)
Umm. How about this?
div#pwFeed img {margin:5px; padding:0; float: left;}
div#pwFeed {width:600px; margin:0px; padding:0px;}
div#pwFeed ul li {display:inline}
This puts it in two 3 picture rows, perfectly aligned in both IE7 and Firefox...I would hope IE6 agrees.
I think making the li's display inline might be what you want.
Also, don't forget to regenerate that before using. As the links to each album won't be correct until you do.
Heh, I think we both had the different browsers revelation about the same time. :-)
Is there an easy way to include the captions along with the photos?
scott,
Right now the captions added are put in the title tag of the image link (will display as the tooltip on hover). Displaying them with the image is something that could be configured, but I don't have that setup.
I'm kind of at a point where I'm not sure about adding anything else to this widget (there are a couple of other suggestions people have made that are good ideas), as I suspect that Picasa Web Albums might be releasing their own in the near future. And a professionally done one will trump my amateur one.
So I'm in a holding pattern with it right now, waiting to see if picasa does anything on their side.
This is great! Exactly what I was looking for!
But, why does this widget only display 20 pics max? Is there a way for me to display all (more than 20) the pics in an album?
Because I made it that way. :-D
Actually I was testing it to make sure that load times wouldn't get out of whack, or that the script wouldn't act up with too many loops.
I may increase the number, at some point. Just haven't got around to it.
I would like to make the image a bit bigger, the cropping on some images is not right.
I have tried modifying the 160 (size) to say 180, but then when it renders it displays nothing...?
160 is the largest cropped size I could find. You can only use the sizes PWA provides, so just changing the number to something else won't work.
Hi,
Just tried it and it worked perfectly on Firefox. Unfortunately could not get it working on safari and IE. Could it be that the problem is in the template i am using? I am using minima template which is the first one under blogger templates page. With that one I cannot get it working. Any tips?
ristee,
Well I saw the problem a minute ago, but you have removed it now, maybe you are retrying.
What I saw was somehow you had gotten an incorrect url for the feed from picasaweb.
The url you had started with
feed://picasaweb.google.com etc etc
when it should be
http://picasaweb.google.com etc etc
Which was causing it to fail in ie and safari too, I presume
Remake the widget, make sure the rss url you get starts with the http:// and it should work.
I've never seen that happen, so I don't think my script was changing it.
Hi,
Thank you for your respons. I tried to put the http address but still does not work. Actually now it is not showning up even in Firefox.
I will leave it up for you if you want to investigate.
Thank you for your help.
I am using safari browser for editing my blog. It might be stupid question from technical point of view but could it be the problem of my browser?
Ok, sorry for "spamming" your with my comments but i think i just got useful information for your widget users. If you are using Safari browser then clicking on the RSS link the feed address will be shown with the beginning of feed://.... I tried to click on the RSS link in IE and it gave me different RSS address with the beginning of http://... So for the mac os x users this tip might be useful to change the beginning from feed:// to http://
Thanks for the widget. It looks great!!!
That's not spam, that's useful info! :-)
I did not know that Safari does that with feed links. And it solves the mystery of where that came from originally. Glad it's working and thanks for the additional information.
Great widget. It inspired me to create a plugin for wordpress that worked similarly you can see it in action at http://www.sharpers.com/wordpress/picashow
Thanks for the inspiration!
I've tried the widget with a web album in picassa and it presents ok the first photo but never starts slideshow.
(if I change in the generated script only the albun path and I put yours it works well)
test blog: tomat5.blogspot.com
¿what am I doing wrong?
Thanks
tomat,
The only problem is you are generating from the wrong feed url.
You are using the feed from the main album page, which will show all your albums.
http://picasaweb.google.es/mustomat
But you only have one, so it only shows one. If you want to show the photos from that album, go to it's page
http://picasaweb.google.es/mustomat/TomatI
and get the feed url from the RSS link there and try it (bottom of the page at the right - RSS). It should then work.
I'm thinking of ways to make this a little easier in the widget setup. Just haven't got the time to do it yet.
Thanks a lot. It works now.
How to show all the photos? It can show only the Album Cover. Thank for your reply.
gman-
It will either show the album covers from all your albums, OR show the images from one particular album.
It will not show all images from all albums. Just the way it is.
Great job man, thanks for sharing.
Now I got I question. When I chose "all albums" it only shows the front images of the public albums. Is there a way to make picasa pic ramdomly the album front image or maybe modfying the widget to pic a random image inside the albums?
Is it possible to show the pictures of my last album instead of album x?
Thanks a looooot for sharing it!
Núria
Oh please lets add some code for making it random... i guess it isnt really hard for coders like you!!
Your widget is just plain MORE BEAUTIFUL than Picasa's slidshow widget. Thank you.
Is there way to make it so when I click on it it won't go to my picasa page? I want it to do nothing or redirect somewhere else?
http://thebloggermustdie.blogspot.com/
Yoi Thank You!
Love this slide show. I've been looking all day for a widget slide show of my photos. This is by far the best. Is there a setting to make the photos show randomly?
@Dan
Sorry, no random at the moment. And due to me not having much free time probably won't be. I would need to completely redo some things (clean up some of the mess I made) to do random posts, and just can't get to it.
Thanks for the comments.
hey mate. great stuff! thnx lot!
one question ... can i open the link to the album in horizontal range in a blank window?
cheers
michael
Thanks alot, mate. Quality stuff!
Hi,
I am trying to incorporate your gadget into my site, that is a Google Pages site. I started a new page then pasted the code into the html editor that Google Pages uses. It works great. And, by the way, 20 is not the max quantity. I changed the code for 500 images. Currently, in the album I'm testing, there are around 100 or so pics and it works fine.
My question is this....I want to be able to click on one of the thumbnails and have it show me a larger view of it without taking the user directly to the Picasa album. I created another of this same gadget with the quantity limit of one and put it at the top of the page. This works ok but it will only show the first pic of that album, default. How do I get the first gadget to transfer the image I pick to the second larger image gadget ?
I have my RSS feed link, but where do I paste it to create my slideshow?
Disregard my last question.
When I added a slideshow to my blog from picasa in the past, I was able to make the photos larger then with your application. Is there a way to use your app with the sizes provided through picasa?
Thanks for the excellent slideshow widget, it looks great
HI,
The images in slideshow shown in 160px are being cutted above and below.
Any suggestion?
tnx
this is awesome. I spent a lot of time searching for an application that would connect my blog to my photo album and I finally found it. Thanks a lot - it works really well.
Great work! Is there a way to link the thumbs to an other site excepted picasa-webalbums? I use another code to realise my image-galleries in my Joomla site and I want the user to go there by clicking on the thumbs.
regards from Austria
Is there any way to put images from other websites like shareapic.net, photobucket.com etc.
Is there any widget available?
Post a Comment
0