Google IG Picture Viewer (using Flickr)

dialog sample

Since Alex was born I’ve found it impossible to keep an up to date printed picture of him in my office. He grows way to fast... So instead of printing a picture every day I created a home grown browser homepage that was on my hard drive. On it was a script that displayed two random digital images from a collection I defined. It’s a very cool solution and since I use a web browser almost all day, it’s even better than printed pictures that stay at my desk.

I’ve wanted to start using Google’s personalized home pagefor a while, but they were missing my/any image viewer. Until Now... Google recently released an API for anyone to use to create module for their home page. So I created the My Photos Module myphotos_googleig.xml.

The My Photos Google ig module will randomly display pictures from
flickr based on two simple settings "Flickr Username" and "Tags". Only pictures that are in that
flickr user’s account (Flickr Username) and have at least one of the
tags you entered are displayed.


  • Displays either 1 or 2 random images depending on the image shape. (If an image is higher than wide, it is displayed alone.)

  • Status messages during image load

  • Error message with fix tips when there is an invalid username or tags that returns no images.

  • Integrated help

  • Works in Firefox and Internet Explorer

To use this module on your googel ig page:

  1. Goto and sign in (top right)

  2. Click on "Add Content" on the top left of the page.

  3. Click on "Create a Section" on the resulting left menu.

  4. Enter the url to the myphotos_googleig.xml module into the "Create a Section" text box and click "Go". You can get the url by clicking on this text box and copying the text

  5. You’ll get a mild warning message about the fact that google didn’t write this module… Click "OK" unless you think I’m evil... I’m not, but if I were I probably wouldn’t admit it here.

  6. The Module will appear and prompt you for settings:

    • Flickr Username: ( Example: jjrussell ) Your flicker username appears at the top of the page when your logged into flickr.

    • Tags: ( Example: soulshine )
      You can learn about flickr tags here.

    • Don't put anything in the Flicker UserID field: its a power user field...
      Details are below.

  7. Click save

  8. Share and enjoy!

Using the example settings jjrussell and soulshine will get you a bunch of pictures of this band I’m in called Soulshine.

Some other Useful info:

Not seeing all your images? If you've recently changed your tags and aren't seeing all the pictures you expect to see, it could be a problem with flickr. See this flickr faq entry for more information.

Flicker UserID (power users only) Flickr requires this module to look up a flickr internal userID. This happens each time this module loads. To speed up the first time load, add your flickr user id found at the bottom of the help page on the My Photos module
IMPORTANT: If you ever want to change users. you should delete any value you have in the UserID field as it overrides anything you type in the username field.

Development Notes

This module turned out to be fairly complicated. Some interesting things I learned while working on this module.

  1. flickr is extremely cool. Their API and documentation are very well put together. At the bottom of each method definition is a API Explorer link to a page where you can actually try out the method and see sample return xml... Very slick stuff!

  2. I was also very impressed with the Google Homepage API documentation. As usual, they made it very easy to get started.

  3. Parsing XML in JavaScript is not for the faint of heart. The guys that wrote XML for <SCRIPT> have done some really cool work to create working Cross Platform XML Parsing in JavaScript.

  4. jEdit is a great editor for this type of development. My bookmarks plugin got a lot of mileage on this project.

  5. And the award for biggest pain goes to Internet Explorer 6.0. Internet Explorer has gone from world class web browser to a heap of parrot droppings in the last 5 years. Its useless for debugging JavaScript in an IFRAME… It only loosely conforms to the CSS 2.0 standard. Enough to make it look like something will work and then the floor falls out... And best of all, img objects return a height and width of 0 when they are in a hidden DIV tag. Conceptually the 0 height and width thing makes sense, but is a real pain when your trying to decide how to display an image before you actually display it. I was going to give up on IE support all together, but something made me decide to fight that beast… There is a lot of extra IE code in this module that just barley makes it work in IE. I strongly recommend installing any other browser. Firefox is my current browser of choice.