jekyll-srcset-tag 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 69a4d80e9d2114444f958b0372cd93b96d0af16d
+  data.tar.gz: a950dd78d6fce273fa55b21671e5ba888c66a5db
+SHA512:
+  metadata.gz: a3768328c0f8bf41e00756dbb37d866527e0fbd6b099533f02cf3eb29ad2ef09caf502971069e640c11eb43c15ed634fa5d3ae6a67d06811d02f9d2f9ea9d636
+  data.tar.gz: ed06ca9b5025efe2ff0234641ddc2e05ff1d61f72fc89276909c02d2ea2cafda724de0bb9348faeeeca047ca019c87a173746622280775835fa514d582c13862

data/lib/jekyll/srcset_tag/image/instance.rb

@@ -0,0 +1,72 @@
+module Jekyll
+  module SrcsetTag
+    class Image::Instance
+
+      attr_reader :width, :height, :image, :extension, :image_width, :image_height, :output_width, :output_height,
+                  :undersized
+
+      def initialize(width:, height:, extension:)
+        @width = width
+        @height = height
+        @extension = extension
+      end
+
+      def for_image!(image)
+        @image = image
+        @image_width = image[:width].to_i
+        @image_height = image[:height].to_i
+        calculate_output_dimensions!
+      end
+
+      def filename
+        output_width.to_s + 'x' + output_height.to_s + extension
+      end
+
+      def undersized?
+        @undersized
+      end
+
+      protected
+
+      # This is pretty much taken verbatim from https://github.com/robwierzbowski/jekyll-picture-tag
+      def calculate_output_dimensions!
+        @undersized = false
+        image_ratio = image_width.to_f / image_height.to_f
+
+        generated_width = if width
+                            width.to_f
+                          elsif height
+                            image_ratio * height.to_f
+                          else
+                            image_width.to_f
+                          end
+        generated_height = if height
+                             height.to_f
+                           elsif width
+                             width.to_f / image_ratio
+                           else
+                             image_height
+                           end
+
+        generated_ratio = generated_width / generated_height
+
+        if image_width < generated_width || image_height < generated_height
+          @undersized = true
+          generated_width = if image_ratio > generated_ratio
+                              image_width
+                            else
+                              image_height / generated_ratio
+                            end
+          generated_height = if image_ratio > generated_ratio
+                               image_height
+                             else
+                               image_width / generated_ratio
+                             end
+        end
+
+        @output_width = generated_width.round
+        @output_height = generated_height.round
+      end
+    end
+  end
+end

data/lib/jekyll/srcset_tag/image/source.rb

@@ -0,0 +1,20 @@
+module Jekyll
+  module SrcsetTag
+    class Image::Source
+
+      attr_reader :media, :size, :width, :height
+
+      def initialize(width: nil, height: nil, media: nil, size: nil)
+        @media = media
+        @size = size
+        @width = width
+        @height = height
+      end
+
+      def size_string
+        (media ? media + ' ' : '') + (size || '100vw')
+      end
+
+    end
+  end
+end

data/lib/jekyll/srcset_tag/image.rb

@@ -0,0 +1,106 @@
+require 'digest/sha1'
+require 'cgi'
+require 'mini_magick'
+require_relative 'resizer'
+
+module Jekyll
+  module SrcsetTag
+    class Image
+
+      attr_reader :source_path, :output_path, :web_output_path, :image_path, :ppi, :sources, :html_attributes
+
+      def initialize(source_path:, output_path:, web_output_path:, image_path:, ppi:, sources:, html_attributes:)
+        @source_path = source_path
+        @output_path = output_path
+        @web_output_path = web_output_path
+        @image_path = image_path
+        @ppi = ppi.respond_to?(:sort_by) ? ppi : ppi.split(',').map(&:to_i)
+        @sources = sources
+        @html_attributes = html_attributes
+      end
+
+      def generate_images!
+        unless images_exist?
+          original = MiniMagick::Image.open File.join(source_path, image_path)
+          instances.each { |instance| instance.for_image!(original) }
+          resize_images! uniq_instances, original
+        end
+      end
+
+      def images_exist?
+        Dir.exist? output_dir
+      end
+
+      def instances
+        @instances ||= create_instances
+      end
+
+      def uniq_instances
+        instances.uniq { |instance| [ instance.output_width, instance.output_height ] }
+      end
+
+      def to_html
+        srcs = image_srcs
+        src = CGI.escape_html(srcs.last[0])
+        srcset = CGI.escape_html(srcs.map {|path, size| "#{path} #{size}w" }.join(', '))
+        sizes = CGI::escape_html(source_sizes.join(', '))
+        "<img src=\"#{src}\" srcset=\"#{srcset}\" sizes=\"#{sizes}\" #{html_attributes}/>\n"
+      end
+
+      def digest
+        unless @digest
+          file = Digest::SHA1.file(File.join(source_path, image_path)).to_s
+          sizes = Digest::SHA1.hexdigest instances.map { |i| i.width.to_s + '-' + i.height.to_s }.join(' ')
+          @digest = Digest::SHA1.hexdigest file + sizes
+        end
+        @digest
+      end
+
+      def output_dir
+        File.join(output_path, image_path + '-' + digest.slice(0, 7))
+      end
+
+      def web_output_dir
+        File.join(web_output_path, image_path + '-' + digest.slice(0, 7))
+      end
+
+      protected
+
+      def create_instances
+        reverse_ppi = ppi.sort_by { |s| -s }
+        all_sources = sources.map do |source|
+          reverse_ppi.map { |ppi| [source, ppi] }
+        end.flatten(1)
+        all_sources.map do |(source, ppi)|
+          Instance.new width: (source.width ? (source.width.to_f * ppi).round : nil),
+                       height: (source.height ? (source.height.to_f * ppi).round : nil),
+                       extension: File.extname(image_path)
+        end
+      end
+
+      def image_srcs
+        uniq_instances.map do |instance|
+          [File.join(web_output_dir, instance.filename), instance.output_width.to_s]
+        end
+      end
+
+      def source_sizes
+        sources.map { |source| source.size_string }
+      end
+
+      def resize_images!(instances, original)
+        if instances.any? { |i| i.undersized }
+          warn "Warning:".yellow + " #{image_path} is smaller than the requested output file. " +
+               "It will be resized without upscaling."
+        end
+        instances.each do |instance|
+          Resizer::resize(original, output_dir, instance.filename, instance.output_width, instance.output_height)
+          puts "Generated #{File.join(output_dir, instance.filename)}"
+        end
+      end
+
+    end
+  end
+end
+
+require_relative 'image/instance'

data/lib/jekyll/srcset_tag/resizer.rb

@@ -0,0 +1,24 @@
+require 'fileutils'
+
+module Jekyll
+  module SrcsetTag
+    module Resizer
+      def self.resize(image, destination_dir, filename, width, height)
+        FileUtils.mkdir_p(destination_dir) unless File.exist?(destination_dir)
+        image.strip
+        if image['format'] == 'JPEG'
+          image.quality 80
+          image.depth 8
+          image.interlace "plane"
+        end
+        image.combine_options do |i|
+          i.resize "#{width}x#{height}^"
+          i.gravity "center"
+          i.crop "#{width}x#{height}+0+0"
+        end
+
+        image.write File.join(destination_dir, filename)
+      end
+    end
+  end
+end

data/lib/jekyll/srcset_tag/srcset_source_tag.rb

@@ -0,0 +1,46 @@
+require 'cgi'
+
+module Jekyll
+  module SrcsetTag
+    class SrcsetSourceTag < Liquid::Tag
+
+      def initialize(tag_name, markup, tokens)
+        @markup = markup
+        super
+      end
+
+      def render(context)
+        render_markup = Liquid::Template.parse(@markup)
+                                        .render(context)
+                                        .gsub(/\\\{\\\{|\\\{\\%/, '\{\{' => '{{', '\{\%' => '{%')
+        hash = markup_to_hash(render_markup)
+        markup = hash.map { |(key, value)| "#{key}=\"#{CGI.escape_html(value)}\""}
+        '<source ' + markup.join(' ') +  ' />'
+      end
+
+      def markup_to_hash(markup)
+        matches = markup.scan(markup_regex)
+        matches.each_with_object({}) do |match, memo|
+          key, value = match.split(':', 2)
+          memo[key.strip] = value.gsub(/\A("|')|("|')\Z/, '')
+        end
+      end
+
+      def markup_regex
+        %r{
+          \w+
+          \s*
+          \:
+          \s*
+          (?:
+            "(?:[^"\\]|\\.)*"
+            |
+            '(?:[^'\\]|\\.)*'
+            |
+            [^\s]+
+          )
+        }x
+      end
+    end
+  end
+end

data/lib/jekyll/srcset_tag/srcset_tag.rb

@@ -0,0 +1,80 @@
+require_relative 'image'
+require_relative 'image/source'
+require 'nokogiri'
+
+module Jekyll
+  module SrcsetTag
+    class SrcsetTag < Liquid::Block
+
+      def initialize(tag_name, markup, tokens)
+        @markup = markup
+        super
+      end
+
+      def render(context)
+        render_markup = Liquid::Template.parse(@markup)
+                                        .render(context)
+                                        .gsub(/\\\{\\\{|\\\{\\%/, '\{\{' => '{{', '\{\%' => '{%')
+
+        # set keep files
+        settings = srcset_settings(context)
+        site = context.registers[:site]
+        site.config['keep_files'] << settings['output'] unless site.config['keep_files'].include?(settings['output'])
+
+        image = image File.join(site.source, settings['source']),
+                      File.join(site.dest, settings['output']),
+                      '/' + settings['output'],
+                      render_markup,
+                      sources(super)
+        image.generate_images!
+        image.to_html
+      end
+
+      def sources(content)
+        # return sources objects
+        html = Nokogiri::HTML(content)
+        html.css('source').map do |source|
+          Image::Source.new(width: source.attr('width'),
+                            height: source.attr('height'),
+                            media: source.attr('media'),
+                            size: source.attr('size'))
+        end
+
+      end
+
+      def image(source_path, output_path, web_output_path, markup, sources)
+        markup = markup_regex.match(markup)
+        unless markup
+          raise "srcset tag doesn't look right - it should be {% srcset image_src [ppi:1,2] [html_attributes] %}"
+        end
+        Image.new(source_path: source_path,
+                  output_path: output_path,
+                  web_output_path: web_output_path,
+                  image_path: markup[:image_src],
+                  ppi: markup[:ppi] || 1,
+                  sources: sources,
+                  html_attributes: markup[:html_attr])
+      end
+
+      def markup_regex
+        %r{
+          ^
+          (?<image_src>[^\s]+\.[a-zA-Z0-9]{3,4})
+          \s*
+          (ppi:(?<ppi>(\d(\.\d\d?)?,)*\d(\.\d\d?)?))?
+          \s*
+          (?<html_attr>[\s\S]+)?
+          $
+        }x
+      end
+
+      def srcset_settings(context)
+        settings = context.registers[:site].config['srcset']
+        settings ||= {}
+        settings['source'] ||= '_assets/images/fullsize'
+        settings['output'] ||= 'images/generated'
+        settings
+      end
+    end
+  end
+end

data/lib/jekyll/srcset_tag/version.rb

@@ -0,0 +1,5 @@
+module Jekyll
+  module SrcsetTag
+    VERSION = '0.1.0'
+  end
+end

data/lib/jekyll-srcset-tag.rb

@@ -0,0 +1,5 @@
+require 'jekyll/srcset_tag/srcset_tag'
+require 'jekyll/srcset_tag/srcset_source_tag'
+
+Liquid::Template.register_tag('srcset_source', Jekyll::SrcsetTag::SrcsetSourceTag)
+Liquid::Template.register_tag('srcset', Jekyll::SrcsetTag::SrcsetTag)

metadata

@@ -0,0 +1,53 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-srcset-tag
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Kevin Dew
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-11-09 00:00:00.000000000 Z
+dependencies: []
+description: Provides a block that can take a source image and generate it to all
+  sizes for srcset usage
+email:
+- kevindew@me.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/jekyll-srcset-tag.rb
+- lib/jekyll/srcset_tag/image.rb
+- lib/jekyll/srcset_tag/image/instance.rb
+- lib/jekyll/srcset_tag/image/source.rb
+- lib/jekyll/srcset_tag/resizer.rb
+- lib/jekyll/srcset_tag/srcset_source_tag.rb
+- lib/jekyll/srcset_tag/srcset_tag.rb
+- lib/jekyll/srcset_tag/version.rb
+homepage: https://github.com/kevindew/jekyll-srcset-tag
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.1.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.8
+signing_key: 
+specification_version: 4
+summary: A Jekyll plugin to use img srcset-w images
+test_files: []