Saturday, August 8, 2009

Embed a random Picasa Web Albums Picture in your Website

If you would like to embed a random picture from your Picasa Web Albums account into your web pages just put the following snippet:

<script src="http://rndpic.appspot.com/user/your.username" type="text/javascript">
</script>
Replace "your.username" with your actual user name.


The picture is clickable and the link takes you directly to the picture hosted on Picasa Web Albums.

Update: 9/14/2009
Due to a Bug in Google App Engine, contents of large albums (>~300 pictures) cannot be displayed properly at the moment.

Update: 3/25/2010
Thanks to partial responses the script now also supports showing albums with 400 or more photos.

Update: 1/16/2011
I finally uploaded the project to Google code. Check it out at https://github.com/pmoor/rndpic. In addition, I added the ability to specify custom sizes for the thumbnails as well as the option to turn off the link generation.

23 comments:

  1. Find ich super, dass du randomly halbnackti fotene vo mir da ibettisch :-D

    ReplyDelete
  2. Never knew you could embed picasa Albums. I'll have to play with that sometime.

    ReplyDelete
  3. Thanks, this is awesome! I'm using it in my upgrade of our website. Is there a lot of javascript involved? Is it something that you could forward me so I could host the js locally?

    ReplyDelete
  4. Excellent little script. Exactly what I was looking for, thank you very much sir :)

    Is there any way to remove the blue frame though?

    ReplyDelete
  5. I just extended the script a bit to assign an "id" attribute to the <img> and the <a> tag.

    You should now be able to control the image style through some CSS:

    <style type="text/css">
    #rndpic-img { border: 0; }
    </style>

    ReplyDelete
  6. Is there any possibility for an automatic refresh? for an example refresh with a new pic each 10 secs.
    Thanks!

    ReplyDelete
  7. I added functionality to fetch the image object as a JSON object. Check out the documentation at http://code.google.com/p/rndpic/.

    A working example can be seen here: http://rndpic.appspot.com/examples/slideshow.html

    ReplyDelete
  8. Wonderful script! I love it!
    Can i ask you if is also possible to refresh the image, to do something similar a slideshow?

    Do you know if exist the same kind of script for the movie inside the playlist in my youtube channel??

    thank you!!!

    ReplyDelete
  9. Yes, you can do a slideshow using some Javascript. See this example: http://rndpic.appspot.com/examples/slideshow.html

    Sources at http://code.google.com/p/rndpic/source/browse/trunk/examples/slideshow.html

    I don't know of anything available for Youtube, sorry.

    - patrick

    ReplyDelete
  10. Hi,

    This was working realy nice!
    But now (without changing anything), no pics are shown anymore.

    Is the server http://rndpic.appspot.com down?

    Can we expect it back?


    Regards,


    Stephen

    ReplyDelete
  11. Stephen,

    thanks for letting me know! It looks like the Picasa Web API returns invalid XML all of a sudden. I'll take a look as soon as I can.

    - patrick

    ReplyDelete
  12. There was a change on App Engine that broke URL fetching for me. I updated the app with https://code.google.com/p/rndpic/source/detail?r=19 and things seem to be working again.

    - patrick

    ReplyDelete
  13. Hi, i try to "turn off" the link to picture hosted in Picasa, but if i put "?link=0" after "?size=400", i don't see any pictures...
    What i'm doing wrong??...
    Thanx!
    dan

    ReplyDelete
  14. Dan,

    you'll have to add the second (and further) parameter with "&link=0":

    ?size=400&link=0

    - patrick

    ReplyDelete
  15. Hello! Thank you for such an easy and great code! I really don't know much about programming, just learning bit by bit when I need to do something, and I could finally embed the picasa random pictures in my website. I didn't succeed with the slideshow, but nevermind.

    What I would really like to do is center the image, where should I say this in the code? You can see it in the right hand side of my webpage: http://www.elbrogit.com/home.html.

    Thank you a lot for you attention. Meritxell.

    ReplyDelete
    Replies
    1. It seems like moving your 'style="text-align:center;"' attribute one level up into the <div> with id="picasa_random" does the trick for me:

      <div id="picasa_random" style="text-align: center;">
      ...
      <script type="text/javascript" src="http://rndpic.appspot.com/user/guiatges.elbrogit?size=160u"></script>
      </div>

      Also, alternatively: The <a> around the <img> tag has id "rndpic-a", and the <img> tag has id "rndpic-img" - you could use CSS styles to style these IDs directly.

      Delete
  16. Hello Patrick,

    Thank you very much for your fast answer, now it works and looks great! Meritxell.

    ReplyDelete
  17. Hello, is it possible to open pictures into slimbox or similar, instead of loading picasa? Would be nice. :) Thanks.

    ReplyDelete
  18. i just installed it on my blog and it is awesome :) thanks.

    ReplyDelete
  19. Could this be modified to output an RSS feed for these older photo frames that relied on the frame channel service? I would be willing to pay for someone to help with this. I would just like an RSS photo feed of 20-30 random photos that changed daily from my public picasa photos. Right now I have my frames pointed to Flickr and their RSS for my photos, but they only get the most recent 20 photos, and we would like to see older ones. Thanks :-)

    ReplyDelete
    Replies
    1. That sounds like a neat feature! I've created an issue at https://github.com/pmoor/rndpic/issues/2, I may get to this if I find some time. Do you have a sample RSS feed URL that works with your photo frame? I want to make sure I properly format the response.

      Delete
  20. This is awesome! Is there anyway to make it show albums where viewing is limited to people with the link?

    ReplyDelete
    Replies
    1. James,

      I love the idea! But I could not get it to work :-(

      The feed URL http://picasaweb.google.com/data/feed/api/user/113043176744088847832/albumid/5953027398619472817?kind=photo&authkey=CM2Ig-Gq2P3SIA only works if I'm logged in, whereas the actual album URL (https://plus.google.com/photos/113043176744088847832/albums/5953027398619472817?authkey=CM2Ig-Gq2P3SIA) works fine if not authenticated.

      So unless Google fixes the API this won't work, sorry :-(

      Delete