mirror of
https://github.com/wildlyinaccurate/jekyll-responsive-image.git
synced 2025-07-04 00:00:41 -04:00
Compare commits
9 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
296ff67a48 | ||
|
80eca76d57 | ||
|
344b21142b | ||
|
37a267c3ac | ||
|
b611cf424d | ||
|
56181bc4c9 | ||
|
1cf136091a | ||
|
438bb264d1 | ||
|
0cc608031e |
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
features/test-site/* linguist-vendored
|
@ -1,9 +1,12 @@
|
|||||||
sudo: false
|
sudo: false
|
||||||
|
dist: trusty
|
||||||
language: ruby
|
language: ruby
|
||||||
bundler_args: --without debug
|
bundler_args: --without debug
|
||||||
before_script: bundle exec jekyll --version
|
before_script: bundle exec jekyll --version
|
||||||
script: bundle exec rake features_with_coveralls
|
script: bundle exec rake features_with_coveralls
|
||||||
rvm:
|
rvm:
|
||||||
- 2.2
|
- '2.4'
|
||||||
- 2.1
|
- '2.3'
|
||||||
- 2.0
|
- '2.2'
|
||||||
|
- '2.1'
|
||||||
|
- '2.0'
|
||||||
|
4
Gemfile
4
Gemfile
@ -4,8 +4,8 @@ gemspec
|
|||||||
|
|
||||||
group :development do
|
group :development do
|
||||||
gem 'rake'
|
gem 'rake'
|
||||||
gem 'cucumber', '~> 2.1'
|
gem 'cucumber', '~> 2.4'
|
||||||
gem 'test-unit', '~> 3.1'
|
gem 'test-unit', '~> 3.2'
|
||||||
|
|
||||||
gem 'simplecov', :require => false
|
gem 'simplecov', :require => false
|
||||||
gem 'coveralls', :require => false
|
gem 'coveralls', :require => false
|
||||||
|
23
README.md
23
README.md
@ -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
|
||||||
|
auto_rotate: 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>`
|
||||||
|
@ -62,3 +62,31 @@ Feature: Responsive image generation
|
|||||||
When I run Jekyll
|
When I run Jekyll
|
||||||
Then the image "my-site-copy/src/assets/resized/subdir/100/test.png" should have the dimensions "100x50"
|
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
|
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
|
||||||
|
BIN
features/test-site/assets/exif-rotation.jpeg
Normal file
BIN
features/test-site/assets/exif-rotation.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.0 KiB |
@ -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' => [],
|
||||||
|
'auto_rotate' => false
|
||||||
}
|
}
|
||||||
|
|
||||||
def initialize(site)
|
def initialize(site)
|
||||||
|
@ -4,6 +4,8 @@ module Jekyll
|
|||||||
include ResponsiveImage::Utils
|
include ResponsiveImage::Utils
|
||||||
|
|
||||||
def resize_image(img, config)
|
def resize_image(img, config)
|
||||||
|
img.auto_orient! if config['auto_rotate']
|
||||||
|
|
||||||
resized = []
|
resized = []
|
||||||
|
|
||||||
config['sizes'].each do |size|
|
config['sizes'].each do |size|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
module Jekyll
|
module Jekyll
|
||||||
module ResponsiveImage
|
module ResponsiveImage
|
||||||
VERSION = '1.1.0'.freeze
|
VERSION = '1.2.0'.freeze
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
Loading…
x
Reference in New Issue
Block a user