v0.14.0

Add `dirname` to image hashes

.travis.yml

@@ -1,9 +1,11 @@
+sudo: false
 language: ruby
 bundler_args: --without debug
+before_script: bundle exec jekyll --version
 script: bundle exec rake features_with_coveralls
 rvm:
-  - 2.2.0
+  - 2.2
-  - 2.1.0
+  - 2.1
-  - 2.0.0
+  - 2.0
-  - 1.9.3
+  - 1.9
-  - rbx-2
+  - rbx

README.md

@@ -45,11 +45,17 @@ responsive_image:
     - width: 1400
       quality: 90
 
+  # [Optional, Default: assets]
+  # The base directory where assets are stored. This is used to determine the
+  # `dirname` value in `output_path_format` below.
+  base_path: assets
+
   # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
   # The template used when generating filenames for resized images. Must be a
   # relative path.
   #
   # Parameters available are:
+  #   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
   #   %{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)
@@ -83,7 +89,7 @@ Any extra attributes will be passed straight to the template as variables.
 
 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!
+> **Important!** The attributes in the `responsive_image_block` tag are parsed as YAML, so whitespace and indentation are significant!
 
 ```twig
 {% assign path = 'assets/test.png' %}
@@ -127,7 +133,7 @@ You will need to create a template in order to use the `responsive_image` tag. B
 
 #### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
 
-> This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
+> **Note:** This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
 
 ```twig
 {% assign smallest = resized | sort: 'width' | first %}
@@ -162,11 +168,12 @@ The following variables are available in the template:
 
 Image objects (like `original` and each object in `resized`) contain the following properties:
 
-| Variable    | Type    | Description                                                             |
+| Variable    | Type    | Description                                                                                  |
-|-------------|---------|-------------------------------------------------------------------------|
+|-------------|---------|----------------------------------------------------------------------------------------------|
-| `path`      | String  | The path to the image.                                                  |
+| `path`      | String  | The path to the image.                                                                       |
-| `width`     | Integer | The width of the image.                                                 |
+| `width`     | Integer | The width of the image.                                                                      |
-| `height`    | Integer | The height of the image.                                                |
+| `height`    | Integer | The height of the image.                                                                     |
-| `basename`  | String  | Basename of the file (`assets/some-file.jpg` => `some-file.jpg`).       |
+| `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`). |
+| `dirname`   | String  | Directory of the file relative to `base_path` (`assets/sub/dir/some-file.jpg` => `sub/dir`). |
-| `extension` | String  | Extension of the file (`assets/some-file.jpg` => `jpg`).                |
+| `filename`  | String  | Basename without the extension (`assets/some-file.jpg` => `some-file`).                      |
+| `extension` | String  | Extension of the file (`assets/some-file.jpg` => `jpg`).                                     |

features/fixtures/_includes/base-url.html

@@ -0,0 +1 @@
+<img src="{{ site.baseurl }}/{{ path }}">

features/image-generation.feature

@@ -0,0 +1,35 @@
+Feature: Responsive image generation
+  As a Jekyll user
+  I want to generate responsive images
+  In order to use them on my pages
+
+  Scenario: Resizing images
+    Given I have a responsive_image configuration with:
+      """
+        template: _includes/responsive-image.html
+        sizes:
+          - width: 100
+      """
+
+    And I have a file "index.html" with "{% responsive_image path: assets/test.png alt: Foobar %}"
+    When I run Jekyll
+    Then the image "assets/resized/test-100x50.png" should have the dimensions "100x50"
+
+  Scenario: Handling subdirectories
+    Given I have a responsive_image configuration with:
+      """
+        template: _includes/responsive-image.html
+        output_path_format: assets/resized/%{dirname}/%{filename}-%{width}.%{extension}
+        sizes:
+          - width: 100
+      """
+
+    And I have a file "index.html" with:
+      """
+        {% responsive_image path: assets/test.png %}
+        {% responsive_image path: assets/subdir/test.png %}
+      """
+
+    When I run Jekyll
+    Then the file "assets/resized/test-100.png" should exist
+    And the file "assets/resized/subdir/test-100.png" should exist

features/responsive-image-block.feature

@@ -19,6 +19,22 @@ Feature: Jekyll responsive_image_block tag
     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: Global variables available in templates
+    Given I have a file "index.html" with:
+      """
+      {% responsive_image_block %}
+          path: assets/test.png
+      {% endresponsive_image_block %}
+      """
+    And I have a configuration with:
+      """
+        baseurl: https://wildlyinaccurate.com
+        responsive_image:
+          template: _includes/base-url.html
+      """
+    When I run Jekyll
+    Then I should see "<img src=\"https://wildlyinaccurate.com/assets/test.png\">" 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:

features/responsive-image-tag.feature

@@ -9,6 +9,17 @@ Feature: Jekyll responsive_image tag
     When I run Jekyll
     Then I should see "<img alt=\"Foobar\" src=\"/assets/test.png\"" in "_site/index.html"
 
+  Scenario: Global variables available in templates
+    Given I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
+    And I have a configuration with:
+      """
+        baseurl: https://wildlyinaccurate.com
+        responsive_image:
+          template: _includes/base-url.html
+      """
+    When I run Jekyll
+    Then I should see "<img src=\"https://wildlyinaccurate.com/assets/test.png\">" in "_site/index.html"
+
   Scenario: Adding custom attributes
     Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
     And I have a file "index.html" with:
@@ -58,7 +69,7 @@ Feature: Jekyll responsive_image tag
     Given I have a responsive_image configuration with:
       """
         template: _includes/responsive-image.html
-        output_path_format: assets/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
+        output_path_format: assets/%{dirname}/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
         sizes:
           - width: 100
       """

features/step_definitions/jekyll_steps.rb

@@ -8,6 +8,10 @@ Then /^Jekyll should throw a "(.+)"$/ do |error_class|
   assert_raise(Object.const_get(error_class)) { run_jekyll }
 end
 
+Given /^I have a configuration with:$/ do |config|
+  write_file('_config.yml', config)
+end
+
 Given /^I have a responsive_image configuration with:$/ do |config|
   write_file('_config.yml', "responsive_image:\n#{config}")
 end
@@ -32,6 +36,12 @@ Then /^the file "(.+)" should exist$/ do |path|
   assert File.exists?(path)
 end
 
+Then /^the image "(.+)" should have the dimensions "(\d+)x(\d+)"$/ do |path, width, height|
+  img = Magick::Image::read(path).first
+  assert_equal "#{width}x#{height}", "#{img.columns}x#{img.rows}"
+  img.destroy!
+end
+
 def write_file(path, contents)
   File.open(path, 'w') do |f|
     f.write(contents)

jekyll-responsive_image.gemspec

@@ -29,5 +29,5 @@ Gem::Specification.new do |spec|
   end
 
   spec.add_runtime_dependency 'jekyll', ['>= 2.0', "< #{max_jekyll_version}"]
-  spec.add_runtime_dependency 'rmagick'
+  spec.add_runtime_dependency 'rmagick', ['>= 2.0', '< 3.0']
 end

lib/jekyll/responsive_image/block.rb

@@ -4,7 +4,8 @@ module Jekyll
       include Jekyll::ResponsiveImage::Common
 
       def render(context)
-        config = make_config(context.registers[:site])
+        site = context.registers[:site]
+        config = make_config(site)
 
         attributes = YAML.load(super)
         image_template = attributes['template'] || config['template']
@@ -16,7 +17,7 @@ module Jekyll
         partial = File.read(image_template)
         template = Liquid::Template.parse(partial)
 
-        template.render!(attributes)
+        template.render!(attributes.merge(site.site_payload))
       end
     end
   end

lib/jekyll/responsive_image/common.rb

@@ -7,7 +7,9 @@ module Jekyll
         config = ResponsiveImage.defaults.dup.merge(site.config['responsive_image']).merge(:site_dest => site.dest)
 
         # Not very nice, but this is needed to create a clean path to add to keep_files
-        output_dir = format_output_path(config['output_path_format'], '*', '*', '*')
+        output_dir = format_output_path(config['output_path_format'], config['base_path'], '*', '*', '*')
+        output_dir = "#{File.dirname(output_dir)}/*"
+
         site.config['keep_files'] << output_dir unless site.config['keep_files'].include?(output_dir)
 
         config

lib/jekyll/responsive_image/defaults.rb

@@ -2,6 +2,7 @@ module Jekyll
   class ResponsiveImage
     @defaults = {
       'default_quality'    => 85,
+      'base_path'          => 'assets',
       'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
       'sizes'              => [],
     }.freeze

lib/jekyll/responsive_image/image_processor.rb

@@ -10,7 +10,7 @@ module Jekyll
         img = Magick::Image::read(image_path).first
 
         {
-          original: image_hash(image_path, img.columns, img.rows),
+          original: image_hash(config['base_path'], image_path, img.columns, img.rows),
           resized: resize_handler.resize_image(img, config),
         }
       end

lib/jekyll/responsive_image/resize_handler.rb

@@ -13,8 +13,8 @@ module Jekyll
 
           next unless needs_resizing?(img, width)
 
-          filepath = format_output_path(config['output_path_format'], img.filename, width, height)
+          filepath = format_output_path(config['output_path_format'], config['base_path'], img.filename, width, height)
-          resized.push(image_hash(filepath, width, height))
+          resized.push(image_hash(config['base_path'], filepath, width, height))
 
           # Don't resize images more than once
           next if File.exists?(filepath)

lib/jekyll/responsive_image/tag.rb

@@ -15,7 +15,8 @@ module Jekyll
       end
 
       def render(context)
-        config = make_config(context.registers[:site])
+        site = context.registers[:site]
+        config = make_config(site)
 
         image = ImageProcessor.process(@attributes['path'], config)
         @attributes['original'] = image[:original]
@@ -26,7 +27,7 @@ module Jekyll
         partial = File.read(image_template)
         template = Liquid::Template.parse(partial)
 
-        template.render!(@attributes)
+        template.render!(@attributes.merge(site.site_payload))
       end
     end
   end

lib/jekyll/responsive_image/utils.rb

@@ -1,3 +1,5 @@
+require 'pathname'
+
 module Jekyll
   class ResponsiveImage
     module Utils
@@ -9,22 +11,31 @@ module Jekyll
         result
       end
 
-      def format_output_path(format, path, width, height)
+      def format_output_path(format, base_path, image_path, width, height)
-        params = symbolize_keys(image_hash(path, width, height))
+        params = symbolize_keys(image_hash(base_path, image_path, width, height))
-        format % params
+
+        Pathname.new(format % params).cleanpath.to_s
       end
 
       # Build a hash containing image information
-      def image_hash(path, width, height)
+      def image_hash(base_path, image_path, width, height)
         {
-          'path'      => path,
+          'path'      => image_path,
-          'basename'  => File.basename(path),
+          'dirname'   => relative_dirname(base_path, image_path),
-          'filename'  => File.basename(path, '.*'),
+          'basename'  => File.basename(image_path),
-          'extension' => File.extname(path).delete('.'),
+          'filename'  => File.basename(image_path, '.*'),
+          'extension' => File.extname(image_path).delete('.'),
           'width'     => width,
           'height'    => height,
         }
       end
+
+      def relative_dirname(base_path, image_path)
+        path = Pathname.new(image_path).expand_path
+        base = Pathname.new(base_path).expand_path
+
+        path.relative_path_from(base).dirname.to_s.delete('.')
+      end
     end
   end
 end

lib/jekyll/responsive_image/version.rb

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