diff --git a/README.md b/README.md
index 01dbe19..2873f2d 100644
--- a/README.md
+++ b/README.md
@@ -64,31 +64,29 @@ You will need to create a template in order to use the `responsive_image` tag. A
```html
+ srcset="
+ {% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}
+ /{{ original.path }} {{ original.width }}w
+ ">
```
-#### 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. |
-| `*` | String | Any other attributes will be passed to the template verbatim as strings. |
+| 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 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
-| Variable | Type | Description |
-|----------|----------|----------------------------------|
-| `path` | String | The path of the resized image. |
-| `width` | Integer | The width of the resized image. |
-| `height` | Integer | The height of the resized image. |
+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. |
diff --git a/features/fixtures/_includes/responsive-image.html b/features/fixtures/_includes/responsive-image.html
index 4b55472..414d7f2 100644
--- a/features/fixtures/_includes/responsive-image.html
+++ b/features/fixtures/_includes/responsive-image.html
@@ -1,5 +1,4 @@
-
+
diff --git a/features/responsive-image.feature b/features/responsive-image.feature
index 042caa3..e509860 100644
--- a/features/responsive-image.feature
+++ b/features/responsive-image.feature
@@ -55,6 +55,7 @@ Feature: Jekyll responsive-image tag
Then I should see " width,
- 'height' => height,
- 'path' => newpath,
- })
+ resized.push(image_hash(filepath, width, height))
# 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)