jekyll-responsive_image 0.11.0 → 0.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1e7197c871c2395b35ba1521d0e096e81216b0d9
-  data.tar.gz: 8677468d6e5251e720703e48bc7dc481034eedec
+  metadata.gz: fe2970475b8023f942caa43714d99f99adfbb4a3
+  data.tar.gz: ea81c9cc1381b8d8018e87a97243d94e383f094f
 SHA512:
-  metadata.gz: 6ac5b13caf07f0da51e9ff6f178f2c0aec17f86524c1df04ec586c9812eaff8203af1b153cd2c40ccb49559442b95ea86cbff51fad4affe54a828ef41ed9ccfb
-  data.tar.gz: bc3e2951c10dd05d2a224932de713e90f34be9e2f2050c33f69fd0845f612ec60f6008b7dba139cdecdc93a90de99f798b5a97c45bf47fe225624536a7238f3e
+  metadata.gz: 08bbd6b9121656bb1c6203ed89e7169fd6b308ce94418875db420ccbcc12cf70d952ea3c77988a4359741774be566c17ab4139ca80f3c512a440fca56fff7b9e
+  data.tar.gz: 64a81aecc60593954afece28db05ce753202d14dc6b3400e7440836d84c018e36de5fdec025eaf96fb062d5c5860c68824616a6a4e93c9d21932bcd616e09f5a

data/README.md

@@ -62,19 +62,19 @@ responsive_image:
 
 Replace your images with the `responsive_image` tag, specifying the path to the image in the `path` attribute.
 
-```
+```twig
 {% responsive_image path: assets/my-file.jpg %}
 ```
 
 You can override the template on a per-image basis by specifying the `template` attribute.
 
-```
+```twig
 {% responsive_image path: assets/my-file.jpg template: _includes/another-template.html %}
 ```
 
 Any extra attributes will be passed straight to the template as variables.
 
-```
+```twig
 {% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}
 ```
 
@@ -84,7 +84,7 @@ You can use Liquid variables as attributes with the `responsive_image_block` tag
 
 > **Important!** The attributes in the `responsive_image_block` tag are parsed as YAML, so whitespace and indentation are important!
 
-```
+```twig
 {% assign path = 'assets/test.png' %}
 {% assign alt = 'Lorem ipsum...' %}
 
@@ -101,21 +101,34 @@ You can use Liquid variables as attributes with the `responsive_image_block` tag
 
 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`
+#### Responsive images with `srcset`
+
+```twig
+{% capture srcset %}
+    {% for i in resized %}
+        /{{ i.path }} {{ i.width }}w,
+    {% endfor %}
+{% endcapture %}
+
+<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
+```
+
+#### Responsive images with `<picture>`
 
-```html
-<img src="/{{ path }}"
-     srcset="
-      {% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}
-      /{{ original.path }} {{ original.width }}w
-     ">
+```twig
+<picture>
+    {% for i in resized %}
+        <source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">
+    {% endfor %}
+    <img src="/{{ path }}">
+</picture>
 ```
 
 #### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
 
 > This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
 
-```html
+```twig
 {% assign smallest = resized | sort: 'width' | first %}
 
 <div class="responsive-image">

data/features/responsive-image-block.feature

@@ -38,3 +38,13 @@ Feature: Jekyll responsive_image_block tag
       """
     When I run Jekyll
     Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\"" in "_site/index.html"
+
+  Scenario: Handling a nil path
+    Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
+    And I have a file "index.html" with:
+      """
+      {% responsive_image_block %}
+          path: {{ path }}
+      {% endresponsive_image_block %}
+      """
+    Then Jekyll should throw a "SyntaxError"

data/features/step_definitions/jekyll_steps.rb

@@ -1,7 +1,13 @@
+include Test::Unit::Assertions
+
 When /^I run Jekyll$/ do
   run_jekyll
 end
 
+Then /^Jekyll should throw a "(.+)"$/ do |error_class|
+  assert_raise(Object.const_get(error_class)) { run_jekyll }
+end
+
 Given /^I have a responsive_image configuration with:$/ do |config|
   write_file('_config.yml', "responsive_image:\n#{config}")
 end

data/lib/jekyll/responsive_image/block.rb

@@ -8,10 +8,9 @@ module Jekyll
         attributes = YAML.load(super)
         image_template = attributes['template'] || config['template']
 
-        resize_handler = ResizeHandler.new
-        img = Magick::Image::read(attributes['path']).first
-        attributes['original'] = Utils.image_hash(attributes['path'], img.columns, img.rows)
-        attributes['resized'] = resize_handler.resize_image(img, config)
+        image = ImageProcessor.process(attributes['path'], config)
+        attributes['original'] = image[:original]
+        attributes['resized'] = image[:resized]
 
         partial = File.read(image_template)
         template = Liquid::Template.parse(partial)

data/lib/jekyll/responsive_image/image_processor.rb

@@ -0,0 +1,23 @@
+module Jekyll
+  class ResponsiveImage
+    class ImageProcessor
+      include ResponsiveImage::Utils
+
+      def process(image_path, config)
+        raise SyntaxError.new('Invalid image path specified') unless File.exists?(image_path.to_s)
+
+        resize_handler = ResizeHandler.new
+        img = Magick::Image::read(image_path).first
+
+        {
+          original: image_hash(image_path, img.columns, img.rows),
+          resized: resize_handler.resize_image(img, config),
+        }
+      end
+
+      def self.process(image_path, config)
+        self.new.process(image_path, config)
+      end
+    end
+  end
+end

data/lib/jekyll/responsive_image/resize_handler.rb

@@ -1,6 +1,8 @@
 module Jekyll
   class ResponsiveImage
     class ResizeHandler
+      include ResponsiveImage::Utils
+
       def resize_image(img, config)
         resized = []
 
@@ -12,7 +14,7 @@ module Jekyll
           next unless needs_resizing?(img, width)
 
           filepath = format_output_path(config['output_path_format'], img.filename, width, height)
-          resized.push(Utils.image_hash(filepath, width, height))
+          resized.push(image_hash(filepath, width, height))
 
           # Don't resize images more than once
           next if File.exists?(filepath)
@@ -33,7 +35,7 @@ module Jekyll
       end
 
       def format_output_path(format, path, width, height)
-        params = Utils.symbolize_keys(Utils.image_hash(path, width, height))
+        params = symbolize_keys(image_hash(path, width, height))
         format % params
       end
 

data/lib/jekyll/responsive_image/tag.rb

@@ -16,10 +16,9 @@ module Jekyll
         config = ResponsiveImage.defaults.dup
         config.merge!(context.registers[:site].config['responsive_image'])
 
-        resize_handler = ResizeHandler.new
-        img = Magick::Image::read(@attributes['path']).first
-        @attributes['original'] = Utils.image_hash(@attributes['path'], img.columns, img.rows)
-        @attributes['resized'] = resize_handler.resize_image(img, config)
+        image = ImageProcessor.process(@attributes['path'], config)
+        @attributes['original'] = image[:original]
+        @attributes['resized'] = image[:resized]
 
         image_template = @attributes['template'] || config['template']
 

data/lib/jekyll/responsive_image/utils.rb

@@ -1,7 +1,7 @@
 module Jekyll
   class ResponsiveImage
-    class Utils
-      def self.symbolize_keys(hash)
+    module Utils
+      def symbolize_keys(hash)
         result = {}
         hash.each_key do |key|
           result[key.to_sym] = hash[key]
@@ -10,7 +10,7 @@ module Jekyll
       end
 
       # Build a hash containing image information
-      def self.image_hash(path, width, height)
+      def image_hash(path, width, height)
         {
           'path'      => path,
           'basename'  => File.basename(path),

data/lib/jekyll/responsive_image/version.rb

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

data/lib/jekyll/responsive_image.rb

@@ -7,6 +7,7 @@ require 'rmagick'
 require 'jekyll/responsive_image/version'
 require 'jekyll/responsive_image/defaults'
 require 'jekyll/responsive_image/utils'
+require 'jekyll/responsive_image/image_processor'
 require 'jekyll/responsive_image/resize_handler'
 require 'jekyll/responsive_image/tag'
 require 'jekyll/responsive_image/block'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-responsive_image
 version: !ruby/object:Gem::Version
-  version: 0.11.0
+  version: 0.11.1
 platform: ruby
 authors:
 - Joseph Wynn
@@ -58,7 +58,7 @@ files:
 - features/fixtures/_includes/responsive-image.html
 - features/fixtures/assets/test.png
 - features/responsive-image-block.feature
-- features/responsive-image.feature
+- features/responsive-image-tag.feature
 - features/step_definitions/jekyll_steps.rb
 - features/support/env.rb
 - features/support/hooks.rb
@@ -67,6 +67,7 @@ files:
 - lib/jekyll/responsive_image.rb
 - lib/jekyll/responsive_image/block.rb
 - lib/jekyll/responsive_image/defaults.rb
+- lib/jekyll/responsive_image/image_processor.rb
 - lib/jekyll/responsive_image/resize_handler.rb
 - lib/jekyll/responsive_image/tag.rb
 - lib/jekyll/responsive_image/utils.rb