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.

25 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. Is it possible to make the script without the clickable link?

    ReplyDelete
  4. 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
  5. I now added the ability to specify "link=0" as a query parameter to suppress generation of the link:

    http://rndpic.appspot.com/user/patrick.moor?link=0

    ReplyDelete
  6. The script is not JavaScript only - it is actually a web app hosted on Google's App Engine. I finally got around to upload the sources to a public Google code project: http://code.google.com/p/rndpic/

    Feel free to download the sources, modify them and deploy them on your own. Or feel free to change the sources and send me a patch so I can include it in the main repository.

    ReplyDelete
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. Dan,

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

    ?size=400&link=0

    - patrick

    ReplyDelete
  17. 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
  18. Hello Patrick,

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

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

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

    ReplyDelete
  21. 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
  22. 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