Add the `original` object to template variables
This commit is contained in:
parent
4b0c8c390f
commit
299927f1c3
32
README.md
32
README.md
|
@ -64,31 +64,29 @@ You will need to create a template in order to use the `responsive_image` tag. A
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<img src="/{{ path }}"
|
<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:
|
The following variables are available in the template:
|
||||||
|
|
||||||
| Variable | Type | Description |
|
| Variable | Type | Description |
|
||||||
|-----------|--------|------------------------------------------------------------------------------------------------------|
|
|----------- |--------|------------------------------------------------------------------------------------------------------|
|
||||||
| `path` | String | The path of the unmodified image. This is always the same as the `path` attribute passed to the tag. |
|
| `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. |
|
| `*` | 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 |
|
| 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. |
|
||||||
|
|
|
@ -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 %}>
|
|
||||||
|
|
|
@ -55,6 +55,7 @@ Feature: Jekyll responsive-image tag
|
||||||
Then I should see "<img alt=\"\" src=\"/assets/test.png\"" in "_site/index.html"
|
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-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/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-100x50.png" should exist
|
||||||
And the file "assets/resized/test-200x100.png" should exist
|
And the file "assets/resized/test-200x100.png" should exist
|
||||||
|
|
||||||
|
|
|
@ -18,40 +18,31 @@ module Jekyll
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def resize_image(path, config)
|
def resize_image(img, config)
|
||||||
sizes = config['sizes']
|
|
||||||
|
|
||||||
return if sizes.empty?
|
|
||||||
|
|
||||||
output_dir = config['output_dir']
|
output_dir = config['output_dir']
|
||||||
ensure_output_dir_exists!(output_dir)
|
ensure_output_dir_exists!(output_dir)
|
||||||
|
|
||||||
resized = []
|
resized = []
|
||||||
img = Magick::Image::read(path).first
|
|
||||||
|
|
||||||
sizes.each do |size|
|
config['sizes'].each do |size|
|
||||||
width = size['width']
|
width = size['width']
|
||||||
ratio = width.to_f / img.columns.to_f
|
ratio = width.to_f / img.columns.to_f
|
||||||
height = (img.rows.to_f * ratio).round
|
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)
|
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
|
# 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 = img.scale(ratio)
|
||||||
i.write(newpath) do |f|
|
i.write(filepath) do |f|
|
||||||
f.quality = size['quality'] || DEFAULT_QUALITY
|
f.quality = size['quality'] || DEFAULT_QUALITY
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -81,13 +72,24 @@ module Jekyll
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
# Build a hash containing image information
|
||||||
|
def image_hash(path, width, height)
|
||||||
|
{
|
||||||
|
'path' => path,
|
||||||
|
'width' => width,
|
||||||
|
'height' => height,
|
||||||
|
}
|
||||||
|
end
|
||||||
|
|
||||||
def render(context)
|
def render(context)
|
||||||
config = context.registers[:site].config['responsive_image']
|
config = context.registers[:site].config['responsive_image']
|
||||||
config['output_dir'] ||= 'assets/resized'
|
config['output_dir'] ||= 'assets/resized'
|
||||||
config['sizes'] ||= []
|
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['template'] ||= config['template']
|
||||||
@attributes['resized'] = resize_image(@attributes['path'], config)
|
|
||||||
|
|
||||||
partial = File.read(@attributes['template'])
|
partial = File.read(@attributes['template'])
|
||||||
template = Liquid::Template.parse(partial)
|
template = Liquid::Template.parse(partial)
|
||||||
|
|
Loading…
Reference in New Issue