jekyll-flickresponsive.rb

require 'flickraw'

module Jekyll
  class FlickresponsiveTag < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @text = text
      FlickRaw.api_key=Jekyll.configuration({})['flickr']['api_key']
      FlickRaw.shared_secret=Jekyll.configuration({})['flickr']['secret']
    end

    def get_sizes(image)
        i = image.tr('"','').strip()
        Jekyll.logger.info("Image: '"+i+"'")
        sizes = flickr.photos.getSizes :photo_id => i.to_s
        s = Hash.new()
        q = Hash.new()
        s[:small] = sizes.find { |s| s.width == '320' }
        s[:medium_1] = sizes.find { |s| s.width == '500' }
        s[:medium_2] = sizes.find { |s| s.width == '640' }
        s[:medium_3] = sizes.find { |s| s.width == '800' }
        s[:large_1] = sizes.find { |s| s.width == '1024' }
        s[:large_2] = sizes.find { |s| s.width == '1600' }
        s[:large_3] = sizes.find { |s| s.width == '2048' }
        s[:original] = sizes.find { |s| s.label == 'Original' }

        q = Hash.new()
        q[:photo_id] = i
        q[:data] = s

        return q
    end

    def render(context)
      sizes = get_sizes(@text)
      '<picture>
      <source media="(min-width: 800px)" srcset="'+sizes[:data][:large_1]["source"].to_s+'">
      <source media="(min-width: 300px)" srcset="'+sizes[:data][:medium_3]["source"].to_s+'">
      <img src="'+sizes[:data][:large_2]["source"].to_s+'" style="width:auto;">
      </picture>
      </a>'
    end
  end
end

Liquid::Template.register_tag('flickresponsive', Jekyll::FlickresponsiveTag)

I found some time to sit down to come up with a solution with caching https://github.com/rriemann/jekyll-flickr .

Why did you chose the picture tag and not the img srcset solution?

Best,
Robert