jekyll_picture_tag 1.11.0 → 1.12.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/docs/Gemfile +4 -2
- data/docs/Gemfile.lock +14 -12
- data/docs/_config.yml +6 -10
- data/docs/devs/contributing/code.md +44 -0
- data/docs/devs/contributing/docs.md +13 -0
- data/docs/devs/contributing/index.md +15 -0
- data/docs/devs/contributing/setup.md +13 -0
- data/docs/devs/contributing/testing.md +41 -0
- data/docs/devs/index.md +7 -0
- data/docs/{releases.md → devs/releases.md} +24 -14
- data/docs/index.md +43 -27
- data/docs/users/configuration/cdn.md +35 -0
- data/docs/users/configuration/directories.md +34 -0
- data/docs/users/configuration/disable.md +24 -0
- data/docs/users/configuration/fast_build.md +28 -0
- data/docs/users/configuration/ignore_missing.md +23 -0
- data/docs/users/configuration/index.md +29 -0
- data/docs/users/configuration/kramdown_fix.md +20 -0
- data/docs/users/configuration/relative_urls.md +15 -0
- data/docs/users/configuration/suppress_warnings.md +16 -0
- data/docs/users/index.md +7 -0
- data/docs/users/installation.md +52 -0
- data/docs/users/liquid_tag/argument_reference/alternate_images.md +18 -0
- data/docs/users/liquid_tag/argument_reference/attributes.md +42 -0
- data/docs/users/liquid_tag/argument_reference/base_image.md +12 -0
- data/docs/users/liquid_tag/argument_reference/crop.md +48 -0
- data/docs/users/liquid_tag/argument_reference/link.md +16 -0
- data/docs/users/liquid_tag/argument_reference/preset.md +17 -0
- data/docs/users/liquid_tag/argument_reference/readme.md +9 -0
- data/docs/users/liquid_tag/examples.md +81 -0
- data/docs/users/liquid_tag/index.md +31 -0
- data/docs/users/notes/git_lfs.md +7 -0
- data/docs/users/notes/github_pages.md +5 -0
- data/docs/users/notes/html_attributes.md +5 -0
- data/docs/users/notes/index.md +6 -0
- data/docs/users/notes/input_checking.md +6 -0
- data/docs/users/notes/kramdown_bug.md +41 -0
- data/docs/users/notes/managing_images.md +21 -0
- data/docs/{migration.md → users/notes/migration.md} +0 -0
- data/docs/users/presets/cropping.md +61 -0
- data/docs/users/presets/default.md +23 -0
- data/docs/users/presets/examples.md +79 -0
- data/docs/users/presets/fallback_image.md +28 -0
- data/docs/users/presets/html_attributes.md +26 -0
- data/docs/users/presets/image_formats.md +21 -0
- data/docs/users/presets/image_quality.md +43 -0
- data/docs/users/presets/index.md +101 -0
- data/docs/users/presets/link_source.md +16 -0
- data/docs/users/presets/markup_formats/fragments.md +48 -0
- data/docs/users/presets/markup_formats/javascript_friendly.md +57 -0
- data/docs/users/presets/markup_formats/readme.md +43 -0
- data/docs/users/presets/markup_formats/standard_html.md +25 -0
- data/docs/users/presets/media_queries.md +36 -0
- data/docs/users/presets/nomarkdown_override.md +17 -0
- data/docs/users/presets/pixel_ratio_srcsets.md +32 -0
- data/docs/users/presets/width_height_attributes.md +34 -0
- data/docs/users/presets/width_srcsets.md +85 -0
- data/lib/jekyll_picture_tag/instructions/preset.rb +5 -1
- data/lib/jekyll_picture_tag/instructions/set.rb +5 -1
- data/lib/jekyll_picture_tag/version.rb +1 -1
- metadata +55 -14
- data/docs/_layouts/directory.html +0 -32
- data/docs/assets/style.css +0 -31
- data/docs/contributing.md +0 -109
- data/docs/example_presets.md +0 -116
- data/docs/global_configuration.md +0 -173
- data/docs/installation.md +0 -45
- data/docs/notes.md +0 -91
- data/docs/output.md +0 -63
- data/docs/presets.md +0 -391
- data/docs/usage.md +0 -157
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 57fe7741c94cf1511eb8824dec643e9acb953b3251b2714b030e662742d62680
|
4
|
+
data.tar.gz: fcfae3154dcfe87509bc4759171ab6f2a27636ab75d6ec20d24b335f8535dc8c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: af9a456fb275f80eedff3c26a1579c3ce95b2385fd66f1a7e203947de2e16deea596f2e6a1334f5cb475e4d61c26803569bd522a84356a574b826cc071961fa3
|
7
|
+
data.tar.gz: a6fb8984f4fe3b02564a60038d77136d15c5fd1625a1e8b5f654b656494eb8e9b1f7f497436145253e8f241d5cb902243df37ff38511a05b742c5c2de1c5730d
|
data/docs/Gemfile
CHANGED
data/docs/Gemfile.lock
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
GEM
|
2
2
|
remote: https://rubygems.org/
|
3
3
|
specs:
|
4
|
-
activesupport (6.0.3)
|
4
|
+
activesupport (6.0.3.2)
|
5
5
|
concurrent-ruby (~> 1.0, >= 1.0.2)
|
6
6
|
i18n (>= 0.7, < 2)
|
7
7
|
minitest (~> 5.1)
|
@@ -28,12 +28,12 @@ GEM
|
|
28
28
|
execjs (2.7.0)
|
29
29
|
faraday (1.0.1)
|
30
30
|
multipart-post (>= 1.2, < 3)
|
31
|
-
ffi (1.
|
31
|
+
ffi (1.13.1)
|
32
32
|
forwardable-extended (2.6.0)
|
33
33
|
gemoji (3.0.1)
|
34
|
-
github-pages (
|
34
|
+
github-pages (206)
|
35
35
|
github-pages-health-check (= 1.16.1)
|
36
|
-
jekyll (= 3.8.
|
36
|
+
jekyll (= 3.8.7)
|
37
37
|
jekyll-avatar (= 0.7.0)
|
38
38
|
jekyll-coffeescript (= 1.1.1)
|
39
39
|
jekyll-commonmark-ghpages (= 0.1.6)
|
@@ -72,7 +72,7 @@ GEM
|
|
72
72
|
mercenary (~> 0.3)
|
73
73
|
minima (= 2.5.1)
|
74
74
|
nokogiri (>= 1.10.4, < 2.0)
|
75
|
-
rouge (= 3.
|
75
|
+
rouge (= 3.19.0)
|
76
76
|
terminal-table (~> 1.4)
|
77
77
|
github-pages-health-check (1.16.1)
|
78
78
|
addressable (~> 2.3)
|
@@ -80,13 +80,13 @@ GEM
|
|
80
80
|
octokit (~> 4.0)
|
81
81
|
public_suffix (~> 3.0)
|
82
82
|
typhoeus (~> 1.3)
|
83
|
-
html-pipeline (2.
|
83
|
+
html-pipeline (2.13.0)
|
84
84
|
activesupport (>= 2)
|
85
85
|
nokogiri (>= 1.4)
|
86
86
|
http_parser.rb (0.6.0)
|
87
87
|
i18n (0.9.5)
|
88
88
|
concurrent-ruby (~> 1.0)
|
89
|
-
jekyll (3.8.
|
89
|
+
jekyll (3.8.7)
|
90
90
|
addressable (~> 2.4)
|
91
91
|
colorator (~> 1.0)
|
92
92
|
em-websocket (~> 0.5)
|
@@ -136,6 +136,8 @@ GEM
|
|
136
136
|
addressable (~> 2.0)
|
137
137
|
jekyll (>= 3.5, < 5.0)
|
138
138
|
rubyzip (>= 1.3.0)
|
139
|
+
jekyll-rtd-theme (0.1.6)
|
140
|
+
github-pages (~> 206)
|
139
141
|
jekyll-sass-converter (1.5.2)
|
140
142
|
sass (~> 3.4)
|
141
143
|
jekyll-seo-tag (2.6.1)
|
@@ -202,9 +204,9 @@ GEM
|
|
202
204
|
jekyll (>= 3.5, < 5.0)
|
203
205
|
jekyll-feed (~> 0.9)
|
204
206
|
jekyll-seo-tag (~> 2.1)
|
205
|
-
minitest (5.14.
|
207
|
+
minitest (5.14.1)
|
206
208
|
multipart-post (2.1.1)
|
207
|
-
nokogiri (1.10.
|
209
|
+
nokogiri (1.10.10)
|
208
210
|
mini_portile2 (~> 2.4.0)
|
209
211
|
octokit (4.18.0)
|
210
212
|
faraday (>= 0.9)
|
@@ -215,7 +217,7 @@ GEM
|
|
215
217
|
rb-fsevent (0.10.4)
|
216
218
|
rb-inotify (0.10.1)
|
217
219
|
ffi (~> 1.0)
|
218
|
-
rouge (3.
|
220
|
+
rouge (3.19.0)
|
219
221
|
ruby-enum (0.8.0)
|
220
222
|
i18n
|
221
223
|
rubyzip (2.3.0)
|
@@ -236,14 +238,14 @@ GEM
|
|
236
238
|
tzinfo (1.2.7)
|
237
239
|
thread_safe (~> 0.1)
|
238
240
|
unicode-display_width (1.7.0)
|
239
|
-
zeitwerk (2.
|
241
|
+
zeitwerk (2.4.0)
|
240
242
|
|
241
243
|
PLATFORMS
|
242
244
|
ruby
|
243
245
|
|
244
246
|
DEPENDENCIES
|
245
247
|
github-pages
|
246
|
-
jekyll-theme
|
248
|
+
jekyll-rtd-theme
|
247
249
|
|
248
250
|
BUNDLED WITH
|
249
251
|
2.1.4
|
data/docs/_config.yml
CHANGED
@@ -1,13 +1,9 @@
|
|
1
|
-
|
1
|
+
remote_theme: rundocs/jekyll-rtd-theme
|
2
|
+
|
2
3
|
title: Jekyll Picture Tag
|
4
|
+
description: Images for Jekyll, done correctly.
|
5
|
+
lang: en-US
|
3
6
|
|
4
|
-
url: ''
|
5
7
|
baseurl: '/jekyll_picture_tag'
|
6
|
-
|
7
|
-
|
8
|
-
-
|
9
|
-
scope:
|
10
|
-
path: ''
|
11
|
-
values:
|
12
|
-
layout: directory
|
13
|
-
|
8
|
+
readme_index:
|
9
|
+
with_frontmatter: true
|
@@ -0,0 +1,44 @@
|
|
1
|
+
---
|
2
|
+
sort: 4
|
3
|
+
---
|
4
|
+
|
5
|
+
# Code Guidelines
|
6
|
+
|
7
|
+
* Generally, go for straightforward and readable rather than terse and clever. I'm not actually a
|
8
|
+
very good programmer; I need simple code that's easy to understand.
|
9
|
+
|
10
|
+
* Refactoring is welcome, especially in the name of the previous point.
|
11
|
+
|
12
|
+
* I'm very reluctant to introduce breaking changes to configuration settings. This rule isn't
|
13
|
+
absolute, but I'm not going to do it without a good reason.
|
14
|
+
|
15
|
+
* Don't disable cops without strong justification.
|
16
|
+
|
17
|
+
* I generally try to write tests before writing code, especially when fixing bugs. This
|
18
|
+
gives us some confidence that what we think we're testing and what we're actually testing aren't
|
19
|
+
too different.
|
20
|
+
|
21
|
+
## Hard rules
|
22
|
+
|
23
|
+
These aren't the rules for submitting a pull request, these are the rules for merging into master.
|
24
|
+
I'm thrilled to receive any help at all, and I'm more than happy to help with meeting these
|
25
|
+
criteria:
|
26
|
+
|
27
|
+
* Liquid tag syntax can only be extended; no breaking changes. I'm not willing to force
|
28
|
+
users to dig through their entire site and change every picture tag in order to update to the
|
29
|
+
latest version.
|
30
|
+
|
31
|
+
* Maintain "no configuration required" - a new user must be able to add JPT to their gemfile, bundle
|
32
|
+
install, and start writing picture tags in their site without touching a yml file.
|
33
|
+
|
34
|
+
* 100% test coverage (Meaning that when running the unit and integration tests together, every line
|
35
|
+
of code in the `lib` folder must run at least once.)
|
36
|
+
|
37
|
+
* No failing tests
|
38
|
+
|
39
|
+
* No rubocop warnings
|
40
|
+
|
41
|
+
### Thanks!
|
42
|
+
|
43
|
+
As I said, don't let any of the rules & guidelines scare you away. They're the rules for merging
|
44
|
+
into master, not submitting a pull request. I'm thrilled to receive any help at all.
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sort: 2
|
3
|
+
---
|
4
|
+
|
5
|
+
# Docs
|
6
|
+
|
7
|
+
They run on github pages, which is based on jekyll. You can preview as you edit:
|
8
|
+
|
9
|
+
0. Follow the [setup instructions](setup)
|
10
|
+
1. `$ cd docs`
|
11
|
+
2. `$ bundle install`
|
12
|
+
3. `$ bundle exec jekyll serve`
|
13
|
+
4. In a web browser, navigate to `localhost:4000/jekyll_picture_tag/`
|
@@ -0,0 +1,15 @@
|
|
1
|
+
---
|
2
|
+
---
|
3
|
+
# Contributing
|
4
|
+
|
5
|
+
Bug reports, feature requests, and feedback are very welcome, either through
|
6
|
+
github issues or via email: robert@buchberger.cc
|
7
|
+
|
8
|
+
Pull requests are encouraged! I'm happy to answer questions and provide
|
9
|
+
assistance along the way. Don't let any of the recommendations/requests in this
|
10
|
+
guide stop you from submitting one.
|
11
|
+
|
12
|
+
I think one of the biggest opportunities for improvement in this plugin is its
|
13
|
+
documentation. I'd really love help here, and all you need to know is markdown.
|
14
|
+
|
15
|
+
{% include list.liquid %}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
---
|
2
|
+
sort: 3
|
3
|
+
---
|
4
|
+
|
5
|
+
## How to run the tests
|
6
|
+
|
7
|
+
You probably only need to use docker if it's inconvenient to install ImageMagick 7.
|
8
|
+
|
9
|
+
### Bare Metal
|
10
|
+
|
11
|
+
```note
|
12
|
+
Depending on your environment, you may need to prefix all rake commands with
|
13
|
+
`bundle exec`.
|
14
|
+
```
|
15
|
+
|
16
|
+
`rake test` runs the test suite (both unit tests and integration tests). Ignore the mini_magick
|
17
|
+
`method redefined` warnings (unless you know how to fix them?)
|
18
|
+
|
19
|
+
`rake unit` runs just the unit tests, while `rake integration` runs the integration tests. The unit
|
20
|
+
test coverage isn't stellar, but both unit and integration tests together hit 100%.
|
21
|
+
|
22
|
+
Speaking of coverage, simplecov is set up -- you'll get a measurement of coverage in the test output
|
23
|
+
and a nice report in the `coverage` directory. I'd like to move to mutation based coverage testing,
|
24
|
+
but that's a project for another day.
|
25
|
+
|
26
|
+
The tests do output a few images to the `/tmp/` directory, which I'm pretty sure means it won't work
|
27
|
+
on Windows. This is fixable if there is a need, so if that gets in your way just ask.
|
28
|
+
|
29
|
+
`rake rubocop` checks code formatting, `rake rubocop:auto_correct` will try to fix any rubocop
|
30
|
+
issues, if possible.
|
31
|
+
|
32
|
+
`rake` will run all tests and rubocop.
|
33
|
+
|
34
|
+
### Docker
|
35
|
+
|
36
|
+
The following commands will build and run the tests inside a docker image.
|
37
|
+
|
38
|
+
```bash
|
39
|
+
$ docker build . -t jpt
|
40
|
+
$ docker run -t jpt
|
41
|
+
```
|
data/docs/devs/index.md
ADDED
@@ -1,11 +1,17 @@
|
|
1
1
|
---
|
2
2
|
---
|
3
3
|
# Release History
|
4
|
+
* 1.12.0 July 30, 2020
|
5
|
+
* Documentation overhaul. Now with 87% less scrolling!
|
6
|
+
* Rename `markup_presets` and `media_presets` to `presets` and
|
7
|
+
`media_queries`. The old names were bad and caused confusion. The old names
|
8
|
+
will continue to work until the next major version is released.
|
4
9
|
* 1.11.0 July 27, 2020
|
5
10
|
* **Width and height attribute support!** Begone, page reflow.
|
6
11
|
* Cache image information between builds
|
7
|
-
* Change image naming format. This update will trigger all images to be
|
8
|
-
want to delete your generated images folder
|
12
|
+
* Change image naming format. This update will trigger all images to be
|
13
|
+
regenerated, so you may want to delete your generated images folder
|
14
|
+
beforehand.
|
9
15
|
* 1.10.2 July 6, 2020
|
10
16
|
* Bugfix for fallback image files not actually getting generated
|
11
17
|
* 1.10.1 July 2, 2020
|
@@ -17,23 +23,25 @@
|
|
17
23
|
* 1.9.0 Feb 2, 2020
|
18
24
|
* Add `fast_build` global setting
|
19
25
|
* Add `disabled` global setting
|
20
|
-
* Reduce unnecessary disk IO; sites with many source images should see build
|
21
|
-
|
22
|
-
* Add support for empty attributes; specifically so best-practice for
|
23
|
-
is possible.
|
26
|
+
* Reduce unnecessary disk IO; sites with many source images should see build
|
27
|
+
times improve when no new images need to be generated.
|
28
|
+
* Add support for empty attributes; specifically so best-practice for
|
29
|
+
decorative images (`alt=""`) is possible.
|
24
30
|
* 1.8.0 Nov 25, 2019
|
25
31
|
* Add `data_sizes` setting for the `data_` family of output formats.
|
26
32
|
* 1.7.1 Nov 14, 2019
|
27
33
|
* Fix some HTML attribute related bugs
|
28
34
|
* Add a few items to the FAQ
|
29
35
|
* 1.7.0 Aug 12, 2019
|
30
|
-
* Add support for setting generated image quality, either generally or
|
31
|
-
formats.
|
36
|
+
* Add support for setting generated image quality, either generally or
|
37
|
+
specific to given formats.
|
32
38
|
* Add support for spaces and other url-encoded characters in filenames
|
33
|
-
* Documentation restructure - Moved it out of the wiki, into the `docs`
|
39
|
+
* Documentation restructure - Moved it out of the wiki, into the `docs`
|
40
|
+
folder.
|
34
41
|
* Bugfix: Fallback image width will now be checked against source image width.
|
35
42
|
* Bugfix: Minor fix to nomarkdown wrapper output
|
36
|
-
* link_source will now target the base source image, rather than finding the
|
43
|
+
* link_source will now target the base source image, rather than finding the
|
44
|
+
biggest one.
|
37
45
|
* Remove fastimage dependency, add addressable dependency.
|
38
46
|
* Moderately significant refactoring and code cleanup
|
39
47
|
* Decent set of tests added
|
@@ -44,14 +52,15 @@
|
|
44
52
|
* better `{::nomarkdown}` necessity detection
|
45
53
|
* allow user to override `{::nomarkdown}` autodetection
|
46
54
|
* 1.4.0 Jun 26, 2019:
|
47
|
-
* Rename gem from `jekyll-picture-tag` to `jekyll_picture_tag`, allowing us to
|
55
|
+
* Rename gem from `jekyll-picture-tag` to `jekyll_picture_tag`, allowing us to
|
56
|
+
use rubygems again.
|
48
57
|
* Add new output format: `naked_srcset`.
|
49
58
|
* 1.3.1 Jun 21, 2019: Bugfix
|
50
59
|
* 1.3.0 Jun 7, 2019:
|
51
60
|
* Initial compatibility with Jekyll 4.0
|
52
61
|
* bugfixes
|
53
|
-
* change to generated image naming-- The first build after this update will be
|
54
|
-
might want to clear out your generated images.
|
62
|
+
* change to generated image naming-- The first build after this update will be
|
63
|
+
longer, and you might want to clear out your generated images.
|
55
64
|
* 1.2.0 Feb 9, 2019:
|
56
65
|
* Add nomarkdown fix
|
57
66
|
* noscript option
|
@@ -62,7 +71,8 @@
|
|
62
71
|
* auto-orient images before stripping metadata
|
63
72
|
* 1.0.2 Jan 18, 2019: Fix ruby version specification
|
64
73
|
* 1.0.1 Jan 13, 2019: Added ruby version checking
|
65
|
-
* **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the
|
74
|
+
* **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the
|
75
|
+
* [migration guide]({{ site.baseurl }}/users/notes/migration).
|
66
76
|
* 0.2.2 Aug 2, 2013: Bugfixes
|
67
77
|
* 0.2.1 Jul 17, 2013: Refactor again, add Liquid parsing.
|
68
78
|
* 0.2.0 Jul 14, 2013: Rewrite code base, bring in line with Jekyll Image Tag.
|
data/docs/index.md
CHANGED
@@ -1,12 +1,15 @@
|
|
1
1
|
---
|
2
|
-
id: quickstart
|
3
2
|
---
|
4
3
|
|
5
|
-
#
|
4
|
+
# Jekyll Picture Tag
|
5
|
+
|
6
|
+
Responsive Images, Done Correctly.
|
7
|
+
|
8
|
+
## Quick start / Demo
|
6
9
|
|
7
10
|
**All configuration is optional.** Here's the simplest possible use case:
|
8
11
|
|
9
|
-
1. [Install]({{ site.baseurl }}/installation)
|
12
|
+
1. [Install]({{ site.baseurl }}/users/installation)
|
10
13
|
|
11
14
|
2. Write this: {% raw %} `{% picture test.jpg %}` {% endraw %}
|
12
15
|
|
@@ -31,24 +34,31 @@ id: quickstart
|
|
31
34
|
Create `_data/picture.yml`, add the following:
|
32
35
|
|
33
36
|
```yml
|
34
|
-
|
37
|
+
presets:
|
35
38
|
default:
|
36
39
|
formats: [webp, original]
|
37
40
|
```
|
38
|
-
|
41
|
+
|
42
|
+
**Note:** Order matters! `[webp, jpg]` will offer webp-images first. The
|
43
|
+
browser will pick the *first* format it can work with. So if the order is
|
44
|
+
reversed `[jpg, webp]` it will use the jpg image before the webp.
|
39
45
|
|
40
46
|
### Here's a more complete demonstration:
|
41
47
|
|
42
|
-
[Presets]({{ site.baseurl }}/presets) are named collections of settings
|
43
|
-
|
44
|
-
|
45
|
-
|
48
|
+
[Presets]({{ site.baseurl }}/users/presets) are named collections of settings.
|
49
|
+
You choose one with the second [tag
|
50
|
+
parameter]({{site.baseurl}}/users/liquid_tag), or omit for the `default` (as in
|
51
|
+
these examples). They are located in `_data/picture.yml`. Alongside `presets`,
|
52
|
+
we also set named `media_queries` for easy reference. Here's an example:
|
53
|
+
|
46
54
|
|
47
55
|
```yml
|
48
|
-
|
56
|
+
# _data/picture.yml
|
57
|
+
|
58
|
+
media_queries:
|
49
59
|
mobile: 'max-width: 600px'
|
50
60
|
|
51
|
-
|
61
|
+
presets:
|
52
62
|
default:
|
53
63
|
widths: [600, 900, 1200]
|
54
64
|
formats: [webp, original]
|
@@ -57,9 +67,9 @@ markup_presets:
|
|
57
67
|
size: 500px
|
58
68
|
```
|
59
69
|
|
60
|
-
Imagemagick can easily crop images to an aspect ratio, though you should **read
|
61
|
-
installation guide before using this feature**. With the above preset,
|
62
|
-
|
70
|
+
Imagemagick can easily crop images to an aspect ratio, though you should **read
|
71
|
+
the whole installation guide before using this feature**. With the above preset,
|
72
|
+
if you write this:
|
63
73
|
|
64
74
|
{% raw %}
|
65
75
|
`{% picture test.jpg 3:2 mobile: test2.jpg 1:1 --alt Alternate Text %}`
|
@@ -72,43 +82,49 @@ You'll get something like this:
|
|
72
82
|
|
73
83
|
<picture>
|
74
84
|
<source
|
75
|
-
|
85
|
+
type="image/webp"
|
76
86
|
media="(max-width: 600px)"
|
87
|
+
sizes="(max-width: 600px) 80vw, 600px"
|
77
88
|
srcset="
|
78
89
|
/generated/test2-600-21bb6fGUW.webp 600w,
|
79
90
|
/generated/test2-900-21bb6fGUW.webp 900w,
|
80
91
|
/generated/test2-1200-21bb6fGUW.webp 1200w
|
81
|
-
"
|
82
|
-
type="image/webp">
|
92
|
+
">
|
83
93
|
<source
|
94
|
+
type="image/webp"
|
84
95
|
sizes="(max-width: 600px) 80vw, 600px"
|
85
96
|
srcset="
|
86
97
|
/generated/test-600-195f7d192.webp 600w,
|
87
98
|
/generated/test-900-195f7d192.webp 900w,
|
88
99
|
/generated/test-1200-195f7d192.webp 1200w
|
89
|
-
"
|
90
|
-
type="image/webp">
|
100
|
+
">
|
91
101
|
<source
|
92
|
-
|
102
|
+
type="image/jpeg"
|
93
103
|
media="(max-width: 600px)"
|
104
|
+
sizes="(max-width: 600px) 80vw, 600px"
|
94
105
|
srcset="
|
95
106
|
/generated/test2-600-21bb6fGUW.jpg 600w,
|
96
107
|
/generated/test2-900-21bb6fGUW.jpg 900w,
|
97
108
|
/generated/test2-1200-21bb6fGUW.jpg 1200w
|
98
|
-
"
|
99
|
-
type="image/jpeg">
|
109
|
+
">
|
100
110
|
<source
|
111
|
+
type="image/jpeg"
|
101
112
|
sizes="(max-width: 600px) 80vw, 600px"
|
102
113
|
srcset="
|
103
114
|
/generated/test-600-195f7d192.jpg 600w,
|
104
115
|
/generated/test-900-195f7d192.jpg 900w,
|
105
116
|
/generated/test-1200-195f7d192.jpg 1200w
|
106
|
-
"
|
107
|
-
type="image/jpeg">
|
117
|
+
">
|
108
118
|
<img src="/generated/test-800-195f7dGUW.jpg" alt="Alternate Text">
|
109
119
|
</picture>
|
110
120
|
```
|
111
121
|
|
112
|
-
In other words, you have the art direction, format switching, and resolution
|
113
|
-
*solved*, with a one-liner and a nicely readable config file
|
114
|
-
markup. Lighthouse is happy, and you don't
|
122
|
+
In other words, you have the art direction, format switching, and resolution
|
123
|
+
switching problems *solved*, with a one-liner and a nicely readable config file
|
124
|
+
that is 1/3 as long as the output markup. Lighthouse is happy, and you don't
|
125
|
+
even need to crop things yourself.
|
126
|
+
|
127
|
+
That isn't a complete demonstration of Jekyll Picture Tag's feature set; it can
|
128
|
+
(among other things) add width & height attributes to prevent page reflow, add a
|
129
|
+
link to the source image (or anywhere else), and adjust image quality. See the
|
130
|
+
docs for more.
|