Show a Set from Flickr on your Blogger-Blog

As my new camera is arriving soon, I need a way to post pictures without any hustle on this blog.

I have already a Flickr-Account and want to use this as the host of my pictures so I searched for a way to get the pictures from Flickr into this blog and as I didn't want to use the Flash-Gallery Flickr itself offers, my search took a little longer than expected.

Here a few things I stumbled upon during this time:

Flickr
Flickr itself has a very nice UI for showing pictures. Its user friendly, but unfortunately not what I want: I want to see the pics on my blog, not only showing a link. It also offers the already mentioned slideshow which can be shown in your blog by some code like this:

<iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=&set_id=[yoursetid]"
frameBorder="0" width="500" height="500"
scrolling="no"></iframe>

Fluidr
As Flickr itself, its a nice UI for showing pictures, but it has unfortunately the same problem: its on another page and just linking is not an option.

Flickr Slideshow
This is a desktop application, which creates you the needed html-code for your page. Looks nice at first glance, but there is again a big problem: the thumbs are locally saved, so you will need upload thumbs to your blog to show it properly.

Jquery-Flickr
On GitHub, there is a project called jquery.flickr which was finally exactly what I wanted. It can show you the sets, feeds, public pictures and even searches on your page without you needing to host the images somewhere. Of course you need to host the js-file, but that's not avoidable.

I was happy first with that solution, but after some time, I also wanted to make this a little bit fancier and not only showing the pictures as full screen on a blank page so I continued my search for a jquery-gallery which can be used with jquery-flickr. prettyPhoto seemed to be quite a nice jquery-lightbox for pictures: I just needed to adapt it for using with flickr.

It took some time to adapt those jquery-plugins till they did what I wanted, but finally I have something homemade which I really like and therefore I will stay with that solution.

So: how is it done?

Download the packed file here (please do not link directly, download and host yourself!). In this archive, you will find the jquery.flickr and the jquery.prettyPhoto files.

First you need to upload those files somewhere, where your blog can access it: Read about hosting files for blogger here.

Then lets start with the "harder" part: You need to link the CSS from jquery.prettyPhoto to your blog. Unfortunately blogger donesn't allow this to be done directly in the post, so we have to edit the html-template. This can be done in Design-Tab, here you have the choice to edit the html. Include following line just before the </head> tag:

<link charset='utf-8' href='link to prettyPhoto.css' media='screen' rel='stylesheet' title='prettyPhoto main stylesheet' type='text/css'/>

After saving this, we actually can already start creating a new post. When you started the new post, go to the edit html-tab and you can use following code-snipped to create the gallery:

<div style="display:none"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="path to your/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="path to your/jquery.flickr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
 var config = {
  api_key: 'your api key',
  link_to_size: 'l', /*supported sizes: sq(square), s(mall), m(edium), l(arge)*/
  thumbnail_size: 'sq',
 }     
 $('#photoset').flickr(config).photosetsGetPhotos({photoset_id: '[your photoset id]', galleryname:'galleryname'});/*when having more galleries in one post, you need to have different names for it!*/
})
 
$(window).load(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
  allow_resize: true,
  show_title: true,
  theme: 'dark_rounded',
  slideshow: false, /* false OR interval time in ms */
  autoplay_slideshow: false, /* true/false */
  overlay_gallery: false,
  modal: true,
});
})
</script></div>
===here starts the normal post: you can write whatever you want to
===this will become your gallery: <div id="photoset" style="text-align:center;">
</div>

As you see, you also need to get a flickr-api key, which can be obtained for free from flickr here. If you're not familiar with jquery, you also might need to know, that this $('#photoset') has to correspond with the id of the div you plan to put your gallery in. Another point is, that I surrounded the script with a hidden div because otherwise blogger would display some empty lines where the script is and this doesn't look very professional.

I know that this is actually not how html should look like and it won't be standard-compliant, but with the limited possibilities for editing the source of blogger, this is the best you can do.

For a complete feature set of the 2 plug-ins I used, please visit the corresponding sites (jquery.flickr and jquery.prettyPhoto) but be aware, that I needed to adapt both plugins and it might be, that not all functions are usable anymore (I didn't have time to test it properly: but my usecase works fine ;) )

After having this snippet in your post and updated all the links and set-id, the gallery is already shown and if you click on a picture, you will get a nice lightbox, showing the fullscreen image. You can navigate through the pictures with the cursor-keys or with your mouse, even a slideshow is possible but with flickr it seems to be too slow.

Here is a small sample:

Currently it only works in Firefox, Safari, Opera and Chrome, I'll try to find a solution for the nasty IE too if my schedule lets me: but as long as I'm concerned, they deserve it not to be supported ;)

I hope you like my solution and if you have any comments, feel free to leave them below.