Modify `dirname` to be relative to `base_path`

README.md

@@ -45,12 +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 path of the file (assets/foo/some-file.jpg => assets/foo)
+  #   %{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)
@@ -163,12 +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                                                             |
-|-------------|---------|-------------------------------------------------------------------------|
-| `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`).       |
-| `dirname`   | String  | Directory name of the file (`assets/some/file.jpg` => `assets/some`).   |
-| `filename`  | String  | Basename without the extension (`assets/some-file.jpg` => `some-file`). |
-| `extension` | String  | Extension of the file (`assets/some-file.jpg` => `jpg`).                |
+| 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`).                            |
+| `dirname`   | String  | Directory of the file relative to `base_path` (`assets/sub/dir/some-file.jpg` => `sub/dir`). |
+| `filename`  | String  | Basename without the extension (`assets/some-file.jpg` => `some-file`).                      |
+| `extension` | String  | Extension of the file (`assets/some-file.jpg` => `jpg`).                                     |

features/image-generation.feature

@@ -19,7 +19,7 @@ Feature: Responsive image generation
     Given I have a responsive_image configuration with:
       """
         template: _includes/responsive-image.html
-        output_path_format: "%{dirname}/resized/%{filename}-%{width}.%{extension}"
+        output_path_format: assets/resized/%{dirname}/%{filename}-%{width}.%{extension}
         sizes:
           - width: 100
       """
@@ -32,4 +32,4 @@ Feature: Responsive image generation
 
     When I run Jekyll
     Then the file "assets/resized/test-100.png" should exist
-    And the file "assets/subdir/resized/test-100.png" should exist
+    And the file "assets/resized/subdir/test-100.png" should exist

features/responsive-image-tag.feature

@@ -69,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
       """

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)
-          resized.push(image_hash(filepath, width, height))
+          filepath = format_output_path(config['output_path_format'], config['base_path'], img.filename, 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/utils.rb

@@ -1,3 +1,5 @@
+require 'pathname'
+
 module Jekyll
   class ResponsiveImage
     module Utils
@@ -9,23 +11,31 @@ module Jekyll
         result
       end
 
-      def format_output_path(format, path, width, height)
-        params = symbolize_keys(image_hash(path, width, height))
-        format % params
+      def format_output_path(format, base_path, image_path, width, height)
+        params = symbolize_keys(image_hash(base_path, image_path, width, height))
+
+        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,
-          'dirname'   => File.dirname(path),
-          'basename'  => File.basename(path),
-          'filename'  => File.basename(path, '.*'),
-          'extension' => File.extname(path).delete('.'),
+          'path'      => image_path,
+          'dirname'   => relative_dirname(base_path, image_path),
+          'basename'  => File.basename(image_path),
+          '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