Tag: Get Utility

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.

Categories
Development

Using YUI Get Utility to consume Flickr API

I wanted to pull photos from a Flickr account onto a site. The Flickr API is awesome and there’s a ton of libraries out there for using it. Unfortunately, cURL isn’t currently installed on the server, so the PHP libraries won’t work for this case.

So I figured I’d give the YUI Get Utility a try. The Get Utility provides a mechanism for attaching script and css resources – including cross-domain resources – to the DOM after the page has loaded. And this has worked really well.

Here’s what I did:

  1. Included the following YUI scripts: 
    <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"><!--mce:0--></script>
<script src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js" type="text/javascript"><!--mce:1--></script>
  2. Then fetch the Flickr feed in JSON format using the Get Utility.var 
    objTransaction = YAHOO.util.Get.script(<url goes here>);

    Be sure that the Flickr REST call is set to output to JSON so that the Get Utility can consume it properly.  Append &format=json

  3. Then write a function to act on the JSON response from Flickr.  Here’s an example of taking the JSON response and outputting thumbnails of photos with links to the larger view: 
    function jsonFlickrApi(rsp){ 
 
    if (rsp.stat != "ok"){
 
     alert('no data returned');
 
     return;
 
    }
 
    for (var i=0; i<rsp.photoset.photo.length; i++){
 
		var photo = rsp.photoset.photo[i];
 
		var container = document.getElementById('container');
		var photosList = container.getElementsByTagName('ul');
 
		// create elements
		var photoItem = document.createElement('li');
 
		var photoAnchor = document.createElement('a');
		var photoImg = document.createElement('img');
 
		// set attributes
		photoAnchor.setAttribute('href', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg');
		photoImg.setAttribute('src', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_s.jpg');
		photoImg.setAttribute('width', '75');
		photoImg.setAttribute('height', '75');
		photoImg.setAttribute('alt', photo.title);
 
		// append to DOM
		photoAnchor.appendChild(photoImg);
		photoItem.appendChild(photoAnchor);
 
		photosList[0].appendChild(photoItem); 
 
		}
 
    }
 
    var objTransaction = YAHOO.util.Get.script("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=<insert_your_api_key>&photoset_id=72157594235977414+&format=json&per_page=60");

View an example