diff --git a/README.md b/README.md index 76b57c3..a81d10c 100644 --- a/README.md +++ b/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 %} -{{ 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/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 0000000..1451c71 Binary files /dev/null and b/features/test-site/assets/exif-rotation.jpeg differ diff --git a/lib/jekyll-responsive-image/config.rb b/lib/jekyll-responsive-image/config.rb index 72592a2..fcaea4d 100644 --- a/lib/jekyll-responsive-image/config.rb +++ b/lib/jekyll-responsive-image/config.rb @@ -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) diff --git a/lib/jekyll-responsive-image/resize_handler.rb b/lib/jekyll-responsive-image/resize_handler.rb index 319e916..d1bb383 100644 --- a/lib/jekyll-responsive-image/resize_handler.rb +++ b/lib/jekyll-responsive-image/resize_handler.rb @@ -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| diff --git a/lib/jekyll-responsive-image/version.rb b/lib/jekyll-responsive-image/version.rb index 42d1f29..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.0'.freeze + VERSION = '1.2.0'.freeze end end