I decided to maximize the use of Flickr as an image repository specifically for my blog. While it would be nice to just move the entire gallery to Flickr, I really don’t like the idea of not being able to skin it (and that the gallery’s URL will be outside of my domain). I’m not sure if they have an API released that allows a fully blown gallery to be created outside of their servers, but for now it’s not an option for me.

I finally finished editing each and every entry to fix the broken image links after I moved everything to Flickr. And while modifying the posts, I realized some things that may be useful in case you guys didn’t know it yet. One cool thing about Flickr is that stores its images statically, which allows you to do some legitimate hotlinking to [your] images in the Flickr server from virtually anywhere.

The drawback was that you had to do a decent amount of clicking before you can get to the “static URL” field of the file… at least that’s what I experienced until now. This post is just a discussion on how to access and use those static URLs quickly and efficiently for your hotlinking needs.flickr: http://www.flickr.com “Visit Flickr”

One of the things I love about Flickr is their whole “notes” feature. The reason why I now have live links to most if not all pictures in the blog, is just in case there are notes attached to the images. An example would be all images of the previous post, which by themselves aren’t large to begin with. Embedding them at full resolution would still fit the blog page nicely, but I still choose to link outside because of the notes. Having established that need of mine, I believe no further explanation is needed as to why I chose this method.

Breaking the Code

Let’s take this image for example:

The anchor tag redirects to http://www.flickr.com/photos/nargalzius/180358328 – which is the link to the image’s “official” Flickr page. This URL is very useful because if there’s one thing I love about Flickr, it’s the whole “notes” feature they have.

So just by that we know that you can actually have an absolute-ish URL fragment of http://www.flickr.com/photos/nargalzius/ for all your images. So start creating your template from there.

Next we have the actual IMG link, which surprise surprise! – is different from the Flickr pages you’re viewing them from. For the image above we have http://static.flickr.com/75/180358328_1b4b1958ba_m.jpg

We now see familiar things such as the actual image ID (180358328). If you’ll look at the letter after that random hash-thingie, you can try experimenting with it and find out that:

http://static.flickr.com/75/180358328_1b4b1958ba_t.jpg give’s you this:

which is a thumbnail similar to when you upload files.

http://static.flickr.com/75/180358328_1b4b1958ba_s.jpg give’s you this:

which is the default square thumbnail (I didn’t remove the default img borders to make the square crop obvious)

http://static.flickr.com/75/180358328_1b4b1958ba_m.jpg give’s you this:

incidentally, you’d think stands for “medium” which it probably does, but it’s actually the small version of the file.

http://static.flickr.com/75/180358328_1b4b1958ba.jpg give’s you this:

this is the medium setting, also the default resolution when you see the image’s Flickr page which is why you don’t see any appended letter after the hash info.

http://static.flickr.com/75/180358328_1b4b1958ba_o.gif give’s you this:

which is the large/original setting.

Which incidentally, are the different sizes available in Flickr‘s all sizes page of the said image.

Now you see the extension changed for the large setting of this particular file. The original file was a GIF file, and Flickr generates alternate views as JPEGs (.jpg). It’s also worth mentioning that the medium/default and large settings are practically the same dimensions, it would depend on your image. If Flickr detects that once the smaller variants are already below the threshold of a given dimension bracket (e.g. large, medium, etc.) then it will not resize the image any further. So in this case, the maximum resolution was already hit when viewing the medium/default view, so it has the same dimensions as the large view.

What Now?

But again, I mentioned that to get to the actual “all sizes” page takes quite a few clicks ¹ OK fine only one, but you know what I mean But the thing I found out was you didn’t really have to go to that page to get those URLs. You can practically access the URL from anywhere in Flickr because all variations of the image you see at any point ² Except the flash slideshow I guess… and the previous-next applet. (search view, photostream, etc.) are taken from the same static file URLs just mentioned. So all you have to do is once you see your image, right click on it and select your browser’s option closest to “save image location” That will almost surely give you one of the 4 URLs mentioned above.

How I do a rapid Flickr image hotlink.

First I made an anchor template for Ecto (called by a hotkey) which somewhat looks like this:

As you can see, I left the image ID blank, and the whole img src blank as well. After that anchor code pops up from a hotkey stroke. I then go to Flickr, do a search on my photos for the image I want (in case it’s not right in front of me already) and just right-click and copy the image location. I then post that onto the src field, adjust the letter if neccessary, then copy the image ID and append it into the href field. Then you get the live, linked image you see above.

The only thing you probably have to pay attention to is whenever you plan to use the _o attribute, where you have to know what extension you uploaded with.