Merge pull request #55 from wildlyinaccurate/jameswood-exif-rotate
Rotate resized images based on EXIF data
This commit is contained in:
commit
3e4fac4132
23
README.md
23
README.md
|
@ -47,6 +47,11 @@ responsive_image:
|
||||||
- width: 1400
|
- width: 1400
|
||||||
quality: 90
|
quality: 90
|
||||||
|
|
||||||
|
# [Optional, Default: false]
|
||||||
|
# Rotate resized images depending on their EXIF rotation attribute. Useful for
|
||||||
|
# working with JPGs directly from digital cameras and smartphones
|
||||||
|
auto_rotate: false
|
||||||
|
|
||||||
# [Optional, Default: assets]
|
# [Optional, Default: assets]
|
||||||
# The base directory where assets are stored. This is used to determine the
|
# The base directory where assets are stored. This is used to determine the
|
||||||
# `dirname` value in `output_path_format` below.
|
# `dirname` value in `output_path_format` below.
|
||||||
|
@ -128,7 +133,23 @@ You will need to create a template in order to use the `responsive_image` tag. B
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<img src="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
|
<img src="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }}">
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Responsive image with `srcset` where the largest resized image is the default
|
||||||
|
|
||||||
|
> **Note:** This is useful if you don't want your originals to appear on your site. For example, if you're uploading full-res images directly from a device.
|
||||||
|
|
||||||
|
```twig
|
||||||
|
{% capture srcset %}
|
||||||
|
{% for i in resized %}
|
||||||
|
/{{ i.path }} {{ i.width }}w,
|
||||||
|
{% endfor %}
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% assign largest = resized | sort: 'width' | last %}
|
||||||
|
|
||||||
|
<img src="/{{ largest.path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }}">
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Responsive images with `<picture>`
|
#### Responsive images with `<picture>`
|
||||||
|
|
|
@ -62,3 +62,31 @@ Feature: Responsive image generation
|
||||||
When I run Jekyll
|
When I run Jekyll
|
||||||
Then the image "my-site-copy/src/assets/resized/subdir/100/test.png" should have the dimensions "100x50"
|
Then the image "my-site-copy/src/assets/resized/subdir/100/test.png" should have the dimensions "100x50"
|
||||||
And the file "_site/assets/resized/subdir/100/test.png" should exist
|
And the file "_site/assets/resized/subdir/100/test.png" should exist
|
||||||
|
|
||||||
|
Scenario: Images can be auto-rotated based on EXIF rotation
|
||||||
|
Given I have a responsive_image configuration with:
|
||||||
|
"""
|
||||||
|
template: _includes/responsive-image.html
|
||||||
|
sizes:
|
||||||
|
- width: 100
|
||||||
|
auto_rotate: true
|
||||||
|
"""
|
||||||
|
And I have a file "index.html" with "{% responsive_image path: assets/exif-rotation.jpeg %}"
|
||||||
|
When I run Jekyll
|
||||||
|
Then the file "_site/assets/resized/exif-rotation-100x200.jpeg" should exist
|
||||||
|
|
||||||
|
Scenario: Images aren't auto-rotated by default
|
||||||
|
Given I have a responsive_image configuration with:
|
||||||
|
"""
|
||||||
|
template: _includes/responsive-image.html
|
||||||
|
sizes:
|
||||||
|
- width: 100
|
||||||
|
"""
|
||||||
|
And I have a file "index.html" with:
|
||||||
|
"""
|
||||||
|
{% responsive_image path: assets/exif-rotation.jpeg %}
|
||||||
|
{% responsive_image path: assets/progressive.jpeg %}
|
||||||
|
"""
|
||||||
|
When I run Jekyll
|
||||||
|
Then the file "_site/assets/resized/exif-rotation-100x50.jpeg" should exist
|
||||||
|
Then the file "_site/assets/resized/progressive-100x50.jpeg" should exist
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 5.0 KiB |
|
@ -6,7 +6,8 @@ module Jekyll
|
||||||
'base_path' => 'assets',
|
'base_path' => 'assets',
|
||||||
'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
|
'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
|
||||||
'sizes' => [],
|
'sizes' => [],
|
||||||
'extra_images' => []
|
'extra_images' => [],
|
||||||
|
'auto_rotate' => false
|
||||||
}
|
}
|
||||||
|
|
||||||
def initialize(site)
|
def initialize(site)
|
||||||
|
|
|
@ -4,6 +4,8 @@ module Jekyll
|
||||||
include ResponsiveImage::Utils
|
include ResponsiveImage::Utils
|
||||||
|
|
||||||
def resize_image(img, config)
|
def resize_image(img, config)
|
||||||
|
img.auto_orient! if config['auto_rotate']
|
||||||
|
|
||||||
resized = []
|
resized = []
|
||||||
|
|
||||||
config['sizes'].each do |size|
|
config['sizes'].each do |size|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
module Jekyll
|
module Jekyll
|
||||||
module ResponsiveImage
|
module ResponsiveImage
|
||||||
VERSION = '1.1.0'.freeze
|
VERSION = '1.2.0'.freeze
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in New Issue