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
|
||||
<img src="/{{ path }}"
|
||||
alt="{{ alt }}"
|
||||
title="{{ title }}"
|
||||
|
||||
{% if resized %}
|
||||
srcset="{% for i in resized %}
|
||||
/{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
|
||||
{% endfor %}"
|
||||
{% endif %}
|
||||
>
|
||||
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. |
|
||||
| `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. |
|
||||
| `width` | Integer | The width of the resized image. |
|
||||
| `height` | Integer | The height of the resized image. |
|
||||
|----------|----------|--------------------------|
|
||||
| `path` | String | The path to the image. |
|
||||
| `width` | Integer | The width of the image. |
|
||||
| `height` | Integer | The height of the image. |
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<img alt="{{ alt }}" src="/{{ path }}" title="{{ title }}"{% if resized %} srcset="
|
||||
{% for i in resized %}
|
||||
/{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
|
||||
{% endfor %}
|
||||
"{% endif %}>
|
||||
<img alt="{{ alt }}" src="/{{ path }}" title="{{ title }}" srcset="
|
||||
{% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}
|
||||
/{{ original.path }} {{ original.width }}w
|
||||
">
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -18,40 +18,31 @@ module Jekyll
|
|||
end
|
||||
end
|
||||
|
||||
def resize_image(path, config)
|
||||
sizes = config['sizes']
|
||||
|
||||
return if sizes.empty?
|
||||
|
||||
def resize_image(img, config)
|
||||
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)
|
||||
newpath = "#{output_dir}/#{filename}"
|
||||
filename = resized_filename(img.filename, width, height)
|
||||
filepath = "#{output_dir}/#{filename}"
|
||||
|
||||
next unless needs_resizing?(img, width)
|
||||
|
||||
resized.push({
|
||||
'width' => 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)
|
||||
|
|
Loading…
Reference in New Issue