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.
Posted by at
Labels:

25 comments:

  1. GUESS WHOSeptember 8, 2009 at 7:52 AM

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

    ReplyDelete
  2. TheBox193September 30, 2009 at 12:49 PM

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

    ReplyDelete
  3. THPO11May 17, 2010 at 7:20 PM

    Is it possible to make the script without the clickable link?

    ReplyDelete
  4. Jake ParisDecember 13, 2010 at 2:51 AM

    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. pädeJanuary 16, 2011 at 5:01 AM

    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. pädeJanuary 16, 2011 at 5:22 AM

    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. LosDementitosFebruary 19, 2011 at 11:12 PM

    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. pädeFebruary 20, 2011 at 12:04 AM

    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. pädeMarch 11, 2011 at 8:27 PM

    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. Jam CampOctober 17, 2011 at 7:41 AM

    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. Patrick MoorOctober 17, 2011 at 12:13 PM

    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. NeitredDecember 13, 2011 at 8:49 AM

    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. Patrick MoorDecember 13, 2011 at 8:55 AM

    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. Patrick MoorDecember 14, 2011 at 9:27 AM

    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. Jam CampJanuary 21, 2012 at 7:50 AM

    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. Patrick MoorJanuary 21, 2012 at 11:04 AM

    Dan,

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

    ?size=400&link=0

    - patrick

    ReplyDelete
  17. EL BROGIT GUIATGESApril 4, 2012 at 5:32 AM

    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. Patrick MoorApril 4, 2012 at 3:05 PM

      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. EL BROGIT GUIATGESApril 5, 2012 at 2:36 AM

    Hello Patrick,

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

    ReplyDelete
  19. UnknownJune 19, 2012 at 12:56 PM

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

    ReplyDelete
  20. danAugust 5, 2012 at 12:49 AM

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

    ReplyDelete
  21. AnonymousOctober 1, 2013 at 2:55 AM

    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. Patrick MoorOctober 4, 2013 at 9:05 PM

      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. JamesMay 21, 2014 at 10:04 AM

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

    ReplyDelete
    Replies
    1. Patrick MoorMay 22, 2014 at 8:24 PM

      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

Subscribe to: Post Comments (Atom)