jekyll-responsive_image 0.9.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: dc0a20c9cc1f1bfd10aef481ca55672377b9379f
-  data.tar.gz: 60044f0efde1042917c727817d597e11e38ca40a
+  metadata.gz: ed00bfad560bc67b74bd57aeae4cf8245a3584ec
+  data.tar.gz: 4f9315a2ac66b01e024b1c650783e864ff712b65
 SHA512:
-  metadata.gz: 2c21adf98bc2bd32e379bb7721f7ff2ce9149f2a351dd00f99ead6f52b935ae82a30ce1d62fb76abbef567c5d0ad701e36ffc31617bef6b609ce316ae6c23d1d
-  data.tar.gz: fb4cd91b2570b517e2e05662e1117adce75616b973a48faf6147e3f4ecc802be260e81e7e74a49b4be166025160c826cf3a4a6f7d1ea3dbe29519dd4419a5bc4
+  metadata.gz: 1951e99caf0c73b6716810dfa26043085f9b3aa522f3a393c5963ab85cd613bb5657ebb23c3af0a056a951200536e6af4a5c0b9c3a561d83f26d27a488da663f
+  data.tar.gz: 39505e832aad11402d47a1f4d617a6dca827e19104652a359f846f838b55f2c1b0891776ac663054e449383ddaa7977f966e5ddfd89f5824c178a3354ce98185

data/.gitignore

@@ -1,2 +1,3 @@
 coverage
 Gemfile.lock
+jekyll-responsive_image-*.gem

data/README.md

@@ -27,15 +27,35 @@ An example configuration is below.
 
 ```yaml
 responsive_image:
-  template: '_includes/responsive-image.html' # Path to the template to render. Required.
+  # [Required]
+  # Path to the image template.
+  template: _includes/responsive-image.html
 
-  # An array of resize configurations. When this array is empty (or not specified),
-  # no resizing will take place.
+  # [Optional, Default: 85]
+  # Quality to use when resizing images.
+  default_quality: 90
+
+  # [Optional, Default: []]
+  # An array of resize configuration objects. Each object must contain at least
+  # a `width` value.
   sizes:
-    - width: 480 # How wide the resized image will be. Required
+    - width: 480  # [Required] How wide the resized image will be.
+      quality: 80 # [Optional] Overrides default_quality for this size.
     - width: 800
-      quality: 90 # Override JPEG quality (default is 85). Optional.
     - width: 1400
+      quality: 90
+
+  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
+  # The template used when generating filenames for resized images.
+  #
+  # Parameters available are:
+  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)
+  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)
+  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)
+  #   %{width}       Width of the resized image
+  #   %{height}      Height of the resized image
+  #
+  output_path_format: assets/resized/%{width}/%{basename}
 ```
 
 ## Usage
@@ -60,35 +80,60 @@ Any extra attributes will be passed straight to the template as variables.
 
 ### Template
 
-You will need to create a template in order to use the `responsive_image` tag. A sample template is below.
+You will need to create a template in order to use the `responsive_image` tag. Below are some sample templates to get you started.
+
+#### Basic image tag with `srcset`
 
 ```html
 <img src="/{{ path }}"
-     alt="{{ alt }}"
-     title="{{ title }}"
-
-     {% if resized %}
-         srcset="{% for i in resized %}
-             /{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
-         {% endfor %}"
-     {% endif %}
->
+     srcset="
+      {% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}
+      /{{ original.path }} {{ original.width }}w
+     ">
 ```
 
-#### Template Variables
+#### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
 
-The following variables are available in the template:
+> This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
 
-| Variable  | Type   | Description                                                                                          |
-|-----------|--------|------------------------------------------------------------------------------------------------------|
-| `path`    | String | The path of the unmodified image. This is always the same as the `path` attribute passed to the tag. |
-| `resized` | Array  | An array of all the resized images. Each image contains the properties listed below.                 |
-| `*`       | String | Any other attributes will be passed to the template verbatim as strings.                             |
+```html
+{% assign smallest = resized | sort: 'width' | first %}
+
+<div class="responsive-image">
+    <img class="responsive-image__placeholder" src="/{{ smallest.path }}">
+    <div class="responsive-image__delayed" data-src="/assets/resized/{width}/{{ original.basename }}"></div>
+</div>
+
+<script>
+    new Imager('.responsive-image__delayed', {
+        availableWidths: [{{ resized | map: 'width' | join: ', ' }}]
+        onImagesReplaced: function() {
+            $('.responsive-image__placeholder').hide();
+        }
+    });
+</script>
+```
+
+### Template Variables
 
-Each element in the `resized` array contains the following properties:
+The following variables are available in the template:
 
-| Variable | Type     | Description                      |
-|----------|----------|----------------------------------|
-| `path`   | String   | The path of the resized image.   |
-| `width`  | Integer  | The width of the resized image.  |
-| `height` | Integer  | The height of the resized image. |
+| Variable   | Type   | Description                                                                                          |
+|----------- |--------|------------------------------------------------------------------------------------------------------|
+| `path`     | String | The path of the unmodified image. This is always the same as the `path` attribute passed to the tag. |
+| `resized`  | Array  | An array of all the resized images. Each image is an **Image Object**.                               |
+| `original` | Object | An **Image Object** containing information about the original image.                                 |
+| `*`        | String | Any other attributes will be passed to the template verbatim as strings.                             |
+
+#### Image Objects
+
+Image objects (like `original` and each object in `resized`) contain the following properties:
+
+| Variable    | Type    | Description                                                             |
+|-------------|---------|-------------------------------------------------------------------------|
+| `path`      | String  | The path to the image.                                                  |
+| `width`     | Integer | The width of the image.                                                 |
+| `height`    | Integer | The height of the image.                                                |
+| `basename`  | String  | Basename of the file (`assets/some-file.jpg` => `some-file.jpg`).       |
+| `filename`  | String  | Basename without the extension (`assets/some-file.jpg` => `some-file`). |
+| `extension` | String  | Extension of the file (`assets/some-file.jpg` => `jpg`).                |

data/features/fixtures/_includes/custom-template.html

@@ -1 +1 @@
-{{ resized | map: 'width' }}
+[{{ resized | map: 'width' | join: ', ' }}]

data/features/fixtures/_includes/responsive-image.html

@@ -1,5 +1,4 @@
-<img alt="{{ alt }}" src="/{{ path }}" title="{{ title }}"{% if resized %} srcset="
-    {% for i in resized %}
-        /{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
-    {% endfor %}
-"{% endif %}>
+<img alt="{{ alt }}" src="/{{ path }}" title="{{ title }}" srcset="
+    {% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}
+    /{{ original.path }} {{ original.width }}w
+">

data/features/responsive-image.feature

@@ -55,6 +55,7 @@ Feature: Jekyll responsive-image tag
     Then I should see "<img alt=\"\" src=\"/assets/test.png\"" in "_site/index.html"
     And I should see "/assets/resized/test-100x50.png 100w" in "_site/index.html"
     And I should see "/assets/resized/test-200x100.png 200w" in "_site/index.html"
+    And I should see "/assets/test.png 300w" in "_site/index.html"
     And the file "assets/resized/test-100x50.png" should exist
     And the file "assets/resized/test-200x100.png" should exist
 
@@ -65,10 +66,27 @@ Feature: Jekyll responsive-image tag
         sizes:
           - width: 100
           - width: 200
+          - width: 300
       """
     And I have a file "index.html" with:
       """
       {% responsive_image path: assets/test.png template: _includes/custom-template.html %}
       """
     When I run Jekyll
-    Then I should see "100200" in "_site/index.html"
+    Then I should see "[100, 200, 300]" in "_site/index.html"
+
+  Scenario: Overriding the generated filenames
+    Given I have a responsive_image configuration with:
+      """
+        template: _includes/responsive-image.html
+        output_path_format: assets/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
+        sizes:
+          - width: 100
+      """
+    And I have a file "index.html" with:
+      """
+      {% responsive_image path: assets/test.png %}
+      """
+    When I run Jekyll
+    Then I should see "/assets/test.png-resized/100/test-50.png 100w" in "_site/index.html"
+    And the file "assets/test.png-resized/100/test-50.png" should exist

data/lib/jekyll/responsive_image/defaults.rb

@@ -0,0 +1,13 @@
+module Jekyll
+  class ResponsiveImage
+    @defaults = {
+      'default_quality'    => 85,
+      'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
+      'sizes'              => [],
+    }.freeze
+
+    class << self
+      attr_reader :defaults
+    end
+  end
+end

data/lib/jekyll/responsive_image/tag.rb

@@ -0,0 +1,91 @@
+module Jekyll
+  class ResponsiveImage
+    class Tag < Liquid::Tag
+      def initialize(tag_name, markup, tokens)
+        super
+
+        @attributes = {}
+
+        markup.scan(::Liquid::TagAttributes) do |key, value|
+          # Strip quotes from around attribute values
+          @attributes[key] = value.gsub(/^['"]|['"]$/, '')
+        end
+      end
+
+      def resize_image(img, config)
+        resized = []
+
+        config['sizes'].each do |size|
+          width = size['width']
+          ratio = width.to_f / img.columns.to_f
+          height = (img.rows.to_f * ratio).round
+
+          next unless needs_resizing?(img, width)
+
+          filepath = format_output_path(config['output_path_format'], img.filename, width, height)
+          resized.push(image_hash(filepath, width, height))
+
+          # Don't resize images more than once
+          next if File.exists?(filepath)
+
+          ensure_output_dir_exists!(File.dirname(filepath))
+
+          Jekyll.logger.info "Generating #{filepath}"
+
+          i = img.scale(ratio)
+          i.write(filepath) do |f|
+            f.quality = size['quality'] || config['default_quality']
+          end
+
+          i.destroy!
+        end
+
+        resized
+      end
+
+      def format_output_path(format, path, width, height)
+        params = Utils.symbolize_keys(image_hash(path, width, height))
+        format % params
+      end
+
+      def needs_resizing?(img, width)
+        img.columns > width
+      end
+
+      def ensure_output_dir_exists!(dir)
+        unless Dir.exists?(dir)
+          Jekyll.logger.info "Creating output directory #{dir}"
+          FileUtils.mkdir_p(dir)
+        end
+      end
+
+      # Build a hash containing image information
+      def image_hash(path, width, height)
+        {
+          'path'      => path,
+          'basename'  => File.basename(path),
+          'filename'  => File.basename(path, '.*'),
+          'extension' => File.extname(path).delete('.'),
+          'width'     => width,
+          'height'    => height,
+        }
+      end
+
+      def render(context)
+        config = ResponsiveImage.defaults.dup
+        config.merge!(context.registers[:site].config['responsive_image'])
+
+        img = Magick::Image::read(@attributes['path']).first
+        @attributes['original'] = image_hash(@attributes['path'], img.columns, img.rows)
+        @attributes['resized'] = resize_image(img, config)
+
+        image_template = @attributes['template'] || config['template']
+
+        partial = File.read(image_template)
+        template = Liquid::Template.parse(partial)
+
+        template.render!(@attributes)
+      end
+    end
+  end
+end

data/lib/jekyll/responsive_image/utils.rb

@@ -0,0 +1,13 @@
+module Jekyll
+  class ResponsiveImage
+    class Utils
+      def self.symbolize_keys(hash)
+        result = {}
+        hash.each_key do |key|
+          result[key.to_sym] = hash[key]
+        end
+        result
+      end
+    end
+  end
+end

data/lib/jekyll/responsive_image/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   class ResponsiveImage
-    VERSION = '0.9.1'.freeze
+    VERSION = '0.10.0'.freeze
   end
 end

data/lib/jekyll/responsive_image.rb

@@ -1,101 +1,11 @@
+require 'fileutils'
+
 require 'jekyll'
 require 'rmagick'
 
-module Jekyll
-  class ResponsiveImage
-    class Tag < Liquid::Tag
-      DEFAULT_QUALITY = 85
-
-      def initialize(tag_name, markup, tokens)
-        super
-
-        @attributes = {}
-        @markup = markup
-
-        @markup.scan(::Liquid::TagAttributes) do |key, value|
-          # Strip quotes from around attribute values
-          @attributes[key] = value.gsub(/^['"]|['"]$/, '')
-        end
-      end
-
-      def resize_image(path, config)
-        sizes = config['sizes']
-
-        return if sizes.empty?
-
-        output_dir = config['output_dir']
-        ensure_output_dir_exists!(output_dir)
-
-        resized = []
-        img = Magick::Image::read(path).first
-
-        sizes.each do |size|
-          width = size['width']
-          ratio = width.to_f / img.columns.to_f
-          height = (img.rows.to_f * ratio).round
-
-          filename = resized_filename(path, width, height)
-          newpath = "#{output_dir}/#{filename}"
-
-          next unless needs_resizing?(img, width)
-
-          resized.push({
-            'width'  => width,
-            'height' => height,
-            'path'   => newpath,
-          })
-
-          # Don't resize images more than once
-          next if File.exists?(newpath)
-
-          Jekyll.logger.info "Generating #{newpath}"
-
-          i = img.scale(ratio)
-          i.write(newpath) do |f|
-            f.quality = size['quality'] || DEFAULT_QUALITY
-          end
-
-          i.destroy!
-        end
-
-        resized
-      end
-
-      # Insert resize information into a file path
-      #
-      #   resized_filename(/foo/bar/file.name.jpg, 500, 300)
-      #     => /foo/bar/file.name-500x300.jpg
-      #
-      def resized_filename(path, width, height)
-        File.basename(path).sub(/\.([^.]+)$/, "-#{width}x#{height}.\\1")
-      end
-
-      def needs_resizing?(img, width)
-        img.columns > width
-      end
-
-      def ensure_output_dir_exists!(dir)
-        unless Dir.exists?(dir)
-          Jekyll.logger.info "Creating output directory #{dir}"
-          Dir.mkdir(dir)
-        end
-      end
-
-      def render(context)
-        config = context.registers[:site].config['responsive_image']
-        config['output_dir'] ||= 'assets/resized'
-        config['sizes'] ||= []
-
-        @attributes['template'] ||= config['template']
-        @attributes['resized'] = resize_image(@attributes['path'], config)
-
-        partial = File.read(@attributes['template'])
-        template = Liquid::Template.parse(partial)
-
-        template.render!(@attributes)
-      end
-    end
-  end
-end
+require 'jekyll/responsive_image/version'
+require 'jekyll/responsive_image/defaults'
+require 'jekyll/responsive_image/utils'
+require 'jekyll/responsive_image/tag'
 
 Liquid::Template.register_tag('responsive_image', Jekyll::ResponsiveImage::Tag)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-responsive_image
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.10.0
 platform: ruby
 authors:
 - Joseph Wynn
@@ -64,6 +64,9 @@ files:
 - index.html
 - jekyll-responsive_image.gemspec
 - lib/jekyll/responsive_image.rb
+- lib/jekyll/responsive_image/defaults.rb
+- lib/jekyll/responsive_image/tag.rb
+- lib/jekyll/responsive_image/utils.rb
 - lib/jekyll/responsive_image/version.rb
 - test-index.html
 homepage: https://github.com/wildlyinaccurate/jekyll-responsive-image