From db264444ac9fcc394ebfa6c55a22fcff82187457 Mon Sep 17 00:00:00 2001 From: jameswood Date: Fri, 10 Mar 2017 16:03:03 +1100 Subject: [PATCH 1/5] 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. --- README.md | 23 ++++++++++++++++++- lib/jekyll-responsive-image/config.rb | 11 +++++---- lib/jekyll-responsive-image/resize_handler.rb | 1 + lib/jekyll-responsive-image/version.rb | 2 +- 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 76b57c3..c3b6db1 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,11 @@ responsive_image: - width: 800 - 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 + respect_exif_rotation: false # [Optional, Default: assets] # The base directory where assets are stored. This is used to determine the @@ -128,7 +133,23 @@ You will need to create a template in order to use the `responsive_image` tag. B {% endfor %} {% endcapture %} -{{ alt }} +{{ alt }} +``` + +#### 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 %} + +{{ alt }} ``` #### Responsive images with `` diff --git a/lib/jekyll-responsive-image/config.rb b/lib/jekyll-responsive-image/config.rb index 72592a2..863381c 100644 --- a/lib/jekyll-responsive-image/config.rb +++ b/lib/jekyll-responsive-image/config.rb @@ -2,11 +2,12 @@ module Jekyll module ResponsiveImage class Config DEFAULTS = { - 'default_quality' => 85, - 'base_path' => 'assets', - 'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}', - 'sizes' => [], - 'extra_images' => [] + 'default_quality' => 85, + 'base_path' => 'assets', + 'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}', + 'sizes' => [], + 'extra_images' => [], + 'respect_exif_rotation' => false } def initialize(site) diff --git a/lib/jekyll-responsive-image/resize_handler.rb b/lib/jekyll-responsive-image/resize_handler.rb index 319e916..35fbb68 100644 --- a/lib/jekyll-responsive-image/resize_handler.rb +++ b/lib/jekyll-responsive-image/resize_handler.rb @@ -4,6 +4,7 @@ module Jekyll include ResponsiveImage::Utils def resize_image(img, config) + img.auto_orient! if config['respect_exif_rotation'] resized = [] config['sizes'].each do |size| diff --git a/lib/jekyll-responsive-image/version.rb b/lib/jekyll-responsive-image/version.rb index 42d1f29..d7aaf3f 100644 --- a/lib/jekyll-responsive-image/version.rb +++ b/lib/jekyll-responsive-image/version.rb @@ -1,5 +1,5 @@ module Jekyll module ResponsiveImage - VERSION = '1.1.0'.freeze + VERSION = '1.1.1'.freeze end end From ffc51f648b93571d906627ff09b2de087017f1c7 Mon Sep 17 00:00:00 2001 From: Joseph Wynn Date: Sun, 12 Mar 2017 14:14:45 +0000 Subject: [PATCH 2/5] Rename auto rotate option to auto_rotate --- README.md | 6 +++--- lib/jekyll-responsive-image/resize_handler.rb | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c3b6db1..a81d10c 100644 --- a/README.md +++ b/README.md @@ -46,11 +46,11 @@ responsive_image: - width: 800 - 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 - respect_exif_rotation: false + auto_rotate: false # [Optional, Default: assets] # The base directory where assets are stored. This is used to determine the @@ -139,7 +139,7 @@ You will need to create a template in order to use the `responsive_image` tag. B #### 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 %} diff --git a/lib/jekyll-responsive-image/resize_handler.rb b/lib/jekyll-responsive-image/resize_handler.rb index 35fbb68..d1bb383 100644 --- a/lib/jekyll-responsive-image/resize_handler.rb +++ b/lib/jekyll-responsive-image/resize_handler.rb @@ -4,7 +4,8 @@ module Jekyll include ResponsiveImage::Utils def resize_image(img, config) - img.auto_orient! if config['respect_exif_rotation'] + img.auto_orient! if config['auto_rotate'] + resized = [] config['sizes'].each do |size| From 73bd82d547d79bec4241ea8ea8fa3c2afce0655e Mon Sep 17 00:00:00 2001 From: Joseph Wynn Date: Sun, 12 Mar 2017 14:14:53 +0000 Subject: [PATCH 3/5] Write tests for auto_rotate option --- features/image-generation.feature | 28 +++++++++++++++++++ features/test-site/assets/exif-rotation.jpeg | Bin 0 -> 5133 bytes 2 files changed, 28 insertions(+) create mode 100644 features/test-site/assets/exif-rotation.jpeg diff --git a/features/image-generation.feature b/features/image-generation.feature index 1b1eb23..618b76d 100644 --- a/features/image-generation.feature +++ b/features/image-generation.feature @@ -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 diff --git a/features/test-site/assets/exif-rotation.jpeg b/features/test-site/assets/exif-rotation.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..1451c71d3a1134e2d6c1fb352ea2b4ae2bec103d GIT binary patch literal 5133 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 H9!~xb(+3hc literal 0 HcmV?d00001 From 7ad3967c71f18f9742b88fbe4a867e6fa22fbfee Mon Sep 17 00:00:00 2001 From: Joseph Wynn Date: Sun, 12 Mar 2017 14:16:20 +0000 Subject: [PATCH 4/5] Minor version bump for new functionality --- lib/jekyll-responsive-image/version.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/jekyll-responsive-image/version.rb b/lib/jekyll-responsive-image/version.rb index d7aaf3f..07caf96 100644 --- a/lib/jekyll-responsive-image/version.rb +++ b/lib/jekyll-responsive-image/version.rb @@ -1,5 +1,5 @@ module Jekyll module ResponsiveImage - VERSION = '1.1.1'.freeze + VERSION = '1.2.0'.freeze end end From a23bdf58956e55b5fdfe62699236efbb5867696c Mon Sep 17 00:00:00 2001 From: Joseph Wynn Date: Mon, 13 Mar 2017 08:41:37 +0000 Subject: [PATCH 5/5] Fix auto_rotate name in Jekyll::ResponsiveImage::Config#DEFAULTS --- lib/jekyll-responsive-image/config.rb | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/jekyll-responsive-image/config.rb b/lib/jekyll-responsive-image/config.rb index 863381c..fcaea4d 100644 --- a/lib/jekyll-responsive-image/config.rb +++ b/lib/jekyll-responsive-image/config.rb @@ -2,12 +2,12 @@ module Jekyll module ResponsiveImage class Config DEFAULTS = { - 'default_quality' => 85, - 'base_path' => 'assets', - 'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}', - 'sizes' => [], - 'extra_images' => [], - 'respect_exif_rotation' => false + 'default_quality' => 85, + 'base_path' => 'assets', + 'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}', + 'sizes' => [], + 'extra_images' => [], + 'auto_rotate' => false } def initialize(site)