Merge pull request #55 from wildlyinaccurate/jameswood-exif-rotate

Rotate resized images based on EXIF data

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>`

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

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)

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|

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