This entry is part of an ongoing series about how we've documented our adventure.
As of this writing, our journal contains approximately eight thousand photos, distributed over eight hundred and five published entries. We store this ever growing collection of media in a flickr account, and this entry is about some of the tools I've built for interacting with it. Before I jump into the code, I'll start with a little history to illustrate why I created them in the first place.
Our first process for getting the ten or more photos we've averaged per journal every day for the last two years was a laborious task. We'd upload our pictures, and then open the resulting flickr pages for each in a separate browser tab. From there, we'd have to cut and paste the code for all of them, one-by-one, into our editor. At the best of times, with a good internet connection, this workflow was mildly annoying.
At the worst, it was a frustrating chore fraught with all kinds of difficulties. For example, if we missed any photos, we'd have to hunt through flickr, flipping between our draft and photo pages until we found the outliers. If we were dealing with multiple days, we could have as many as 100 photos to place. Not only was this process incredibly inefficient, on slow internet connections, it was maddening.
Thankfully, flickr has an API which allowed me to turn this formerly convoluted, time-consuming task into a two second operation. For non-programmers, an API is an application programming interface, or more clearly: a set of tools which facilitate communication with a piece of software.
As it turns out, the fix to our problem was an easy one. Since we store each day's photos in its own set, I only needed to implement two basic functions. The first was to provide a listing of sets to choose from, and the second was a method to request all of the photos from any set we picked. Below are examples of the two relevant APIs that made this possible:
A heavily commented sample of the code below can be downloaded here.
flickr.photosets.getList
This example will request an XML response from flickr which contains information about every photo-set in the assigned account. If the results are retrieved successfully, the code prints them into a select box so we can choose which one we want the photos for.
<?php define("FLICKR_NSID","YOUR_NSID_HERE"); define("FLICKR_API_KEY","YOUR_API_KEY_HERE"); define("FLICKR_API_URL","http://www.flickr.com/services/rest/"); define("FLICKR_SET_LIST",FLICKR_API_URL ."?method=flickr.photosets.getList&api_key=" .FLICKR_API_KEY ."&user_id=" .FLICKR_NSID); if($xml = simplexml_load_file(FLICKR_SET_LIST)) { if($sets = $xml->photosets->photoset) { print "<select name=\"set\" id=\"set\">\n"; print " <option value=\"\">Choose a Photo Set</option>\n"; foreach($sets as $set) { $id = $set->attributes()->id; print " <option value=\"$id\">$set->title</option>\n"; } print "</select>"; } else { $err = $xml->err->attributes(); print "$err->msg [code: $err->code]"; } } else { print "Unable to contact ".FLICKR_SET_LIST; }
flickr.photosets.getPhotos
This sample requests an XML response from flickr which contains information about every photo in the set defined by the variable $set (in the working example below, it is assigned automatically by looking at what set was chosen from the selectbox). If the results are retrieved successfully, the code prints the HTML required to embed all of the images from any set into our journal.
<?php define("FLICKR_NSID","YOUR_NSID_HERE"); define("FLICKR_API_KEY","YOUR_API_KEY_HERE"); define("FLICKR_API_URL","http://www.flickr.com/services/rest/"); define("FLICKR_SET_PHOTOS",FLICKR_API_URL ."?method=flickr.photosets.getPhotos&api_key=" .FLICKR_API_KEY ."&photoset_id="); $set = "SET_ID_HERE"; if($xml = simplexml_load_file(FLICKR_SET_PHOTOS."$set")) { if($photos = $xml->photoset->photo) { foreach($photos as $photo) { $photo = $photo->attributes(); $src = "http://farm{$photo->farm}.static.flickr.com/". "{$photo->server}/{$photo->id}_{$photo->secret}_z.jpg"; $image = "<p><img src=\"$src\" title=\"$photo->title\"/></p>\n"; print htmlentities($image,ENT_QUOTES,"utf-8"); } } else { $err = $xml->err->attributes(); print "$err->msg [code: $err->code] [set: $set]"; } } else { print "Unable to contact ".FLICKR_SET_PHOTOS."$set"; }
Putting the two together yields something like this:
I've since used these basic functions to create a much more advanced method of embedding images in our journal, the explanation of which will have to wait for another entry.
The above code requires a flickr API key, which can be created here, as well as the NSID of the account to be used, which is easily retrievable here. These sample are a bare-bones solution intended to provide a platform for further extension. For example, a relatively minor variation of this method can also be used to create an automatically updating photo gallery.
A zipped package of the code from this entry can be downloaded here.