Christian Heilmann

Posts Tagged ‘flickr’

TTMMHTM: Geek chic, development quotes, passwords, Flickr scalability and the New York Times Open

Monday, February 23rd, 2009

Searching Flickr photos by license and text and returning defined sizes made easy with YQL

Saturday, February 14th, 2009

We (Nagesh Susarla and moi) are just sitting here at Open Hack Day in Bangalore, India and geek out on YQL trying to find how far we can push it to make the life of a hacker easier.

One of the things was using Flickr photos and making sure we can only get photos of a certain license for a certain text. Here’s the magic we YQL statement we came up with:

select * from flickr.photos.sizes where photo_id in (select id from flickr.photos.search(20,20) where text=@text and license=@license)  and label=@label

The (20,20) means “get me 20 photos starting at the 20th” and to make it easier say we do the first 50 results instead. The @parameter are placeholders which will be replaced by URL parameters.

As a URL you can use this and send the right parameters, for example find cats with an attribution license and only square photos (75×75pixels):

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from flickr.photos.sizes%20where%20photo_id%20in%20(select%20id%20from%20flickr.photos.search(50)%20where%20text%3D%40text%20and%20license%3D%40license)%20and%20label%3D%40label&format=xml&text=cats&license=4&label=Square

Possible licenses are:

1 Attribution-NonCommercial-ShareAlike License
2 Attribution-NonCommercial License
3 Attribution-NonCommercial-NoDerivs License
4 Attribution License
5 Attribution-ShareAlike License
6 Attribution-NoDerivs License
7 No known copyright restrictions

Possible labels are Square,Thumbnail,Small,Medium and Original

To make it easier, you can also wrap the whole thing in a method:

function display(o){
var out = ‘’;
for(var i=0;i var cur = o.query.results.size[i];
out+=’‘;
}

var d = document.createElement(‘div’);
d.innerHTML = out;
document.body.appendChild(d);
}

/*
leechFlickr() by Christian Heilmann
Gets an object as the parameter. Object properties:
query (mandatory) – term to search flickr for
amount – amount of photos (defaults to 20)
license – 1 to 7
label – Square,Thumbnail,Small,Medium and Original
callback – callback function name as string

*/
function leechFlickr(o){
if(o.query){
var amount = o.amount || 20;
var license = o.license || 4;
var url = ‘http://query.yahooapis.com/v1/public/yql?’ +
‘q=select%20*%20from flickr.photos.sizes’ +
‘%20where%20photo_id%20in%20(select’ +
‘%20id%20from%20flickr.photos.search(’ +
amount + ‘)%20where%20text%3D%40text%20and’ +
‘%20license%3D%40license)’;
if(o.label){
url += ‘%20and%20label%3D%40label’;
}

url += ‘&format=json&callback=’ + o.callback +
‘&text=’ + o.query + ‘&license=’ + license;
if(o.label){
url += ‘&label=’ + o.label;
}

var s = document.createElement(‘script’);
s.src = url;
document.getElementsByTagName(‘head’)[0].appendChild(s);
}

}

leechFlickr(
{

query:’cats’,
label:’Square’,
callback:’display’
}

);
leechFlickr(
{

query:’parrots’,
amount:10,
license:3,
label:’Square’,
callback:’display’
}

);

See the code in action and download the script.

Does YQL rock or what? No messy user IDs, no mixing and matching all kind of API methods, just plain yummy data.

Small change in the flickr API output breaking my bad code

Wednesday, December 31st, 2008

During my absence I got an email that the first version of my unobtrusive Flickr badge has stopped working. The reason was that Flickr changed the output of the API. I the old version the JSON object contained an HTML description that was run through htmlspecialchars() first. I always considered this a bit of a nuisance and wondered about the reason. Now the Flickr feed does not have the encoding any longer as you can see for example in the JSON output of my latest photos:


{

“title”: “Terminal 5 animated discs thingamabob *”,
“link”: “http://www.flickr.com/photos/codepo8/3141566868/”,
“media”: {m“},
“date_taken”: “2008-12-27T08:10:35-08:00”,
“description”: “

codepo8 posted a video:

Terminal 5 animated discs thingamabob *

* technical term, really

“,
“published”: “2008-12-27T16:10:35Z”,
“author”: “nobody@flickr.com (codepo8)”,
“author_id”: “11414938@N00”,
“tags”: “london art heathrow awesome animation t5 ba britishairways terminal5”
},

Before the change this would have been:


{

“title”: “Terminal 5 animated discs thingamabob *”,
“link”: “http://www.flickr.com/photos/codepo8/3141566868/”,
“media”: {m“},
“date_taken”: “2008-12-27T08:10:35-08:00”,
“description”: “

codepo8 posted a video:

"Terminal

* technical term, really

“,
“published”: “2008-12-27T16:10:35Z”,
“author”: “nobody@flickr.com (codepo8)”,
“author_id”: “11414938@N00”,
“tags”: “london art heathrow awesome animation t5 ba britishairways terminal5”
},

This broke my code as I was relying on regular expressions to get the photos. Taught me a lesson, and as we have a media property now there is no need for this any longer. The fix for the badge code was:


// buggy, bad
temp=obj.items[i].description.match(/src="([^&]*)"/)[1];”
// works :)
temp=obj.items[i].media.m;

Lesson learned: Don’t trust regular expressions and data scraping.

Thanks to Jennifer Forman Orth for flagging this up!

Building Easy Flickr – Step by Step

Monday, June 16th, 2008

As several people asked how I did the easier Flickr interface, I wrote up some step-by-step instructions, analyzing the issues and then taking the API to work around them.

An easier interface to Flickr

Check out How to create an alternative Flickr interface – step by step.

This is one example where providing a good API can empower developers to remove barriers you might not be aware of for you. I hope to be able to show you more of those in the future.

The code examples are available and are licensed with BSD, so feel free to re-use them.

Easy Flickr – just the photos please

Friday, June 13th, 2008

Following the accessibility hack of YouTube I thought the same could be done for Flickr, and here it is:

Alternative interface to browser Flickr photos easier

Easy Flickr is a very basic interface to look for photos and click through them 20 at a time. It works with and without JavaScript.

Update: It seems there is some confusion as to how this interface works. The main photo is linked to flickr.com (as per API guidelines) and you can navigate up to 20 results by clicking the lower thumbnail to go forward and the upper one to go backward in the results list. This also works with a keyboard and in JAWS but I need to make it more obvious with a hover state and some labels for screen readersand I added some roll-overs and texts for screen readers to make it more obvious..

If you want to host the interface yourself, you need a server with PHP and cURL, but that’s it. Simply unpack the zip file and change the look and feel by changing the style sheet.