jekyll-responsive_image 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ed00bfad560bc67b74bd57aeae4cf8245a3584ec
-  data.tar.gz: 4f9315a2ac66b01e024b1c650783e864ff712b65
+  metadata.gz: 1e7197c871c2395b35ba1521d0e096e81216b0d9
+  data.tar.gz: 8677468d6e5251e720703e48bc7dc481034eedec
 SHA512:
-  metadata.gz: 1951e99caf0c73b6716810dfa26043085f9b3aa522f3a393c5963ab85cd613bb5657ebb23c3af0a056a951200536e6af4a5c0b9c3a561d83f26d27a488da663f
-  data.tar.gz: 39505e832aad11402d47a1f4d617a6dca827e19104652a359f846f838b55f2c1b0891776ac663054e449383ddaa7977f966e5ddfd89f5824c178a3354ce98185
+  metadata.gz: 6ac5b13caf07f0da51e9ff6f178f2c0aec17f86524c1df04ec586c9812eaff8203af1b153cd2c40ccb49559442b95ea86cbff51fad4affe54a828ef41ed9ccfb
+  data.tar.gz: bc3e2951c10dd05d2a224932de713e90f34be9e2f2050c33f69fd0845f612ec60f6008b7dba139cdecdc93a90de99f798b5a97c45bf47fe225624536a7238f3e

data/README.md

@@ -78,6 +78,25 @@ Any extra attributes will be passed straight to the template as variables.
 {% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}
 ```
 
+### Liquid variables as attributes
+
+You can use Liquid variables as attributes with the `responsive_image_block` tag. This tag works in exactly the same way as the `responsive_image` tag, but is implemented as a block tag to allow for more complex logic.
+
+> **Important!** The attributes in the `responsive_image_block` tag are parsed as YAML, so whitespace and indentation are important!
+
+```
+{% assign path = 'assets/test.png' %}
+{% assign alt = 'Lorem ipsum...' %}
+
+{% responsive_image_block %}
+    path: {{ path }}
+    alt: {{ alt }}
+    {% if title %}
+    title: {{ title }}
+    {% endif %}
+{% endresponsive_image_block %}
+```
+
 ### Template
 
 You will need to create a template in order to use the `responsive_image` tag. Below are some sample templates to get you started.

data/features/responsive-image-block.feature

@@ -0,0 +1,40 @@
+Feature: Jekyll responsive_image_block tag
+  As a Jekyll template developer
+  I want to include Liquid variables when rendering my responsive images
+  In order to dynamically generate my responsive images
+
+  Scenario: Simple image tag
+    Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
+    And I have a file "index.html" with:
+      """
+      {% assign path = 'assets/test.png' %}
+      {% assign alt = 'Lorem ipsum' %}
+
+      {% responsive_image_block %}
+          path: {{ path }}
+          title: Magic rainbow adventure!
+          alt: {{ alt }}
+      {% endresponsive_image_block %}
+      """
+    When I run Jekyll
+    Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\" title=\"Magic rainbow adventure!\"" in "_site/index.html"
+
+  Scenario: More complex logic in the block tag
+    Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
+    And I have a file "index.html" with:
+      """
+      {% assign path = 'assets/test.png' %}
+      {% assign alt = 'Lorem ipsum' %}
+
+      {% responsive_image_block %}
+          path: {{ path }}
+
+          {% if another_alt %}
+          alt: {{ another_alt }}
+          {% else %}
+          alt: {{ alt }}
+          {% endif %}
+      {% endresponsive_image_block %}
+      """
+    When I run Jekyll
+    Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\"" in "_site/index.html"

data/features/responsive-image.feature

@@ -1,41 +1,26 @@
-Feature: Jekyll responsive-image tag
+Feature: Jekyll responsive_image tag
   As a Jekyll template developer
   I want to include responsive images in my page
   In order to best cater for devices of all sizes
 
   Scenario: Simple image tag
-    Given I have a responsive_image configuration with:
-      """
-        template: _includes/responsive-image.html
-      """
-    And I have a file "index.html" with:
-      """
-      {% responsive_image path: assets/test.png alt: Foobar %}
-      """
+    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 path: assets/test.png alt: Foobar %}"
     When I run Jekyll
     Then I should see "<img alt=\"Foobar\" src=\"/assets/test.png\"" in "_site/index.html"
 
   Scenario: Adding custom attributes
-    Given I have a responsive_image configuration with:
-      """
-        template: _includes/responsive-image.html
-      """
+    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 path: assets/test.png alt: Foobar title: "Lorem Ipsum" %}
+      {% responsive_image path: assets/test.png alt: 'Foobar bazbar' title: "Lorem Ipsum" %}
       """
     When I run Jekyll
-    Then I should see "<img alt=\"Foobar\" src=\"/assets/test.png\" title=\"Lorem Ipsum\"" in "_site/index.html"
+    Then I should see "<img alt=\"Foobar bazbar\" src=\"/assets/test.png\" title=\"Lorem Ipsum\"" in "_site/index.html"
 
   Scenario: UTF-8 attributes
-    Given I have a responsive_image configuration with:
-      """
-        template: _includes/responsive-image.html
-      """
-    And I have a file "index.html" with:
-      """
-      {% responsive_image path: assets/test.png alt: "かっこいい！ ジェケルが好きです！" %}
-      """
+    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 path: assets/test.png alt: 'かっこいい！ ジェケルが好きです！' %}"
     When I run Jekyll
     Then I should see "<img alt=\"かっこいい！ ジェケルが好きです！\" src=\"/assets/test.png\"" in "_site/index.html"
 
@@ -47,10 +32,7 @@ Feature: Jekyll responsive-image tag
           - width: 100
           - width: 200
       """
-    And I have a file "index.html" with:
-      """
-      {% responsive_image path: assets/test.png %}
-      """
+    And I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
     When I run Jekyll
     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"
@@ -68,10 +50,7 @@ Feature: Jekyll responsive-image tag
           - width: 200
           - width: 300
       """
-    And I have a file "index.html" with:
-      """
-      {% responsive_image path: assets/test.png template: _includes/custom-template.html %}
-      """
+    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 "[100, 200, 300]" in "_site/index.html"
 
@@ -83,10 +62,7 @@ Feature: Jekyll responsive-image tag
         sizes:
           - width: 100
       """
-    And I have a file "index.html" with:
-      """
-      {% responsive_image path: assets/test.png %}
-      """
+    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/features/step_definitions/jekyll_steps.rb

@@ -6,10 +6,18 @@ Given /^I have a responsive_image configuration with:$/ do |config|
   write_file('_config.yml', "responsive_image:\n#{config}")
 end
 
+Given /^I have a responsive_image configuration with "(.+)" set to "(.+)"$/ do |config, value|
+  write_file('_config.yml', "responsive_image:\n  #{config}: #{value}")
+end
+
 Given /^I have a file "(.+)" with:$/ do |path, contents|
   write_file(path, "---\n---\n#{contents}")
 end
 
+Given /^I have a file "(.+)" with "(.+)"$/ do |path, contents|
+  write_file(path, "---\n---\n#{contents}")
+end
+
 Then /^I should see "(.+)" in "(.*)"$/ do |text, file|
   assert_match(Regexp.new(text), File.open(file).readlines.join)
 end

data/lib/jekyll/responsive_image.rb

@@ -1,4 +1,5 @@
 require 'fileutils'
+require 'yaml'
 
 require 'jekyll'
 require 'rmagick'
@@ -6,6 +7,9 @@ require 'rmagick'
 require 'jekyll/responsive_image/version'
 require 'jekyll/responsive_image/defaults'
 require 'jekyll/responsive_image/utils'
+require 'jekyll/responsive_image/resize_handler'
 require 'jekyll/responsive_image/tag'
+require 'jekyll/responsive_image/block'
 
 Liquid::Template.register_tag('responsive_image', Jekyll::ResponsiveImage::Tag)
+Liquid::Template.register_tag('responsive_image_block', Jekyll::ResponsiveImage::Block)

data/lib/jekyll/responsive_image/block.rb

@@ -0,0 +1,23 @@
+module Jekyll
+  class ResponsiveImage
+    class Block < Liquid::Block
+      def render(context)
+        config = ResponsiveImage.defaults.dup
+        config.merge!(context.registers[:site].config['responsive_image'])
+
+        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)
+
+        partial = File.read(image_template)
+        template = Liquid::Template.parse(partial)
+
+        template.render!(attributes)
+      end
+    end
+  end
+end

data/lib/jekyll/responsive_image/resize_handler.rb

@@ -0,0 +1,52 @@
+module Jekyll
+  class ResponsiveImage
+    class ResizeHandler
+      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(Utils.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(Utils.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
+    end
+  end
+end

data/lib/jekyll/responsive_image/tag.rb

@@ -12,72 +12,14 @@ module Jekyll
         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'])
 
+        resize_handler = ResizeHandler.new
         img = Magick::Image::read(@attributes['path']).first
-        @attributes['original'] = image_hash(@attributes['path'], img.columns, img.rows)
-        @attributes['resized'] = resize_image(img, config)
+        @attributes['original'] = Utils.image_hash(@attributes['path'], img.columns, img.rows)
+        @attributes['resized'] = resize_handler.resize_image(img, config)
 
         image_template = @attributes['template'] || config['template']
 

data/lib/jekyll/responsive_image/utils.rb

@@ -8,6 +8,18 @@ module Jekyll
         end
         result
       end
+
+      # Build a hash containing image information
+      def self.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
     end
   end
 end

data/lib/jekyll/responsive_image/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-responsive_image
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.11.0
 platform: ruby
 authors:
 - Joseph Wynn
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-06 00:00:00.000000000 Z
+date: 2014-12-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -57,6 +57,7 @@ files:
 - features/fixtures/_includes/custom-template.html
 - features/fixtures/_includes/responsive-image.html
 - features/fixtures/assets/test.png
+- features/responsive-image-block.feature
 - features/responsive-image.feature
 - features/step_definitions/jekyll_steps.rb
 - features/support/env.rb
@@ -64,7 +65,9 @@ files:
 - index.html
 - jekyll-responsive_image.gemspec
 - lib/jekyll/responsive_image.rb
+- lib/jekyll/responsive_image/block.rb
 - lib/jekyll/responsive_image/defaults.rb
+- lib/jekyll/responsive_image/resize_handler.rb
 - lib/jekyll/responsive_image/tag.rb
 - lib/jekyll/responsive_image/utils.rb
 - lib/jekyll/responsive_image/version.rb