Flickr and Lightbox — a Perfect Combination

I was fiddling around with Flickr today and decided to start using the “Blog This” function as an alternative method to post to this particular blog. For a long time now I’ve been utilizing my Flickr account as an image server of sorts (much like Akamai). What I’ve done now is take this a step further.

I am now integrating Lightbox, Flickr and my blog all in an effort to produce a much more rich and attractive post (both for the user and myself). The beauty is that I don’t waste my own server space with large high-resolution images. I’ve always hosted my images on Flickr, so posting to my blog from Flickr (assuming the post has an associated image) is just a no-brainer; never hurts to remove a tedious step in the production process.

Flickr

The beauty behind being able to leverage Lightbox within my Flickr post is that now I can do everything from Flickr and continue to utilize Flickr to host my images as well. All of this and I don’t have to take my users off-site when viewing my images (or even enlarging the image to original size).

This is really a simple three step process:

  1. I start with placing all of the appropriate Lightbox files on your server. You will probably need to customize lightbox.css and lightbox.js to ensure the images paths are correct and in working order for the structure of your blog.
  2. The next step is to customize the “Blog This” function on flickr. You obviously need to configure Flickr with the ability to post to your current blog (depending on your blog platform of choice – this could be an easy two click process).
  3. The only thing left is to customize the “layout” under the “Options/Settings” in the “Your Blog” section of Flickr. Note the “additional tags” Flickr offers you in the left hand panel.

I use the below mentioned code on my site:

<div class="blogphoto"> <a href="{photo_src}" rel="lightbox" title="{photo_title}. Photo posted by {uploader_name} on {upload_date}"><img src="{photo_src_m}" alt="" /></a>Click to enlarge photo</div>{description_raw}

Flickr
View Larger Image on Flickr

Rockin' 4 Comments

Agree with me, rant with me or complain your little heart out ... share a comment

  1. I couldnt agree more.

  2. A disclaimer:

    Shortly after I originally wrote this post, I noticed a change in Flickr’s legal terms of service. They now claim the following:

    “Remember! Flickr Terms of Service specify that if you post a Flickr photo on an external website, the photo must link back to its photo page. (So, use Option 1.)”

    This pretty much says what I suggest to do (using Flickr as an image server of sorts) is breaking the Terms of Service. Sh!t!

  3. I actually wrote an article on flickr lightbox integration using php in my blog. It puts a nice little gallery on the side of your blog. I surely didn’t realize the Terms of Service violation. I guess I’ll have to switch my system. In all honesty though, what is the point of an API if they aren’t going to let you do things like this. Oh well!

  4. Nick, thanks for the link, extremely useful is you are using php!

Leave a Reply

Join in on the fun ... just no spam fun please

 

 

 

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Curious about the redesign? It's more of a design satire then a reflection of personal taste: Read More