Display Flickr Feeds with JSON and Javascript

I have recently been working on a project for a client that required an image gallery component. The images that were to be used in the gallery were in a set on Flickr. I had two options on displaying the images:

• Download and re-upload each image to a directory on the project website (long, tedious, and inefficient)
• Pull the images in live from Flickr (dynamic and efficient)

I had a problem, however: I had no idea how to pull images live from Flickr. However, I had recently begun learning JavaScript, and wanted to put my new skills to the test. I began to research…

It turns out Flickr support a method of data-interchange called JSON (JavaScript Object Notation) which basically allows you to send a URL to Flickr with a request of the data you want, and then receive a response back that you can process into html. Let me show you.

The first thing you need to do is obtain a Flickr API key. While this isn’t necessary for all the different URLs you can send to Flickr, it definitely opens you up to a lot of functionality. You can get one for free here.

Next, you need to decide what you want to display from Flickr on your page. In the example below, I have a URL that will return my Flickr Photo Feed.

http://api.flickr.com/services/rest/?format=json
&api_key=xxx&method=flickr.people.getPublicPhotos
&user_id=24309165@N05&per_page=50&page=1
&jsoncallback=jsonFlickrLoadUserStream

Let’s break down the parameters of the URL:

• ?format =json simply returns a JSON formated feed
• &method = flickr.people.getPublicPhotos is the way we will access the Flickr API. There are tons of ways you can access the API, you can check them out here.
• &user_id is a required parameter of the method we are using. Different methods require different parameters. To find out the user id for a particular username, you can use the wonderful idgettr.com tool.
• &per_page is a optional parameter that will default to 100 if omitted. It tells Flickr how many items to return in the JSON feed. The maximum allowed per page is 500. Make sure not to set the value to more than the number of items you are trying to call, for example don’t set it to 500 if you only have 200 items in your feed.
• &page is another optional parameter that represents the page of results you want returned. This is handy if you want to display more than 500 results because you can send a second URL request for the second page of results.
• &api_key is your api key, which is required for this method.
• &jsoncallback is the name of the function you will write in JavaScript to process the feed.

To send this request on your page, create a <script> element with the src attribute set to the API call, like this:

<script src="http://api.flickr.com/services/rest/?format=json
&method=flickr.people.getPublicPhotos&user_id=24309165@N05
&per_page=50&page=1&api_key=xxx
&jsoncallback=jsonFlickrLoadUserStream"></script>

You can also type the url directly into your web browser to make sure you are getting a response. I found this to be a handy way to check for errors when my code didn’t work.

Next up is processing the api call and displaying meaningful results on your page. There are a million different ways to do this, but I am going to show you the way that worked for me. You can of course place the code inline in your page or link to it externally, whatever works for you is fine. What is important is that you have the function name match the one specified in the jsoncallback parameter of the url. Below is the entire code I used. I will break each part down individually after.

function jsonFlickrLoadUserStream(rsp) {
	if (rsp.stat != "ok") return;

	var picture_wall = '';

	var photoCount = rsp.photos.perpage;

		for(var i = 0; i < photoCount; i++) {

			var photo = rsp.photos.photo[i];

			var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "s.jpg";

			var a_href = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id + "/";

			picture_wall += '<div style="width:50px; height:50px; float:left; overflow:hidden">';

			picture_wall += '<a  href="' + a_href + '" target="_blank" >';

			picture_wall += '<img id="img_' + i + '" src="' + img_src + '" width=50 style="border-width:0px; border-style:none;" /></a>rn';

			picture_wall += '</div>';

		}

			picture_wall += '<div style="clear:both; width:100%"></div>';

	document.getElementById("imagestream").innerHTML = picture_wall;

}

The code begins by declaring a function called jsonFlickrLoadUserStream with an input called ‘rsp’. It then checks to see the status of the JSON feed returned, and returns if the feed doesn’t come in properly.

function jsonFlickrLoadUserStream(rsp) {
	if (rsp.stat != "ok") return;

We then define a variable called “picture_wall” which will hold the output of the feed that we want to display on the page. We also define a variable called “photoCount” and set it equal to the perpage attribute.

var picture_wall = '';

var photoCount = rsp.photos.perpage;

Now is a good time to discuss how you access particular parts of a JSON feed. A JSON feed consists of elements nested within members nested in an object. To access a particular member, you must define the ‘path’ to that member. In the case of the ‘perpage’ element, we can see by looking at the feed that it is housed within the photos member of the feed (you can see this if you look at the url response in your web browser). Because of this, the ‘path’ to the element is rsp.photos.perpage. We will be accessing other elements in much the same way.

Next we begin a for loop to loop through the photos in the JSON feed.

for(var i = 0; i < photoCount; i++) {

			var photo = rsp.photos.photo[i];

The loop will run equal to the number of items in the feed, which is where the photoCount variable comes in. We then create a variable called ‘photo’ that we set equal to an array element found in the photos member of the feed (rsp.photos.photo[i]). This element is an array because there is more than one photo in the feed. We are only interested in the current photo on each iteration of the for loop, so we set it equal to our counter (i).

Next, we set variables for the image source and link to the image page on Flickr.

var img_src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "s.jpg";

var a_href = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id + "/";

The JSON feed does not provide a full URL element for the image source, so we have to build it ourselves using the photo.farm, photo.server, photo.id, and photo.secret elements. Bear in mind these elements are actually found at the rsp.photos.photo member, but that we set a variable called ‘photo’ to rsp.photos.photo[i] to make things easier to type. the “s.jpg” part of the variable is interesting. Flickr provide several sizes of photos, each of which is denoted by a one-letter name. These are the names they use:

• O = orignial size (only available for pro accounts)
• B = big (1024px on biggest side on available for pro accounts)
• Z = medium (640px on biggest side)
• M = medium (500px on biggest side)
• S = small (240px on biggest side)
• T = thumbnail (100px on biggest side)
• SQ = square (75px by 75px)

We also set a link back to the photo on Flickr. This is required by Flickr’s terms of service; you can’t pull photos without providing a means for a visitor to find them back on Flickr.

Next comes placing the image and link on the page.

picture_wall += '<div style="width:50px; height:50px; float:left; overflow:hidden">';

			picture_wall += '<a  href="' + a_href + '" target="_blank" >';

			picture_wall += '<img id="img_' + i + '" src="' + img_src + '" width=50 style="border-width:0px; border-style:none;" /></a>';

			picture_wall += '</div>';

While it isn’t completely necessary, I create a div element first to place the image in. I set the ‘overflow’ property to ‘hidden’. This means that I can display vertical images in a horizontal container without messing up the flow of, say, an image gallery. Be sure to set the width and height properties of the div and img elements to match the size of your images.

Next we finish things up:

picture_wall += '<div style="clear:both; width:100%"></div>';

	document.getElementById("imagestream").innerHTML = picture_wall;

}

We added a float element to the end of all the images because this stops things below the gallery from breaking or appearing in weird places. Finally, we insert the ‘picture_wall’ object to a div with an id of “imagestream.” You could of course set this to any div on the page.

That’s all there is to it. I am happy I was able to figure out how this worked, and I must give credit to my friend James Yeary, who helped make everything work. Thanks James!

I hope this tutorial helps you out with your web design and development projects. If you have questions, bugs, or problems, be sure to let me know in the comments below!