I said it before, I love being a photographer and a web developer. Here’s another reason why.

Making an Online Photo Calendar

What started as an idea in mid-November turned into a relatively easy to make Google Gadget to showcase some of my favorite Maui photos. And all it took was:

• a little preparation,
• some convention,
• and 2 Flickr API methods

Sparing all the minor details, here’s the jist of what I did.

The Preparation

After making a small web prototype of the gadget, just to get the sizing and the HTML/CSS down, I determined that the photos I wanted to use for this would be square. Looking at the different sizes that Flickr offers you, the only “square” option by default is 75 x 75 pixels. Obviously, that wasn’t going to cut it.

So, that just meant I had to do a little cropping for each photo I wanted to use. If I crop the photo to be even on both sides, I now have the choice of 100 x 100, 240 x 240, or 500 x 500. Initially I thought 500 x 500 pixels would be great, but alas, making this fit onto an iGoogle page along side other gadgets meant I had to choose the 240 x 240 pixel size.

Just to keep track of these photos, I threw them in their own photoset on Flickr, which you can view here.

The Convention

I didn’t want to write a heck of a lot of code for this, which meant designing and populating a database full of photo IDs and dates was out of the question. Getting a little creative, I decided to use a naming convention for tagging these photos. Then, using the API methods mentioned later on, I could pull the photo for the current date based on the tag.

The convention I used was to prefix the tag with an arbitrary value (in my case, the letter “c”) followed by the month and day to display the photo on. An example would be this photo, which has the tag “c1117” and would be displayed on November 17 (11 for the month, 17 for the day). Another convention I chose is to store the text for the calendar as the description of the photo. While this results in a second API call, which I’ll explain next, it was very convenient for having just one place to “edit” my calendar.

Lastly, since the Flickr Community Guidelines state that using a photo hosted on Flickr must link back to the Flickr photo page, I decided to take the opportunity to share more details about the photo by adding a comment on the photo as well. That way, if someone using the gadget likes the photo and clicks on it, they can see more info about that photo and, in some cases, view a link back to my Maui site. And of course, they could also leave a comment themselves (if they’re a member of Flickr, that is).

The 2 Flickr API Calls

Based on the conventions mentioned above, I really only needed the following information about the photo:

• The actual photo for a given day, based on the tag,
• the URL for the photo in the small format (240 x 240 pixels),
• and the description of the photo to display in the gadget.

It turns out the first two items can be returned using the Flickr API method, flickr.photos.search, and specifying the value of the optional Tags parameter as the date formatted in the convention above (i.e. c1117). That returned the 4 pieces of information I needed to build the URL for the photo, which of course are the farm-id, server-id, photo-id, and the secret.

The only thing that was missing was the description, which was just as easy to get with a second API call. This time it was to flickr.photos.getInfo, and merely required the photo-id returned from the first call.

With the data from those two method responses, I was all set to assemble the HTML and tell people what day it was

The Rest of the Code

I already said I wasn’t going to dive into the minor details, but I did want to mention one other thing about this gadget. While I could have done this gadget completely with JavaScript by calling the Flickr API using the REST requests in JSON format, I chose to implement this logic using the XML format and a PHP script on the server side. The reason I did that was so I could save the responses from the two API calls on the server, so that way I could just use those files instead of calling the Flickr API every single time.

As for the Google Gadget code, that’s an entirely different area altogether and not worth covering here. While I chose to do this as Google Gadget, this can really be done with almost anything.

The Conclusion

Hopefully this was an interesting little article that gave you some ideas on things you can do with the Flickr API that you might not have thought of. For those out there that aren’t full fledged web developers like myself, that initial list of API methods might seem a little intimidating at first. But as you can see here, it’s fairly simple to tackle once you know how you want to approach it.