rotate resized images based on exif info

EXIF rotation information embedded by the capture device is now
respected when generating output images. Original images remain
untouched.
This commit is contained in:
jameswood 2017-03-10 16:03:03 +11:00
parent 0c342075c7
commit db264444ac
4 changed files with 30 additions and 7 deletions

View File

@ -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
respect_exif_rotation: 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>`

View File

@ -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' => [],
'respect_exif_rotation' => false
} }
def initialize(site) def initialize(site)

View File

@ -4,6 +4,7 @@ module Jekyll
include ResponsiveImage::Utils include ResponsiveImage::Utils
def resize_image(img, config) def resize_image(img, config)
img.auto_orient! if config['respect_exif_rotation']
resized = [] resized = []
config['sizes'].each do |size| config['sizes'].each do |size|

View File

@ -1,5 +1,5 @@
module Jekyll module Jekyll
module ResponsiveImage module ResponsiveImage
VERSION = '1.1.0'.freeze VERSION = '1.1.1'.freeze
end end
end end