Querying Flickr with Dojo!

I’ve recently submitted a new data store for the Dojo Ajax Toolkit that makes it very simple to query Flickr for your and other peoples images. For those not familiar with Flickr, it is a photo sharing website, one of the most popular on the net. However, what makes it quite special is the comprehensive public APIs that it exposes.

While these APIs are extremely useful, however, they are also very complex, with a steep learning curve before you can even get started. In steps Dojo and their new Data API specification, whose stated aim is to have a single unified interface to all data sources, so that users of a data store won’t have to care if they’re reading from a database, from a XML or JSON file, or from some remote service like Flickr.

So, long story short, I’ve written an implementation of the Dojo Data APIs to query data from Flickr. It is part of the DojoX project, and is called dojox.data.FlickrRestStore. It provides quite a few methods of querying for photos:

  • By one or more tags, matchine any or all of them
  • By user id
  • By set id
  • Full text search
  • Sorting on date taken, date published or ‘interestingness’

FlickrRestStore also performs caching of image data, so if you request the data twice it won’t make a second remote request.

The store is also designed to be accessed by multiple clients simultaneously. If two clients request the same data, only one request is made, with both clients being notified of the identical results.


I’ve put a fairly comprehensive set of examples in the Dojo book at http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo

You can see a Demo of it running at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/data/demos/demo_FlickrRestStore.html .

The unit tests cover quite a few cases also, and you can see them at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/data/tests/stores/FlickrRestStore.js

To get the code, you can:

Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Specifying the callback function with the Flickr JSON APIs

Flickr is a photo sharing website that has a very flexible set of APIs that other applications and websites can use to access the photos it stores. This post shows you how to specify a callback function that Flickr can call to pass your web application information on photos it stores.

Quite a while ago I looked into the Flickr APIs for a website I was writing. Looking at the service that returns photo data in JSON (Javascript Object Notation), I noticed that it did so by calling a predefined function, jsonFlickrApi, passing in the data to that function. This seemed to be an obvious weak spot, since if more than one widget on a page were accessing the Flickr REST services, they would clash with each other, possibly receiving each others data. Obviously not a good thing.

Cut to today. I’ve been working on a JavaScript data store that operates against the Flickr REST services for the Dojo Ajax Toolkit, and had another look at the Flickr APIs. Now, whether I missed it before (doubtful, as I looked specifically for it), or the fine Flickr folk have listened to complaints (very likely), but there is now a parameter that can be passed to the Flickr API that specifies the callback function to use when the data is retrieved from Flickr.

All you have to do is pass a parameter jsoncallback to Flickr, with the name of the function you want to be called with the data, and thats it.

E.g. if I had a function:

function myCallbackFunction(data) {

alert(“I received ” + data.photos.photo.length +” photos”);


I could then specify a <script> element in my HTML page to retrieve the data in a cross site manner (since you can’t make cross site XmlHttpRequest calls), like so:

<SCRIPT type=”text/javascript” src=”http://www.flickr.com/services/rest/?format=json&amp;jsoncallback=myCallbackFunction


Note the jsoncallback parameter in the src attribute. This results in JavaScript similar to:

myCallbackFunction({“photos”:{“page”:1, “pages”:489, “perpage”:1, “total”:”489″, “photo”:[{“id”:”1352049918″, “owner”:”44153025@N00″, “secret”:”5636009306″, “server”:”1111″, “farm”:2, “title”:”The Liffey Panorama”, “ispublic”:1, “isfriend”:0, “isfamily”:0}]}, “stat”:”ok”});

being called.

Thanks Flickr! Nice to see them listening, and continually improving. This will make web applications built on Flickr much more robust, without the need of ridiculous hackery to get around unnecessarily difficult APIs. See http://www.flickr.com/services/api/response.json.html for the offical info on JSON responses.

Keep an eye out for my dojox.data.FlickrRestStore being release some day soon!!
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Image Gallery, Slideshow, and Flickr data source for Dojo 0.9

In a previous post (see here) I spoke about how I’d written an Image Gallery widget that worked with Dojo Ajax Toolkit version 0.4.2 and 0.4.3. I contacted the good folks at Dojo about updating it for the latest release, 0.9, and adding it to the toolkit.

They were very receptive to the idea, with a few suggestions. Firstly, rather than having its own method of storing information, it should run off the dojo.data API, and secondly, it should go into the newly created dojox.image project.

Both of these suggestions were perfectly reasonable, so, cut to a few weeks later and I’ve finished my first pass at converting over the code from 0.4.3 to 0.9. As the Dojo APIs have changed drastically recently, this was no simple matter, but thats the subject of another blog post.

The code is not finished (or even checked in) yet, but you can see some examples of it running from test pages. There are two separate widgets:

  • dojox.image.SlideShow – a simple widget that runs a slide show of images, with urls loaded from a dojo.data store.
  • dojox.image.ImageGallery – this wraps the SlideShow widget, adding thumbnail views. This is also loaded from a dojo.data store.

Finally, I’ve implemented a dojo.data store that reads from the Flickr REST APIs, to pull down lists of photos. This store is more complex than the existing Flickr store, as it does caching of results, as well as going against a much more flexible API, meaning that expanding its capabilities later is possible.

Whether or not this goes into dojox or not is still undecided. However, you can see the widgets running using this data store.

See the test files at http://www.skynet.ie/~sos/js2/dojox/image/tests for examples of this working.

Note that this is NOT the final code. It may still be buggy, may look different in the future (it’s pretty basic now), and the code will be cleaned up. However, if you have any suggestions, please feel free to leave comments on this post.

Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt