jekyll-responsive_image 0.17.0 → 0.18.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/jekyll/responsive_image/resize_handler.rb +2 -1
- data/lib/jekyll/responsive_image/version.rb +1 -1
- metadata +14 -46
- data/.coveralls.yml +0 -1
- data/.gitignore +0 -3
- data/.travis.yml +0 -11
- data/Gemfile +0 -10
- data/LICENSE +0 -21
- data/README.md +0 -187
- data/Rakefile +0 -28
- data/features/extra-image-generation.feature +0 -43
- data/features/fixtures/_includes/base-url.html +0 -1
- data/features/fixtures/_includes/custom-template.html +0 -1
- data/features/fixtures/_includes/responsive-image.html +0 -4
- data/features/fixtures/assets/subdir/test.png +0 -0
- data/features/fixtures/assets/test.png +0 -0
- data/features/image-generation.feature +0 -36
- data/features/responsive-image-block.feature +0 -66
- data/features/responsive-image-tag.feature +0 -79
- data/features/step_definitions/jekyll_steps.rb +0 -54
- data/features/support/env.rb +0 -19
- data/features/support/hooks.rb +0 -13
- data/jekyll-responsive_image.gemspec +0 -33
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 662862471c2e0e1b2b48d91dc8fc67eaafe18788
|
|
4
|
+
data.tar.gz: aa73b3d89812798ce573bce3cd6ee8ec760e5874
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e723ddcb6bc6aad03adb71de1c6c699f3f38cb5757b3dd36b9b8b6b10f860b1bb564ec10c08aa1622e44fe6cf107d0ef3b54482cd3c2649cbe4294b09c5cb8c9
|
|
7
|
+
data.tar.gz: 10abe87130f9cd74f36349da4ce9fc5c31a758b078624e8accc6e68f794d42f0813d1045c77b0c6f313f749afb189703c7d5115a91b8c56d612f8af29b793d37
|
|
@@ -13,7 +13,8 @@ module Jekyll
|
|
|
13
13
|
|
|
14
14
|
next unless needs_resizing?(img, width)
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
image_path = img.filename.force_encoding(Encoding::UTF_8)
|
|
17
|
+
filepath = format_output_path(config['output_path_format'], config['base_path'], image_path, width, height)
|
|
17
18
|
resized.push(image_hash(config['base_path'], filepath, width, height))
|
|
18
19
|
|
|
19
20
|
# Don't resize images more than once
|
metadata
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-responsive_image
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.18.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Joseph Wynn
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-
|
|
11
|
+
date: 2016-09-02 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
|
16
16
|
requirements:
|
|
17
|
-
- -
|
|
17
|
+
- - '>='
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
19
|
version: '2.0'
|
|
20
|
-
- -
|
|
20
|
+
- - <
|
|
21
21
|
- !ruby/object:Gem::Version
|
|
22
22
|
version: '4.0'
|
|
23
23
|
type: :runtime
|
|
24
24
|
prerelease: false
|
|
25
25
|
version_requirements: !ruby/object:Gem::Requirement
|
|
26
26
|
requirements:
|
|
27
|
-
- -
|
|
27
|
+
- - '>='
|
|
28
28
|
- !ruby/object:Gem::Version
|
|
29
29
|
version: '2.0'
|
|
30
|
-
- -
|
|
30
|
+
- - <
|
|
31
31
|
- !ruby/object:Gem::Version
|
|
32
32
|
version: '4.0'
|
|
33
33
|
- !ruby/object:Gem::Dependency
|
|
34
34
|
name: rmagick
|
|
35
35
|
requirement: !ruby/object:Gem::Requirement
|
|
36
36
|
requirements:
|
|
37
|
-
- -
|
|
37
|
+
- - '>='
|
|
38
38
|
- !ruby/object:Gem::Version
|
|
39
39
|
version: '2.0'
|
|
40
|
-
- -
|
|
40
|
+
- - <
|
|
41
41
|
- !ruby/object:Gem::Version
|
|
42
42
|
version: '3.0'
|
|
43
43
|
type: :runtime
|
|
44
44
|
prerelease: false
|
|
45
45
|
version_requirements: !ruby/object:Gem::Requirement
|
|
46
46
|
requirements:
|
|
47
|
-
- -
|
|
47
|
+
- - '>='
|
|
48
48
|
- !ruby/object:Gem::Version
|
|
49
49
|
version: '2.0'
|
|
50
|
-
- -
|
|
50
|
+
- - <
|
|
51
51
|
- !ruby/object:Gem::Version
|
|
52
52
|
version: '3.0'
|
|
53
53
|
description: "\n Jekyll Responsive Images is a Jekyll plugin and utility for automatically
|
|
@@ -59,26 +59,6 @@ executables: []
|
|
|
59
59
|
extensions: []
|
|
60
60
|
extra_rdoc_files: []
|
|
61
61
|
files:
|
|
62
|
-
- ".coveralls.yml"
|
|
63
|
-
- ".gitignore"
|
|
64
|
-
- ".travis.yml"
|
|
65
|
-
- Gemfile
|
|
66
|
-
- LICENSE
|
|
67
|
-
- README.md
|
|
68
|
-
- Rakefile
|
|
69
|
-
- features/extra-image-generation.feature
|
|
70
|
-
- features/fixtures/_includes/base-url.html
|
|
71
|
-
- features/fixtures/_includes/custom-template.html
|
|
72
|
-
- features/fixtures/_includes/responsive-image.html
|
|
73
|
-
- features/fixtures/assets/subdir/test.png
|
|
74
|
-
- features/fixtures/assets/test.png
|
|
75
|
-
- features/image-generation.feature
|
|
76
|
-
- features/responsive-image-block.feature
|
|
77
|
-
- features/responsive-image-tag.feature
|
|
78
|
-
- features/step_definitions/jekyll_steps.rb
|
|
79
|
-
- features/support/env.rb
|
|
80
|
-
- features/support/hooks.rb
|
|
81
|
-
- jekyll-responsive_image.gemspec
|
|
82
62
|
- lib/jekyll/responsive_image.rb
|
|
83
63
|
- lib/jekyll/responsive_image/block.rb
|
|
84
64
|
- lib/jekyll/responsive_image/common.rb
|
|
@@ -100,30 +80,18 @@ require_paths:
|
|
|
100
80
|
- lib
|
|
101
81
|
required_ruby_version: !ruby/object:Gem::Requirement
|
|
102
82
|
requirements:
|
|
103
|
-
- -
|
|
83
|
+
- - '>='
|
|
104
84
|
- !ruby/object:Gem::Version
|
|
105
85
|
version: '0'
|
|
106
86
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
107
87
|
requirements:
|
|
108
|
-
- -
|
|
88
|
+
- - '>='
|
|
109
89
|
- !ruby/object:Gem::Version
|
|
110
90
|
version: '0'
|
|
111
91
|
requirements: []
|
|
112
92
|
rubyforge_project:
|
|
113
|
-
rubygems_version: 2.
|
|
93
|
+
rubygems_version: 2.0.14.1
|
|
114
94
|
signing_key:
|
|
115
95
|
specification_version: 4
|
|
116
96
|
summary: Responsive images for Jekyll via srcset
|
|
117
|
-
test_files:
|
|
118
|
-
- features/extra-image-generation.feature
|
|
119
|
-
- features/fixtures/_includes/base-url.html
|
|
120
|
-
- features/fixtures/_includes/custom-template.html
|
|
121
|
-
- features/fixtures/_includes/responsive-image.html
|
|
122
|
-
- features/fixtures/assets/subdir/test.png
|
|
123
|
-
- features/fixtures/assets/test.png
|
|
124
|
-
- features/image-generation.feature
|
|
125
|
-
- features/responsive-image-block.feature
|
|
126
|
-
- features/responsive-image-tag.feature
|
|
127
|
-
- features/step_definitions/jekyll_steps.rb
|
|
128
|
-
- features/support/env.rb
|
|
129
|
-
- features/support/hooks.rb
|
|
97
|
+
test_files: []
|
data/.coveralls.yml
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
service_name: travis-ci
|
data/.gitignore
DELETED
data/.travis.yml
DELETED
data/Gemfile
DELETED
data/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
The MIT License (MIT)
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2014 Joseph Wynn
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
data/README.md
DELETED
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
# Jekyll Responsive Images
|
|
2
|
-
|
|
3
|
-
Jekyll Responsive Images is a [Jekyll](http://jekyllrb.com/) plugin and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like [`srcset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Specifications) or [Imager.js](https://github.com/BBC-News/Imager.js/).
|
|
4
|
-
|
|
5
|
-
[](https://travis-ci.org/wildlyinaccurate/jekyll-responsive-image)
|
|
6
|
-
[](https://coveralls.io/repos/github/wildlyinaccurate/jekyll-responsive-image/badge.svg?branch=master)
|
|
7
|
-
[](https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images)
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
First, install the gem:
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
$ gem install jekyll-responsive_image
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
Then you can either add it to the `gems` section of your `_config.yml`:
|
|
18
|
-
|
|
19
|
-
```yaml
|
|
20
|
-
gems: [jekyll/responsive-image]
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Or you can copy the contents of [`responsive_image.rb`](lib/jekyll/responsive_image.rb) into your `_plugins` directory.
|
|
24
|
-
|
|
25
|
-
## Configuration
|
|
26
|
-
|
|
27
|
-
An example configuration is below.
|
|
28
|
-
|
|
29
|
-
```yaml
|
|
30
|
-
responsive_image:
|
|
31
|
-
# [Required]
|
|
32
|
-
# Path to the image template.
|
|
33
|
-
template: _includes/responsive-image.html
|
|
34
|
-
|
|
35
|
-
# [Optional, Default: 85]
|
|
36
|
-
# Quality to use when resizing images.
|
|
37
|
-
default_quality: 90
|
|
38
|
-
|
|
39
|
-
# [Optional, Default: []]
|
|
40
|
-
# An array of resize configuration objects. Each object must contain at least
|
|
41
|
-
# a `width` value.
|
|
42
|
-
sizes:
|
|
43
|
-
- width: 480 # [Required] How wide the resized image will be.
|
|
44
|
-
quality: 80 # [Optional] Overrides default_quality for this size.
|
|
45
|
-
- width: 800
|
|
46
|
-
- width: 1400
|
|
47
|
-
quality: 90
|
|
48
|
-
|
|
49
|
-
# [Optional, Default: assets]
|
|
50
|
-
# The base directory where assets are stored. This is used to determine the
|
|
51
|
-
# `dirname` value in `output_path_format` below.
|
|
52
|
-
base_path: assets
|
|
53
|
-
|
|
54
|
-
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
|
|
55
|
-
# The template used when generating filenames for resized images. Must be a
|
|
56
|
-
# relative path.
|
|
57
|
-
#
|
|
58
|
-
# Parameters available are:
|
|
59
|
-
# %{dirname} Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
|
|
60
|
-
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
|
|
61
|
-
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
|
|
62
|
-
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
|
|
63
|
-
# %{width} Width of the resized image
|
|
64
|
-
# %{height} Height of the resized image
|
|
65
|
-
#
|
|
66
|
-
output_path_format: assets/resized/%{width}/%{basename}
|
|
67
|
-
|
|
68
|
-
# By default, only images referenced by the responsive_image and responsive_image_block
|
|
69
|
-
# tags are resized. Here you can set a list of paths or path globs to resize other
|
|
70
|
-
# images. This is useful for resizing images which will be referenced from stylesheets.
|
|
71
|
-
extra_images:
|
|
72
|
-
- assets/foo/bar.png
|
|
73
|
-
- assets/bgs/*.png
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
## Usage
|
|
77
|
-
|
|
78
|
-
Replace your images with the `responsive_image` tag, specifying the path to the image in the `path` attribute.
|
|
79
|
-
|
|
80
|
-
```twig
|
|
81
|
-
{% responsive_image path: assets/my-file.jpg %}
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
You can override the template on a per-image basis by specifying the `template` attribute.
|
|
85
|
-
|
|
86
|
-
```twig
|
|
87
|
-
{% responsive_image path: assets/my-file.jpg template: _includes/another-template.html %}
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
Any extra attributes will be passed straight to the template as variables.
|
|
91
|
-
|
|
92
|
-
```twig
|
|
93
|
-
{% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
### Liquid variables as attributes
|
|
97
|
-
|
|
98
|
-
You can use Liquid variables as attributes with the `responsive_image_block` tag. This tag works in exactly the same way as the `responsive_image` tag, but is implemented as a block tag to allow for more complex logic.
|
|
99
|
-
|
|
100
|
-
> **Important!** The attributes in the `responsive_image_block` tag are parsed as YAML, so whitespace and indentation are significant!
|
|
101
|
-
|
|
102
|
-
```twig
|
|
103
|
-
{% assign path = 'assets/test.png' %}
|
|
104
|
-
{% assign alt = 'Lorem ipsum...' %}
|
|
105
|
-
|
|
106
|
-
{% responsive_image_block %}
|
|
107
|
-
path: {{ path }}
|
|
108
|
-
alt: {{ alt }}
|
|
109
|
-
{% if title %}
|
|
110
|
-
title: {{ title }}
|
|
111
|
-
{% endif %}
|
|
112
|
-
{% endresponsive_image_block %}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### Template
|
|
116
|
-
|
|
117
|
-
You will need to create a template in order to use the `responsive_image` tag. Below are some sample templates to get you started.
|
|
118
|
-
|
|
119
|
-
#### Responsive images with `srcset`
|
|
120
|
-
|
|
121
|
-
```twig
|
|
122
|
-
{% capture srcset %}
|
|
123
|
-
{% for i in resized %}
|
|
124
|
-
/{{ i.path }} {{ i.width }}w,
|
|
125
|
-
{% endfor %}
|
|
126
|
-
{% endcapture %}
|
|
127
|
-
|
|
128
|
-
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
#### Responsive images with `<picture>`
|
|
132
|
-
|
|
133
|
-
```twig
|
|
134
|
-
<picture>
|
|
135
|
-
{% for i in resized %}
|
|
136
|
-
<source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">
|
|
137
|
-
{% endfor %}
|
|
138
|
-
<img src="/{{ path }}">
|
|
139
|
-
</picture>
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
#### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
|
|
143
|
-
|
|
144
|
-
> **Note:** This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
|
|
145
|
-
|
|
146
|
-
```twig
|
|
147
|
-
{% assign smallest = resized | sort: 'width' | first %}
|
|
148
|
-
|
|
149
|
-
<div class="responsive-image">
|
|
150
|
-
<img class="responsive-image__placeholder" src="/{{ smallest.path }}">
|
|
151
|
-
<div class="responsive-image__delayed" data-src="/assets/resized/{width}/{{ original.basename }}"></div>
|
|
152
|
-
</div>
|
|
153
|
-
|
|
154
|
-
<script>
|
|
155
|
-
new Imager('.responsive-image__delayed', {
|
|
156
|
-
availableWidths: [{{ resized | map: 'width' | join: ', ' }}]
|
|
157
|
-
onImagesReplaced: function() {
|
|
158
|
-
$('.responsive-image__placeholder').hide();
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
</script>
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### Template Variables
|
|
165
|
-
|
|
166
|
-
The following variables are available in the template:
|
|
167
|
-
|
|
168
|
-
| Variable | Type | Description |
|
|
169
|
-
|----------- |--------|------------------------------------------------------------------------------------------------------|
|
|
170
|
-
| `path` | String | The path of the unmodified image. This is always the same as the `path` attribute passed to the tag. |
|
|
171
|
-
| `resized` | Array | An array of all the resized images. Each image is an **Image Object**. |
|
|
172
|
-
| `original` | Object | An **Image Object** containing information about the original image. |
|
|
173
|
-
| `*` | String | Any other attributes will be passed to the template verbatim as strings. |
|
|
174
|
-
|
|
175
|
-
#### Image Objects
|
|
176
|
-
|
|
177
|
-
Image objects (like `original` and each object in `resized`) contain the following properties:
|
|
178
|
-
|
|
179
|
-
| Variable | Type | Description |
|
|
180
|
-
|-------------|---------|----------------------------------------------------------------------------------------------|
|
|
181
|
-
| `path` | String | The path to the image. |
|
|
182
|
-
| `width` | Integer | The width of the image. |
|
|
183
|
-
| `height` | Integer | The height of the image. |
|
|
184
|
-
| `basename` | String | Basename of the file (`assets/some-file.jpg` => `some-file.jpg`). |
|
|
185
|
-
| `dirname` | String | Directory of the file relative to `base_path` (`assets/sub/dir/some-file.jpg` => `sub/dir`). |
|
|
186
|
-
| `filename` | String | Basename without the extension (`assets/some-file.jpg` => `some-file`). |
|
|
187
|
-
| `extension` | String | Extension of the file (`assets/some-file.jpg` => `jpg`). |
|
data/Rakefile
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
require 'bundler'
|
|
2
|
-
|
|
3
|
-
begin
|
|
4
|
-
Bundler.setup(:default, :development)
|
|
5
|
-
rescue Bundler::BundlerError => e
|
|
6
|
-
$stderr.puts e.message
|
|
7
|
-
$stderr.puts "Run `bundle install` to install missing gems"
|
|
8
|
-
exit e.status_code
|
|
9
|
-
end
|
|
10
|
-
|
|
11
|
-
require 'rake'
|
|
12
|
-
require 'jekyll/responsive_image/version'
|
|
13
|
-
require 'cucumber/rake/task'
|
|
14
|
-
require 'coveralls/rake/task'
|
|
15
|
-
|
|
16
|
-
Cucumber::Rake::Task.new(:features)
|
|
17
|
-
|
|
18
|
-
Coveralls::RakeTask.new
|
|
19
|
-
task :features_with_coveralls => [:features, 'coveralls:push']
|
|
20
|
-
|
|
21
|
-
task :default => [:features]
|
|
22
|
-
|
|
23
|
-
task :release do |t|
|
|
24
|
-
system "gem build jekyll-responsive_image.gemspec"
|
|
25
|
-
system "git tag v#{Jekyll::ResponsiveImage::VERSION} -a -m 'Tagged release of jekyll-responsive_image-#{Jekyll::ResponsiveImage::VERSION}.gem'"
|
|
26
|
-
system "git push --tags"
|
|
27
|
-
system "gem push jekyll-responsive_image-#{Jekyll::ResponsiveImage::VERSION}.gem"
|
|
28
|
-
end
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
Feature: Extra image generation
|
|
2
|
-
As a Jekyll user
|
|
3
|
-
I want to resize images that aren't used in posts or pages
|
|
4
|
-
In order to use them in my stylesheets
|
|
5
|
-
|
|
6
|
-
Scenario: Resizing a single image
|
|
7
|
-
Given I have a responsive_image configuration with:
|
|
8
|
-
"""
|
|
9
|
-
sizes:
|
|
10
|
-
- width: 100
|
|
11
|
-
|
|
12
|
-
extra_images:
|
|
13
|
-
- assets/test.png
|
|
14
|
-
"""
|
|
15
|
-
|
|
16
|
-
And I have a file "index.html" with "Hello, world!"
|
|
17
|
-
When I run Jekyll
|
|
18
|
-
Then the image "assets/resized/test-100x50.png" should have the dimensions "100x50"
|
|
19
|
-
|
|
20
|
-
Scenario: Using glob patterns
|
|
21
|
-
Given I have a responsive_image configuration with:
|
|
22
|
-
"""
|
|
23
|
-
sizes:
|
|
24
|
-
- width: 100
|
|
25
|
-
|
|
26
|
-
extra_images:
|
|
27
|
-
- assets/*.png
|
|
28
|
-
"""
|
|
29
|
-
|
|
30
|
-
And I have a file "index.html" with "Hello, world!"
|
|
31
|
-
When I run Jekyll
|
|
32
|
-
Then the image "assets/resized/test-100x50.png" should have the dimensions "100x50"
|
|
33
|
-
|
|
34
|
-
Scenario: No extra images
|
|
35
|
-
Given I have a responsive_image configuration with:
|
|
36
|
-
"""
|
|
37
|
-
sizes:
|
|
38
|
-
- width: 100
|
|
39
|
-
"""
|
|
40
|
-
|
|
41
|
-
And I have a file "index.html" with "Hello, world!"
|
|
42
|
-
When I run Jekyll
|
|
43
|
-
Then the file "assets/resized/test-100x50.png" should not exist
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<img src="{{ site.baseurl }}/{{ path }}">
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{{ resized | map: 'width' | join: ', ' }}]
|
|
Binary file
|
|
Binary file
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
Feature: Responsive image generation
|
|
2
|
-
As a Jekyll user
|
|
3
|
-
I want to generate responsive images
|
|
4
|
-
In order to use them on my pages
|
|
5
|
-
|
|
6
|
-
Scenario: Resizing images
|
|
7
|
-
Given I have a responsive_image configuration with:
|
|
8
|
-
"""
|
|
9
|
-
template: _includes/responsive-image.html
|
|
10
|
-
sizes:
|
|
11
|
-
- width: 100
|
|
12
|
-
"""
|
|
13
|
-
|
|
14
|
-
And I have a file "index.html" with "{% responsive_image path: assets/test.png alt: Foobar %}"
|
|
15
|
-
When I run Jekyll
|
|
16
|
-
Then the image "assets/resized/test-100x50.png" should have the dimensions "100x50"
|
|
17
|
-
|
|
18
|
-
Scenario: Handling subdirectories
|
|
19
|
-
Given I have a responsive_image configuration with:
|
|
20
|
-
"""
|
|
21
|
-
template: _includes/responsive-image.html
|
|
22
|
-
output_path_format: assets/resized/%{dirname}/%{filename}-%{width}.%{extension}
|
|
23
|
-
sizes:
|
|
24
|
-
- width: 100
|
|
25
|
-
"""
|
|
26
|
-
|
|
27
|
-
And I have a file "index.html" with:
|
|
28
|
-
"""
|
|
29
|
-
{% responsive_image path: assets/test.png %}
|
|
30
|
-
{% responsive_image path: assets/subdir/test.png %}
|
|
31
|
-
{% responsive_image path: assets/test.png cache: true %}
|
|
32
|
-
"""
|
|
33
|
-
|
|
34
|
-
When I run Jekyll
|
|
35
|
-
Then the file "assets/resized/test-100.png" should exist
|
|
36
|
-
And the file "assets/resized/subdir/test-100.png" should exist
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
Feature: Jekyll responsive_image_block tag
|
|
2
|
-
As a Jekyll template developer
|
|
3
|
-
I want to include Liquid variables when rendering my responsive images
|
|
4
|
-
In order to dynamically generate my responsive images
|
|
5
|
-
|
|
6
|
-
Scenario: Simple image tag
|
|
7
|
-
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
|
|
8
|
-
And I have a file "index.html" with:
|
|
9
|
-
"""
|
|
10
|
-
{% assign path = 'assets/test.png' %}
|
|
11
|
-
{% assign alt = 'Lorem ipsum' %}
|
|
12
|
-
|
|
13
|
-
{% responsive_image_block %}
|
|
14
|
-
path: {{ path }}
|
|
15
|
-
title: Magic rainbow adventure!
|
|
16
|
-
alt: {{ alt }}
|
|
17
|
-
{% endresponsive_image_block %}
|
|
18
|
-
"""
|
|
19
|
-
When I run Jekyll
|
|
20
|
-
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\" title=\"Magic rainbow adventure!\"" in "_site/index.html"
|
|
21
|
-
|
|
22
|
-
Scenario: Global variables available in templates
|
|
23
|
-
Given I have a file "index.html" with:
|
|
24
|
-
"""
|
|
25
|
-
{% responsive_image_block %}
|
|
26
|
-
path: assets/test.png
|
|
27
|
-
{% endresponsive_image_block %}
|
|
28
|
-
"""
|
|
29
|
-
And I have a configuration with:
|
|
30
|
-
"""
|
|
31
|
-
baseurl: https://wildlyinaccurate.com
|
|
32
|
-
responsive_image:
|
|
33
|
-
template: _includes/base-url.html
|
|
34
|
-
"""
|
|
35
|
-
When I run Jekyll
|
|
36
|
-
Then I should see "<img src=\"https://wildlyinaccurate.com/assets/test.png\">" in "_site/index.html"
|
|
37
|
-
|
|
38
|
-
Scenario: More complex logic in the block tag
|
|
39
|
-
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
|
|
40
|
-
And I have a file "index.html" with:
|
|
41
|
-
"""
|
|
42
|
-
{% assign path = 'assets/test.png' %}
|
|
43
|
-
{% assign alt = 'Lorem ipsum' %}
|
|
44
|
-
|
|
45
|
-
{% responsive_image_block %}
|
|
46
|
-
path: {{ path }}
|
|
47
|
-
|
|
48
|
-
{% if another_alt %}
|
|
49
|
-
alt: {{ another_alt }}
|
|
50
|
-
{% else %}
|
|
51
|
-
alt: {{ alt }}
|
|
52
|
-
{% endif %}
|
|
53
|
-
{% endresponsive_image_block %}
|
|
54
|
-
"""
|
|
55
|
-
When I run Jekyll
|
|
56
|
-
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\"" in "_site/index.html"
|
|
57
|
-
|
|
58
|
-
Scenario: Handling a nil path
|
|
59
|
-
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
|
|
60
|
-
And I have a file "index.html" with:
|
|
61
|
-
"""
|
|
62
|
-
{% responsive_image_block %}
|
|
63
|
-
path: {{ path }}
|
|
64
|
-
{% endresponsive_image_block %}
|
|
65
|
-
"""
|
|
66
|
-
Then Jekyll should throw a "SyntaxError"
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
Feature: Jekyll responsive_image tag
|
|
2
|
-
As a Jekyll template developer
|
|
3
|
-
I want to include responsive images in my page
|
|
4
|
-
In order to best cater for devices of all sizes
|
|
5
|
-
|
|
6
|
-
Scenario: Simple image tag
|
|
7
|
-
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
|
|
8
|
-
And I have a file "index.html" with "{% responsive_image path: assets/test.png alt: Foobar %}"
|
|
9
|
-
When I run Jekyll
|
|
10
|
-
Then I should see "<img alt=\"Foobar\" src=\"/assets/test.png\"" in "_site/index.html"
|
|
11
|
-
|
|
12
|
-
Scenario: Global variables available in templates
|
|
13
|
-
Given I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
|
|
14
|
-
And I have a configuration with:
|
|
15
|
-
"""
|
|
16
|
-
baseurl: https://wildlyinaccurate.com
|
|
17
|
-
responsive_image:
|
|
18
|
-
template: _includes/base-url.html
|
|
19
|
-
"""
|
|
20
|
-
When I run Jekyll
|
|
21
|
-
Then I should see "<img src=\"https://wildlyinaccurate.com/assets/test.png\">" in "_site/index.html"
|
|
22
|
-
|
|
23
|
-
Scenario: Adding custom attributes
|
|
24
|
-
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
|
|
25
|
-
And I have a file "index.html" with:
|
|
26
|
-
"""
|
|
27
|
-
{% responsive_image path: assets/test.png alt: 'Foobar bazbar' title: "Lorem Ipsum" %}
|
|
28
|
-
"""
|
|
29
|
-
When I run Jekyll
|
|
30
|
-
Then I should see "<img alt=\"Foobar bazbar\" src=\"/assets/test.png\" title=\"Lorem Ipsum\"" in "_site/index.html"
|
|
31
|
-
|
|
32
|
-
Scenario: UTF-8 attributes
|
|
33
|
-
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
|
|
34
|
-
And I have a file "index.html" with "{% responsive_image path: assets/test.png alt: 'かっこいい！ ジェケルが好きです！' %}"
|
|
35
|
-
When I run Jekyll
|
|
36
|
-
Then I should see "<img alt=\"かっこいい！ ジェケルが好きです！\" src=\"/assets/test.png\"" in "_site/index.html"
|
|
37
|
-
|
|
38
|
-
Scenario: Image with multiple sizes
|
|
39
|
-
Given I have a responsive_image configuration with:
|
|
40
|
-
"""
|
|
41
|
-
template: _includes/responsive-image.html
|
|
42
|
-
sizes:
|
|
43
|
-
- width: 100
|
|
44
|
-
- width: 200
|
|
45
|
-
"""
|
|
46
|
-
And I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
|
|
47
|
-
When I run Jekyll
|
|
48
|
-
Then I should see "<img alt=\"\" src=\"/assets/test.png\"" in "_site/index.html"
|
|
49
|
-
And I should see "/assets/resized/test-100x50.png 100w" in "_site/index.html"
|
|
50
|
-
And I should see "/assets/resized/test-200x100.png 200w" in "_site/index.html"
|
|
51
|
-
And I should see "/assets/test.png 300w" in "_site/index.html"
|
|
52
|
-
And the file "assets/resized/test-100x50.png" should exist
|
|
53
|
-
And the file "assets/resized/test-200x100.png" should exist
|
|
54
|
-
|
|
55
|
-
Scenario: Overriding the template
|
|
56
|
-
Given I have a responsive_image configuration with:
|
|
57
|
-
"""
|
|
58
|
-
template: _includes/responsive-image.html
|
|
59
|
-
sizes:
|
|
60
|
-
- width: 100
|
|
61
|
-
- width: 200
|
|
62
|
-
- width: 300
|
|
63
|
-
"""
|
|
64
|
-
And I have a file "index.html" with "{% responsive_image path: assets/test.png template: _includes/custom-template.html %}"
|
|
65
|
-
When I run Jekyll
|
|
66
|
-
Then I should see "[100, 200, 300]" in "_site/index.html"
|
|
67
|
-
|
|
68
|
-
Scenario: Overriding the generated filenames
|
|
69
|
-
Given I have a responsive_image configuration with:
|
|
70
|
-
"""
|
|
71
|
-
template: _includes/responsive-image.html
|
|
72
|
-
output_path_format: assets/%{dirname}/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
|
|
73
|
-
sizes:
|
|
74
|
-
- width: 100
|
|
75
|
-
"""
|
|
76
|
-
And I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
|
|
77
|
-
When I run Jekyll
|
|
78
|
-
Then I should see "/assets/test.png-resized/100/test-50.png 100w" in "_site/index.html"
|
|
79
|
-
And the file "assets/test.png-resized/100/test-50.png" should exist
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
include Test::Unit::Assertions
|
|
2
|
-
|
|
3
|
-
When /^I run Jekyll$/ do
|
|
4
|
-
run_jekyll
|
|
5
|
-
end
|
|
6
|
-
|
|
7
|
-
Then /^Jekyll should throw a "(.+)"$/ do |error_class|
|
|
8
|
-
assert_raise(Object.const_get(error_class)) { run_jekyll }
|
|
9
|
-
end
|
|
10
|
-
|
|
11
|
-
Given /^I have a configuration with:$/ do |config|
|
|
12
|
-
write_file('_config.yml', config)
|
|
13
|
-
end
|
|
14
|
-
|
|
15
|
-
Given /^I have a responsive_image configuration with:$/ do |config|
|
|
16
|
-
write_file('_config.yml', "responsive_image:\n#{config}")
|
|
17
|
-
end
|
|
18
|
-
|
|
19
|
-
Given /^I have a responsive_image configuration with "(.+)" set to "(.+)"$/ do |config, value|
|
|
20
|
-
write_file('_config.yml', "responsive_image:\n #{config}: #{value}")
|
|
21
|
-
end
|
|
22
|
-
|
|
23
|
-
Given /^I have a file "(.+)" with:$/ do |path, contents|
|
|
24
|
-
write_file(path, "---\n---\n#{contents}")
|
|
25
|
-
end
|
|
26
|
-
|
|
27
|
-
Given /^I have a file "(.+)" with "(.+)"$/ do |path, contents|
|
|
28
|
-
write_file(path, "---\n---\n#{contents}")
|
|
29
|
-
end
|
|
30
|
-
|
|
31
|
-
Then /^I should see "(.+)" in "(.*)"$/ do |text, file|
|
|
32
|
-
assert_match(Regexp.new(text), File.open(file).readlines.join)
|
|
33
|
-
end
|
|
34
|
-
|
|
35
|
-
Then /^the file "(.+)" should exist$/ do |path|
|
|
36
|
-
assert File.exist?(path)
|
|
37
|
-
end
|
|
38
|
-
|
|
39
|
-
Then /^the file "(.+)" should not exist$/ do |path|
|
|
40
|
-
assert !File.exist?(path)
|
|
41
|
-
end
|
|
42
|
-
|
|
43
|
-
Then /^the image "(.+)" should have the dimensions "(\d+)x(\d+)"$/ do |path, width, height|
|
|
44
|
-
img = Magick::Image::read(path).first
|
|
45
|
-
assert_equal "#{width}x#{height}", "#{img.columns}x#{img.rows}"
|
|
46
|
-
img.destroy!
|
|
47
|
-
end
|
|
48
|
-
|
|
49
|
-
def write_file(path, contents)
|
|
50
|
-
File.open(path, 'w') do |f|
|
|
51
|
-
f.write(contents)
|
|
52
|
-
f.close
|
|
53
|
-
end
|
|
54
|
-
end
|
data/features/support/env.rb
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
if ENV['CI']
|
|
2
|
-
require 'coveralls'
|
|
3
|
-
Coveralls.wear!
|
|
4
|
-
end
|
|
5
|
-
|
|
6
|
-
require 'test/unit'
|
|
7
|
-
require 'jekyll/responsive_image'
|
|
8
|
-
|
|
9
|
-
TEST_DIR = File.join('/', 'tmp', 'jekyll')
|
|
10
|
-
|
|
11
|
-
def run_jekyll(options = {})
|
|
12
|
-
options['source'] ||= TEST_DIR
|
|
13
|
-
options['destination'] ||= File.join(TEST_DIR, '_site')
|
|
14
|
-
|
|
15
|
-
options = Jekyll.configuration(options)
|
|
16
|
-
|
|
17
|
-
site = Jekyll::Site.new(options)
|
|
18
|
-
site.process
|
|
19
|
-
end
|
data/features/support/hooks.rb
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
Before do
|
|
2
|
-
FileUtils.rm_rf(TEST_DIR) if File.exist?(TEST_DIR)
|
|
3
|
-
FileUtils.mkdir_p(TEST_DIR)
|
|
4
|
-
|
|
5
|
-
fixtures = File.expand_path('../../fixtures', __FILE__)
|
|
6
|
-
FileUtils.cp_r(Dir.glob("#{fixtures}/*"), TEST_DIR)
|
|
7
|
-
|
|
8
|
-
Dir.chdir(TEST_DIR)
|
|
9
|
-
end
|
|
10
|
-
|
|
11
|
-
at_exit do
|
|
12
|
-
FileUtils.rm_rf(TEST_DIR) if File.exist?(TEST_DIR)
|
|
13
|
-
end
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
# -*- encoding: utf-8 -*-
|
|
2
|
-
lib = File.expand_path('../lib/', __FILE__)
|
|
3
|
-
$:.unshift lib unless $:.include?(lib)
|
|
4
|
-
|
|
5
|
-
require 'jekyll/responsive_image/version'
|
|
6
|
-
|
|
7
|
-
Gem::Specification.new do |spec|
|
|
8
|
-
spec.name = 'jekyll-responsive_image'
|
|
9
|
-
spec.version = Jekyll::ResponsiveImage::VERSION
|
|
10
|
-
spec.authors = ['Joseph Wynn']
|
|
11
|
-
spec.email = ['joseph@wildlyinaccurate.com']
|
|
12
|
-
spec.summary = 'Responsive images for Jekyll via srcset'
|
|
13
|
-
spec.homepage = 'https://github.com/wildlyinaccurate/jekyll-responsive-image'
|
|
14
|
-
spec.licenses = ['MIT']
|
|
15
|
-
spec.description = %q{
|
|
16
|
-
Jekyll Responsive Images is a Jekyll plugin and utility for automatically resizing images.
|
|
17
|
-
Its intended use is for sites which want to display responsive images using something like srcset or Imager.js.
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
spec.files = `git ls-files`.split($/)
|
|
21
|
-
spec.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
|
22
|
-
spec.executables = []
|
|
23
|
-
spec.require_path = 'lib'
|
|
24
|
-
|
|
25
|
-
if Gem::Version.new(RUBY_VERSION) < Gem::Version.new('2.0.0')
|
|
26
|
-
max_jekyll_version = '3.0'
|
|
27
|
-
else
|
|
28
|
-
max_jekyll_version = '4.0'
|
|
29
|
-
end
|
|
30
|
-
|
|
31
|
-
spec.add_runtime_dependency 'jekyll', ['>= 2.0', "< #{max_jekyll_version}"]
|
|
32
|
-
spec.add_runtime_dependency 'rmagick', ['>= 2.0', '< 3.0']
|
|
33
|
-
end
|