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
|
||||
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]
|
||||
# The base directory where assets are stored. This is used to determine the
|
||||
# `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 %}
|
||||
{% 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>`
|
||||
|
|
|
@ -62,3 +62,31 @@ Feature: Responsive image generation
|
|||
When I run Jekyll
|
||||
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
|
||||
|
||||
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',
|
||||
'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
|
||||
'sizes' => [],
|
||||
'extra_images' => []
|
||||
'extra_images' => [],
|
||||
'auto_rotate' => false
|
||||
}
|
||||
|
||||
def initialize(site)
|
||||
|
|
|
@ -4,6 +4,8 @@ module Jekyll
|
|||
include ResponsiveImage::Utils
|
||||
|
||||
def resize_image(img, config)
|
||||
img.auto_orient! if config['auto_rotate']
|
||||
|
||||
resized = []
|
||||
|
||||
config['sizes'].each do |size|
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
module Jekyll
|
||||
module ResponsiveImage
|
||||
VERSION = '1.1.0'.freeze
|
||||
VERSION = '1.2.0'.freeze
|
||||
end
|
||||
end
|
||||
|
|
Loading…
Reference in New Issue