Tag: Flickr

Categories
Development

NCMPR – Cutting Edge Web Presentation Notes

Thanks to all of you who attended my Cutting Edge Web roundtable discussion. Wow, there were some really great questions, and I learned much from many of you as well.

Below I’ll try and provide more information regarding some of the topics that were brought up:

CMS

ok, there was a lot of questions and feedback regarding using and choosing a CMS (Content Management System) during both sessions. A CMS is a huge investment, both time and financially, and not a decision that should be taken lightly.

A great point that was brought up and one that I cannot stress enough is that multiple parties should always be involved when choosing a CMS. The content managers, the folks in IT who will be installing and deploying it, and any other parties. It’s important that the content managers are comfortable using the CMS, so always test drive it thoroughly before committing. Many have demo accounts that you can login to, or if possible install one locally and kick it’s tires.

I also feel that it’s very important that the CMS can easily be expanded by a developer. Even if you don’t have a developer on staff today, you want a system that can be expanded should the need arise. Don’t be tied to propriety software and await new features to become available when the manufacturer gets around to it. Rarely do these companies roll out new features at a pace that will keep up with your needs.

There are some great open source CMS systems out today that are very stable and ready for production use. Setup and maintenance, will require a developer(s) on staff however. These two are my favorites:

Flickr

The use of flickr was also a very popular topic. I love flickr and $24.95 a year for unlimited storage is one of the best deals you’ll find anywhere. It’s a great resource to share photos, both for internal and external needs.

The flickr uploadr tool is a free tool that makes uploading large amounts of photos a breeze. Download this, it’s simple and does the job.

Be sure to tag your photos, for easy sorting. Tagging really makes navigating through thousands of photos a breeze rather than a tedious chore.

There’s also a free flickr badge that you can easily create and then paste into your website. This is pretty cool and a very easy way to incorporate your flickr photostream with a website. There’s also an amazing API available too.

Easy Widget Generation

I mentioned some easy and free widget generators to incorporate popular web services into your existing site.

Meta Tag and Search Engine Ranking

Google does not use the Meta keyword tag in ranking. It’s still good practice to use meta keywords on your site, however don’t go crazy in hopes of increasing search engine ranking with it.

Google Webmaster Tools provides a great list of guidelines to follow for accurate search results.

Flip Video Camcorder

The Flip Video Camcorder(s) are a really affordable way to capture, edit and share web quality video. They’re tiny, transfer video to your computer via a built in USB jack, have built in editing software (I prefer iMovie) and shoot very good video for their low price ($150-230).

Please let me know if there’s anything other questions or if you have something more to share!

Categories
Development

YQL flickr.photos.search nest query

I wanted to use YQL to build a query to grab photos on an account with certain tags that I could then render on a page. The flickr.photos.search just gets you the photo’s id and not all the other goodness that is required to make the image display.

So I built a nested query in YQL to get the job done.

select farm, id, secret, server, title
from flickr.photos.info
where photo_id in (select id from flickr.photos.search where user_id='<your_user_id>' and tags='soccer,men')

So in one call it’s gets the id of the photos that meet your initial query:

select id from flickr.photos.search where user_id='<your_user_id>' and tags='soccer,men'

It then takes the id’s from that query and grabs the photo.info that you need, all in one call! Very cool stuff.

Go to the YQL Console and play around.

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