Flickr Integration

My photographs are hosted on Flickr. I have no (known) download quota, and no storage quota, but do have a 2GB upload limit per month. They store the large versions and automatically generate reduced sizes down to small 75x75 square snippets. Images can also be tagged which I use for piquing interest with one or two from a larger set tagged with the same word, and link to the Flickr page that shows all photos tagged with that word. For example, you can see all my pictures tagged with or .

The photos on Flickr are accessible via a simple URL scheme, so I can embed the URL in a simple img tag. But the URL is long. I also want to link back to the photo's Flickr page. That URL is also long. In all, I have to write something like this for a given image:

<a title="View larger photo" href="http://www.flickr.com/photo_zoom.gne?id=118339375&size=o">
<img src="http://static.flickr.com/48/118339375_7c7e9986ef.jpg" border="0">
</a>

This got tiresome very quickly, so I wrote a little Javascript function called img:

function img(path, size)
{
  var img_id = path.match(/\d{9}/);

  output = "<a title='View larger photo' href='http://www.flickr.com/photo_zoom.gne?id=" + img_id + "&size=o'><img border=0 src='http://static.flickr.com" + path;
  if (size) { output += "_" + size; }
  output += ".jpg'</a>";
  document.write(output);
}

Now on the page I can insert into my page

<script>img("/48/118339375_7c7e9986ef","m")</script>

...and the image will appear. Note that the image is linked to the larger version, and even has a nifty tooltip.

The second argument to img refers to the image size. This is an optional one character value that can be m for medium, t for tiny, etc. More about URL scheme for Photos is at the Flickr API documentation.

Getting the three parts of the URL that you see above is easy when you see the image on Flickr: just look at the image's URL and extract the pieces from it. To do this, I wrote a Python script that reads standard input and uses regular expressions to extract out the relevant portion. It then outputs the relevant Javascript snippet that you see above. So on a page with a desired photo, I right click, choose "Copy image location", and paste it into the program. Then copy the result into the page source and I'm done. Here's the code for that:

import sre

while 1:
  x = raw_input("URL: ")
  thing = sre.findall("/../........._..........", x)
  if thing:
    print '<script>img("%s","m")</script>' % thing[0]
  else:
    print "Unparsable URL"
  print

And that's all there's to it.

Update: Actually, the above can also be done in Javascript. Here's a form that you can use yourself.

Clear
Convert