Jan
5
2011

Order Tara's Bicycle Touring Cookbook Today!

Our Process: Automation: Journal Photos

by Tyler

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.

Previous Entry
-
Next Entry
-
G
Topics:

10 comments

Fascinating. I'm interested in this as I'm looking for a system to better organize my photos, and I'd come to the conclusion that I'm going to have to write my own. I am considering Flickr, I have quite a few photos on Picassa, but programming that interface doesn't look as straightforward as with Flickr. Very interesting stuff, thanks for sharing!
Posted by Tony on March 15th, 2011 at 1:14 PM
Made the last month of our journaling so much easier. Thanks again Tyler:)
Posted by Natasha on March 15th, 2011 at 5:54 PM
I am continually amazed at your incredible skillz bro. Thank God you will be home soon to "get in there" if I need you hehehe.
Posted by Amanda on March 16th, 2011 at 3:26 AM
Tony--
Flickr is great! Their API is dead simple to use (the site is too). The community aspect is great as well, if you care about that sort of thing. That said, have you considered Smugmug? They are a fair bit more expensive than Flickr, but they have some cool features like being able to embed images at any size. I'll be migrating our entire library to them specifically for this feature eventually.

Natasha--
I'm so stoked that you guys are finding the photo loader I made for you handy. Doing this crap manually is for the birds.

Amanda--
Thanks sis! I can't wait to see you, and to fix all your computer problems too :)
Posted by Tyler on March 20th, 2011 at 3:20 PM
Thanks for the tip Tyler - I'll have a look at SmugMug - keep hearing good things about them...cheers!
Posted by Tony on March 20th, 2011 at 5:32 PM
Great Stuff!!! I plan to try to use this for my upcoming TransAmerica tour; any chance you have a App in the Flickr App Garden with this in there?
Posted by Dustin on March 30th, 2011 at 4:23 PM
Hey Dustin!

Sorry, I don't have anything in the App Garden. The code samples you can download are basically a working product, though. If you plug in your Flickr API key and account NSID, you'll be all set. It is just one file, and it'll work fine on any web server with PHP.

If you have any specific questions feel free to drop an email or post another comment.
Posted by Tyler on March 31st, 2011 at 1:01 AM
Hi Tyler,

It worked great, funny symptom I noticed in IE it shows the pics, but in Firefox it just prints out the links; did this on both mine and yours. Maybe a nice to have feature when I want just the links versus the pics for posting.

Thanks Again,
Dustin
Posted by Dustin on March 31st, 2011 at 4:04 AM
Dustin--

I just had a look, and sure enough, IE is displaying things wrong. I've updated the code in the samples and this entry to repair the problem (encoding the htmlentities).

If you didn't already apply a fix of your own, feel free to grab the new one. Great idea about showing just the links. You'd just print the $src variable instead of $image.
Posted by Tyler on March 31st, 2011 at 4:56 AM
Wow. I need to see if Photobucket has an API or switch to Flickr.

Just started reading your blog. I fear the writing and photos may seduce me away from more productive things I should be doing.
Posted by dancebert on May 30th, 2012 at 4:36 AM