Embedding flickr photos on your Jekyll website

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.

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ꜛ.