jekyll-responsive_image 0.17.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|