{"id":441,"date":"2006-07-05T10:25:03","date_gmt":"2006-07-05T10:25:03","guid":{"rendered":"http:\/\/www.nargalzius.com\/blog2\/http:\/www.nargalzius.com\/blog2\/archives\/2006\/07\/2006_07_05_1825.php"},"modified":"2017-02-10T02:23:22","modified_gmt":"2017-02-10T02:23:22","slug":"flickr-ized","status":"publish","type":"post","link":"http:\/\/nargalzius.com\/blog\/archives\/2006\/07\/05\/flickr-ized","title":{"rendered":"Flickr-ized"},"content":{"rendered":"

I decided to maximize the use of Flickr<\/a> as an image repository specifically<\/em> for my blog. While it would be nice to just move the entire gallery<\/a> to Flickr, I really don’t like the idea of not being able to skin it (and that the gallery’s URL<\/code> 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.<\/p>\n

I finally finished editing each and every entry to fix the broken image links after I moved everything to Flickr<\/a>. 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<\/a> is that stores its images statically,<\/em> which allows you to do some legitimate<\/strong> hotlinking to [your] images in the Flickr server from virtually anywhere.<\/p>\n

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<\/a>: http:\/\/www.flickr.com<\/a> “Visit Flickr”<\/p>\n

One of the things I love about Flickr<\/a> 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<\/em> there are notes attached to the images. An example would be all<\/em> images of the previous post<\/a>, 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<\/em> I chose this method.<\/p>\n

Breaking the Code<\/h1>\n

Let’s take this image for example:\n\"\"<\/a><\/p>\n

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

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

Next we have the actual IMG<\/code> link, which surprise surprise! – is different from the Flickr<\/a> pages you’re viewing them from. For the image above we have http:\/\/static.flickr.com\/75\/<\/code>180358328<\/strong>_1b4b1958ba_<\/code>m<\/strong>.jpg<\/code><\/p>\n

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

http:\/\/static.flickr.com\/75\/180358328_1b4b1958ba_<\/code>t<\/strong>.jpg<\/code>\ngive’s you this:<\/p>\n\"\"\n

which is a thumbnail similar to when you upload files.<\/p>\n

http:\/\/static.flickr.com\/75\/180358328_1b4b1958ba_<\/code>s<\/strong>.jpg<\/code>\ngive’s you this:<\/p>\n\"\"\n

which is the default square thumbnail (I didn’t remove the default img<\/code> borders to make the square crop obvious)<\/p>\n

http:\/\/static.flickr.com\/75\/180358328_1b4b1958ba_<\/code>m<\/strong>.jpg<\/code>\ngive’s you this:<\/p>\n\"\"\n

incidentally, you’d think stands for “medium” which it probably does, but it’s actually the small<\/em> version of the file.<\/p>\n

http:\/\/static.flickr.com\/75\/180358328_1b4b1958ba.jpg<\/code>\ngive’s you this:<\/p>\n\"\"\n

this is the medium<\/em> setting, also the default resolution when you see the image’s Flickr<\/a> page which is why you don’t see any appended letter after the hash info.<\/p>\n

http:\/\/static.flickr.com\/75\/180358328_1b4b1958ba_<\/code>o<\/strong>.<\/code>gif<\/strong>\ngive’s you this:<\/p>\n\"\"\n

which is the large\/original<\/em> setting.<\/p>\n

Which incidentally, are the different sizes available in Flickr<\/a>‘s all sizes<\/a> page of the said image.<\/p>\n

Now you see the extension changed<\/strong> for the large setting of this particular file. The original file was a GIF<\/code> file, and Flickr generates alternate views as JPEGs (.jpg<\/code>). It’s also worth mentioning that the medium\/default<\/em> and large<\/em> settings are practically the same dimensions, it would depend on your image. If Flickr<\/a> 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<\/em> view, so it has the same dimensions as the large<\/em> view.<\/p>\n

What Now?<\/h1>\n

But again, I mentioned that to get to the actual “all sizes”<\/em><\/a> page takes quite a few clicks 1 <\/sup><\/a>OK fine only one, but you know what I mean<\/span><\/span>