Embedding flickr photos on your Jekyll website

3 minute read comments

Of course you can keep the images that you embed on your Jekyll website in your website’s GitHub repository. However, in case you are a photography enthusiast and you’d like to use your website to showcase your photographs, you might reach a limitation by GitHub if you have a huge amount of images. At least that’s what I have experienced. In the past, I stored all images of my Weekend Stories in the website’s repository. This worked fine until I reached a certain amount of images and total files size. Since then, GitHub Actions stopped building and deploying the website and I couldn’t update it anymore. I was therefore forced to find another solution, and I found one.

img

In parallel to my website, I usually post my images on flickr. So I thought, I just relink the images on my website to the image versions on flickr, and delete the versions on GitHub. A good idea at first glance – but setting the relinks manually for each and every image would have been extremely tedious. I therefore searched for any existing Jekyll plugin or script that would do the job for me automatically. I found it: the jekyll-flickr-photoset plugin by Jérémy Benoist (see it in action). This plugin, written in ruby, automatically downloads all links of entire flickr photosets and embeds them on the desired Jekyll page via a Liquid tag. Here is everything what you need, if you’d like to use that plugin also on your website as well (or follow the instructions from the GitHub repository).

Installation

  1. Install flickraw, a library for accessing the flickr API:

    gem install flickraw
    
  2. Get a flickr API key.
  3. Create an empty “flickr.rb” file and insert the following code:

    require 'flickraw'
    FlickRaw.api_key="... Your API key ..."
    FlickRaw.shared_secret="... Your shared secret ..."
    token = flickr.get_request_token
    auth_url = flickr.get_authorize_url(token['oauth_token'], :perms => 'delete')
    puts "Open this url in your process to complete the authentication process : #{auth_url}"
    puts "Copy here the number given when you complete the process."
    verify = gets.strip
    begin
      flickr.get_access_token(token['oauth_token'], token['oauth_token_secret'], verify)
      login = flickr.test.login
      puts "You are now authenticated as #{login.username} with token #{flickr.access_token} and secret #{flickr.access_secret}"
    rescue FlickRaw::FailedResponse => e
      puts "Authentication failed : #{e.msg}"
    end
    
  4. Enter in the FlickRaw.api_key and FlickRaw.shared_secret variable respectively the api_key and shared secret previously generated on the flickr website.
  5. Launch the script via

    ruby -rubygems flickr.rb
    

    and follow the instructions.

  6. Insert the received access_token and access_secret along with the api_key and shared_secret into the “_config.yml” file of your website via:

    flickr:
      cache_dir:       "./_cache/flickr"
      api_key:          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      shared_secret:    xxxxxxxxxxxxxxxx
      access_token:     xxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxx
      access_secret:    xxxxxxxxxxxxxxxx
    
    • In the cache folder, all image references from each photoset are stored. This saves time when we regenerate posts.

Usage

To insert all images of a certain photoset, insert the following Liquid tag on the desired page:

{% flickr_photoset 12345678901234567 %}

where

  • 12345678901234567 is the flickr photoset ID, that can be extracted from the photoset’s url (e.g., http://www.flickr.com/photos/j0k/sets/72157624158475427/)

You can even add some arguments to the tag,

{% flickr_photoset 12345678901234567  "Square" "Medium 640" "Large" "Site MP4" %}

where

  • "Square" defines the size for the thumbnail image,
  • "Medium 640" is the size for the displayed image,
  • "Large" is the size for the opened image, and
  • "Site MP4" is the format for the video in case the photoset includes a video.

More sizes can be found here.