Flickr Calend'rWhat were the best photos of 2013? Flickr’s “interestingness” rating offers one way to judge the best, based on a special sauce made up of the number of views, faves, and comments. I wrote Flickr Calend’r for discovering the best pix of the year, breaking it down into the best of each month, and displaying the results in a calendar format. The Flickr Calend’r lets you narrow down which photos to search, filtering by user (or group), a search term, a WOE code, or others.

Oh, yeah, “WOE code” – not a commonly-known term. A Yahoo invention, which they normally call WOE IDs, for Where On Earth identifiers. Read Using “Where on Earth” Codes in Flickr for more info. This of course works only on photos that have been geo-tagged, so using this field will greatly reduce the available pool of photos.

You can leave any of these fields blank. When you hit “get calendar” it’ll fire off a request to search each month. This takes a while. I wrote a proxy script in PHP to handle the Flickr API calls, and of course this calendar requires 12 separate calls. I’m not sure if the problem is Flickr’s slow servers, or my own.

If you search for a user’s photos using the NSID (network services ID, or user ID) instead of the user’s name, the results should come back slightly faster. An NSID look like 35591378@N03.

The proxy script uses the phpFlickr library. It turns the URL’s query string parameters into an array of criteria. The PHP program is larger than I’d like, but here is the gist of it:

$f = new phpFlickr("YOUR FLICKR API KEY");
if (isset($_GET["text"]))
  $criteria["text"] = $_GET["text"];
if (isset($_GET["woe"]))
  $criteria["woe_id"] = $_GET["woe"];
$photos = $f->photos_search($criteria);
echo json_encode($photos);

The HTML/Javascript program is surprisingly tight and compact, with just under 300 lines. (I’m sure it’ll bloat up as I add more features.)

I pushed as much into HTML5 and CSS as possible. The progress bar is just a simple <progress> tag. The images are posted as the background images for a <div> tag. To get it to fit the box, I used the newish “background-size” CSS property. Setting it to “cover” means all the scaling and cropping is handled for you – voilà, no unnecessary code.

months[i].element.style.backgroundPosition = "center";  
months[i].element.style.backgroundSize = "cover";  

Try resizing the browser window to see how easily the images are changed to keep the calendar format.

Even though the API is as slow as molasses, it’s still better than what I did for previous years – see The Best Photos of 2012. In that program, an HTML page sent the parameters to a PHP program. The PHP program then sat there until it had responses for all 12 months, and then delivered an HTML page showing the results. But in the meaning, you’d be watching a blank page. The new method is better because it uses AJAX – you know, Asynchronous JavaScript and XML. Though, hmm, the HTML code doesn’t ever see any XML, so I wonder if it should still be called AJAX. The Flickr API does return XML, but the PHP proxy script converts it into JSON, and feeds that to the Javascript.

I’ve also been getting a bunch of 500 server errors. But most of the time, the program works just fine.

Explore Flickr’s gigantic collection of photos with the Flickr Calend’r.

Exploring the Year’s Best Photos

Leave a Reply