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 {{ alt }} + 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 @@ -{{ alt }} +{{ alt }} 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)