Tag: pro

Categories
Development

Pulling Flickr photos using YUI Get Utility with photo_id

Atlantic Cape Community College has been using a Flickr Pro account to store and share our photos (Flickr Pro at $24.95/yr is a steal) and also like to incorporate those photos into our news releases from time to time. 

So I began working an a little script that would call the flickr.photos.getSizes API Method using YQL to return the info to display the photo (dimensions, source, etc.) in an easy to consume JSON object. Oh yeah, and also had to do all this using the YUI Get Utility since our server at the moment doesn’t have cURL installed.

So first I went to the YQL console (it’s awesome to be sure to check it out) to generate the HTTP to call the JSON we’re looking for using the flickr.photos.getSizes API Method. Here is the the YQL I fed it:

select * from flickr.photos.sizes where photo_id = "414195174"

and it gave me this wonderful REST Query (again YQL is awesome):

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.sizes%20where%20photo_id%20%3D%20%223591600467%22&format=json&callback=cbfunc

this returns the following JSON info:

cbfunc({
 "query": {
  "count": "6",
  "created": "2009-06-08T06:37:37Z",
  "lang": "en-US",
  "updated": "2009-06-08T06:37:37Z",
  "uri": "http://query.yahooapis.com/v1/yql?q=select+*+from+flickr.photos.sizes+where+photo_id+%3D+%223591600467%22",
  "diagnostics": {
   "publiclyCallable": "true",
   "url": {
    "execution-time": "149",
    "content": "http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&photo_id=3591600467&page=1&per_page=10"
   },
   "user-time": "154",
   "service-time": "149",
   "build-version": "1678"
  },
  "results": {
   "size": [
    {
     "height": "75",
     "label": "Square",
     "media": "photo",
     "source": "http://farm3.static.flickr.com/2447/3591600467_1f25e40ce1_s.jpg",
     "url": "http://www.flickr.com/photos/accc_cr/3591600467/sizes/sq/",
     "width": "75"
    },
    {
     "height": "100",
     "label": "Thumbnail",
     "media": "photo",
     "source": "http://farm3.static.flickr.com/2447/3591600467_1f25e40ce1_t.jpg",
     "url": "http://www.flickr.com/photos/accc_cr/3591600467/sizes/t/",
     "width": "84"
    },
    {
     "height": "240",
     "label": "Small",
     "media": "photo",
     "source": "http://farm3.static.flickr.com/2447/3591600467_1f25e40ce1_m.jpg",
     "url": "http://www.flickr.com/photos/accc_cr/3591600467/sizes/s/",
     "width": "202"
    },
    {
     "height": "500",
     "label": "Medium",
     "media": "photo",
     "source": "http://farm3.static.flickr.com/2447/3591600467_1f25e40ce1.jpg",
     "url": "http://www.flickr.com/photos/accc_cr/3591600467/sizes/m/",
     "width": "420"
    },
    {
     "height": "1024",
     "label": "Large",
     "media": "photo",
     "source": "http://farm3.static.flickr.com/2447/3591600467_1f25e40ce1_b.jpg",
     "url": "http://www.flickr.com/photos/accc_cr/3591600467/sizes/l/",
     "width": "861"
    },
    {
     "height": "2400",
     "label": "Original",
     "media": "photo",
     "source": "http://farm3.static.flickr.com/2447/3591600467_1fe814e144_o.jpg",
     "url": "http://www.flickr.com/photos/accc_cr/3591600467/sizes/o/",
     "width": "2017"
    }
   ]
  }
 }
});

So now we have an easy to use REST Query to use with all the info that we just so happen to need from Flickr.

Now I needed to create a little Javascript using the YUI Get Utility to consume the REST Query that we just built.

Here’s a basic version of the script I wrote:

function jsonFlickrApi(rsp){
 
		if (rsp.query.count == 0){
			return;
		} else {
 
			var container = document.getElementById('article-photo');
 
			// create elements
 
			var photoAnchor = document.createElement('a');
			var photoImg = document.createElement('img');
 
			// set attributes
			photoAnchor.setAttribute('href', rsp.query.results.size[3].source);
			photoAnchor.setAttribute('rel', 'lightbox');
 
			photoImg.setAttribute('src', rsp.query.results.size[2].source);
			photoImg.setAttribute('width', rsp.query.results.size[2].width);
			photoImg.setAttribute('height', rsp.query.results.size[2].height);
 
			// append to DOM
			photoAnchor.appendChild(photoImg);
 
			container.appendChild(photoAnchor); 
 
		}
    }
 
    var objTransaction = YAHOO.util.Get.script("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.sizes%20where%20photo_id%20%3D%20%223591600467%22&format=json&callback=jsonFlickrApi");

The function jsonFlickrAPI gets called when the JSON has loaded since it’s sent along with the Get request as the callback function. Then we just check if anything has been returned from the REST call before proceeding by checking the count returned.

Then create some DOM nodes and attach them to a div in our HTML. That’s really about it.

Next, I’m going to improve this to pull all relevant photos with a certain tag(s) from our Flickr account to dynamically create relevant galleries.