I’m on a code burn. After explaining yesterday how I built a JavaScript fueled site for a random generator, I went on a string of ideas that led me to be exploring ways to access recent photos from flickr using just JavaScript.

Here I will explain how the “flickry me” site works (http://lab.cogdogblog.com/flickry/), which for now randomly displays a full window sized version (that resizes with the window) of one out of 20 of my most recent flickr photos:

I have built sites like Five Card Stories and pechaflickr in the past using server side PHP using phpFlickr, but got curious about what things could be done just in HTML and Javascript.

This began when I looked at the site for the Backstretch jQuery plugin, which provides the clean sizing of the background image– and I noted that while my previous uses of this used a locla image, that there wa sno reason, as shown in the example there, you could not use one via a URL.

This lead me to wonder what I could do with pulling recent photos from flickr. and a few googly clicks later I found the answer at Hacking Flickr the JSON way:

Here you’ll learn how to get Flickr photos into your JavaScript solutions without having to resort to using the full API. As this is a hack you will only get the latest 20 photos, if you need more detailed data like restricted to sets or more at once you’ll need to resort to the flickr API.

I liked this approach because you could do it via public API calls to flickr, e.g. you would not need to embed your own API key in the source code.

It is quite simple when you get the idea. What you need to do is find any URL for an RSS feed in flickr, these are generally found in the bottom left of a flickr page for the link “Latest”. Some examples:

• Your own flickr stream- mine is
  http://api.flickr.com/services/feeds/photos_public.gne?id=37996646802@N01&lang=en-us&format=rss_200
• Publicly tagged photos, e.g photos tagged “hurleylounge”
  http://api.flickr.com/services/feeds/photos_public.gne?tags=hurleylounge&lang=en-us&format=rss_200
• Photos from a group, e.g. the 2012/366 photos group
  http://api.flickr.com/services/feeds/groups_pool.gne?id=600611@N20&lang=en-us&format=rss_200

The thing you need to do is to look at the end of these feed URLs and change the part that reads format=rss_200 to read format=json. Without getting to technical just think of JSON as your web friend for helping you use data from other web sites- see JSON (JavaScript Object Notation).

For example, my own photos the jSON data URL is http://api.flickr.com/services/feeds/photos_public.gne?id=37996646802@N01&lang=en-us&format=json and the most recent information shown below:

If you can pick it out, there is a data structure “items” that includes things like title, date, link URL for my most 20 recent photos. IN a nutshell, this will provide my own web page data about the 20 most recent photos for that feed URL, and in a form I can do anything I want to do in JavaScript.

The logic I want to do in my own page is:

• Get the data for my 20 most recent photos into an array
• Pick one of the data chunks at random
• Use the information to load a large sized version as a background using the backstretch.js code, and then update the page output to include the photo title and link.
• Provide a link to reload the page to pull another one.

Now let’s roll up our sleeves and walk through some code.

(1) The top of the document just sets up the page headers, includes my style sheet, the jQuery library, and the backstretch.js plugin for jQuery:

(2) The next part has some Javascript, I am going to skip the first piece because we need to have the key part that calls the flickr API via a remote javascript:

The way this work is subtle. If you look at the output above from my own URL, it actually provides the data wrapped as a javascript array it sends to a function that looks like:

jsonFlickrFeed({
      ..... a whole bunch of array and sub-arrays
})

What this is doing is so damned clever. There is no function “jsonFlickrFeed” that exisits, which means I can write my own, and it gets as input, all of my data from flickr. Clever!

(3) So above this section, I roll my own code to do something with the data:

The two variables at the top are declared outside of my functions so they become ones I can use anywhere in my page. Yeah, globals are sloppy, sue me.

I then calculate a random number between 0 and 19 (the flickr dtya array includes 20 items, and arrays always start at 0). I then simply load into foto the value for the URL to the image provide by the API; the “m: size is 500 pixels- we will deal with that later. I alos create a string in the variable furl that is the HTML to output the title and a link to the flickr url for the random photo.

(4) We then skip past the code for (2) and include one more chunk of JavaScript to do the background image magic (I found this had to come after all of the other stuff).

So instead of passing the name of a local image to the backstretch function, I am using the URL for the image from flickr, but just tweaking the url from the media sized image, 500 pixels wide, in urls that end in _m.jpg, to the 1024 sized ones, that is the same url, but ends in _b.jpg. The Javascript code allows my to apply the replace function just to the variable name, neat eh?

(5) Now we have a simple page structure, and the only extra code we need is to updated the text in the body to use the furl string generated above, doing so in an onLoad command in the <body> tag (yes this could have been done with document.write() statements, but those are so 1996). I also added a link to do a reload.

	
CogDog Flickr
	
This site displays random picks from my 20 most recent flickr photos. Try again? Resize window to your heart's delight
 
	


	

I provide all of this code in a huge 4k archive for you at http://cogdogblog.com/code/flickry.zip

All you would need to to is find your own API url to use for step (2) and modify the HTML to as you see fit.

I was trying to get it to work to allow a viewer to page through the images, or even make it auto advancing, but despite the docs on Backstretch, I could not get a second call to the function to update the background. But this is enough tinkering to give a sense what one can do with the flickr public apis, all available to run in a local html file.

My code year is not waiting for any stinking academy. I am off and going.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon