Add the `original` object to template variables

README.md

@@ -64,31 +64,29 @@ You will need to create a template in order to use the `responsive_image` tag. A
 
 ```html
 <img src="/{{ path }}"
-     alt="{{ alt }}"
+     srcset="
-     title="{{ title }}"
+      {% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}
-
+      /{{ original.path }} {{ original.width }}w
-     {% if resized %}
+     ">
-         srcset="{% for i in resized %}
-             /{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
-         {% endfor %}"
-     {% endif %}
->
 ```
 
-#### Template Variables
+### Template Variables
 
 The following variables are available in the template:
 
 | 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.                 |
+| `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.                             |
 
-Each element in the `resized` array contains the following properties:
+#### Image Objects
+
+Image objects (like `original` and each object in `resized`) contain the following properties:
 
 | Variable | Type     | Description              |
-|----------|----------|----------------------------------|
+|----------|----------|--------------------------|
-| `path`   | String   | The path of the resized image.   |
+| `path`   | String   | The path to the image.   |
-| `width`  | Integer  | The width of the resized image.  |
+| `width`  | Integer  | The width of the image.  |
-| `height` | Integer  | The height of the resized image. |
+| `height` | Integer  | The height of the image. |

features/fixtures/_includes/responsive-image.html

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

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
 

lib/jekyll/responsive_image.rb

@@ -18,40 +18,31 @@ module Jekyll
         end
       end
 
-      def resize_image(path, config)
+      def resize_image(img, 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|
+        config['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)
+          filename = resized_filename(img.filename, width, height)
-          newpath = "#{output_dir}/#{filename}"
+          filepath = "#{output_dir}/#{filename}"
 
           next unless needs_resizing?(img, width)
 
-          resized.push({
+          resized.push(image_hash(filepath, width, height))
-            'width'  => width,
-            'height' => height,
-            'path'   => newpath,
-          })
 
           # Don't resize images more than once
-          next if File.exists?(newpath)
+          next if File.exists?(filepath)
 
-          Jekyll.logger.info "Generating #{newpath}"
+          Jekyll.logger.info "Generating #{filepath}"
 
           i = img.scale(ratio)
-          i.write(newpath) do |f|
+          i.write(filepath) do |f|
             f.quality = size['quality'] || DEFAULT_QUALITY
           end
 
@@ -81,13 +72,24 @@ module Jekyll
         end
       end
 
+      # Build a hash containing image information
+      def image_hash(path, width, height)
+        {
+          'path'   => path,
+          'width'  => width,
+          'height' => height,
+        }
+      end
+
       def render(context)
         config = context.registers[:site].config['responsive_image']
         config['output_dir'] ||= 'assets/resized'
         config['sizes'] ||= []
 
+        img = Magick::Image::read(@attributes['path']).first
+        @attributes['original'] = image_hash(@attributes['path'], img.columns, img.rows)
+        @attributes['resized'] = resize_image(img, config)
         @attributes['template'] ||= config['template']
-        @attributes['resized'] = resize_image(@attributes['path'], config)
 
         partial = File.read(@attributes['template'])
         template = Liquid::Template.parse(partial)