jekyll_picture_tag 2.0.0pre1 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/docs/devs/releases.md +16 -11
- data/docs/index.md +6 -1
- data/docs/users/installation.md +2 -1
- data/docs/users/notes/migration_2.md +2 -2
- data/docs/users/presets/cropping.md +1 -1
- data/docs/users/presets/default.md +1 -1
- data/docs/users/presets/examples.md +2 -2
- data/docs/users/presets/fallback_image.md +1 -1
- data/docs/users/presets/html_attributes.md +1 -1
- data/docs/users/presets/image_formats.md +1 -1
- data/docs/users/presets/image_quality.md +4 -4
- data/docs/users/presets/index.md +2 -64
- data/docs/users/presets/link_source.md +1 -1
- data/docs/users/presets/media_queries.md +1 -1
- data/docs/users/presets/nomarkdown_override.md +1 -1
- data/docs/users/presets/pixel_ratio_srcsets.md +1 -1
- data/docs/users/presets/width_srcsets.md +1 -1
- data/docs/users/presets/writing_presets.md +65 -0
- data/jekyll_picture_tag.gemspec +1 -1
- data/lib/jekyll_picture_tag/version.rb +1 -1
- metadata +7 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3f9db202e681087ec43ee9cc26b3e32dbc76de45c394ea834039b72f100215e1
|
4
|
+
data.tar.gz: 2c195508efb7d9e05bda81dd529366f47fa25c5e1ce7bc6ca60edbd5e2db8a4f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fc17dcd0e8a5ffb70f3ca67bf22e8bb34b2e9c5af61ffabaf5e92e853b01bec6a0b56a01f45ccc44f55be11112aed75e04ac293e4d8012af3b135ce20aaa84fb
|
7
|
+
data.tar.gz: '09b01489bcd3dc1e7428ae41fe6f603488f1863cc731ad0d70f5861cb1c3525dda04f7445a9f97d22f005b5a900c8d6ba019467f7379575fe07c0370e9a0d8cb'
|
data/docs/devs/releases.md
CHANGED
@@ -1,23 +1,28 @@
|
|
1
1
|
---
|
2
2
|
---
|
3
3
|
# Release History
|
4
|
-
* **2.0** (
|
5
|
-
*
|
6
|
-
*
|
4
|
+
* **2.0** March 25, 2021 - [Migration guide](/jekyll_picture_tag/users/notes/migration_2)
|
5
|
+
* Switch from ImageMagick to libvips.
|
6
|
+
* 🚀🔥🔥**MUCH MORE FASTER**🔥🔥🚀
|
7
7
|
* Will still attempt to use imagemagick if libvips cannot handle a
|
8
8
|
particular image format.
|
9
9
|
* Eliminate the ImageMagick v7 on Ubuntu pain we've been dealing with for so
|
10
10
|
long.
|
11
|
-
* Require Ruby >= 2.6
|
11
|
+
* Require Ruby >= 2.6, support Ruby 3.0
|
12
12
|
* Require Jekyll >= 4.0
|
13
|
-
* Cropping is changing
|
14
|
-
|
15
|
-
|
16
|
-
|
13
|
+
* Cropping is changing.
|
14
|
+
* We now use the libvips
|
15
|
+
[smartcrop function](https://www.rubydoc.info/gems/ruby-vips/Vips/Image#smartcrop-instance_method),
|
16
|
+
which does some magic to keep the most useful part of the image.
|
17
|
+
* Geometry is renamed to 'crop', and reduced to simple aspect ratios only. (`width:height`)
|
18
|
+
* Gravity is gone, replaced by 'keep' which is translated to a libvips
|
19
|
+
[interestingness](https://www.rubydoc.info/gems/ruby-vips/Vips/Interesting) setting.
|
17
20
|
* Add stock presets and media queries, under the `jpt-` prefix.
|
21
|
+
* Add `format_quality` default settings for webp, avif, and jp2.
|
18
22
|
* Add image-format-specific write options.
|
19
23
|
* Overhaul user input handling; we can now validate inputs and give error
|
20
|
-
messages which are less useless. Stronger validation will be added in future
|
24
|
+
messages which are less useless. Stronger validation and nicer errors will be added in future
|
25
|
+
releases.
|
21
26
|
* Drop support for `markup_presets` and `media_presets`. They are now
|
22
27
|
officially and only `presets` and `media_queries`.
|
23
28
|
* Improve docs with an introductory tutorial and 'how-to' flow.
|
@@ -104,8 +109,8 @@
|
|
104
109
|
* auto-orient images before stripping metadata
|
105
110
|
* 1.0.2 Jan 18, 2019: Fix ruby version specification
|
106
111
|
* 1.0.1 Jan 13, 2019: Added ruby version checking
|
107
|
-
* **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the
|
108
|
-
|
112
|
+
* **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the [migration guide]({{ site.baseurl
|
113
|
+
}}/users/notes/migration_1).
|
109
114
|
* 0.2.2 Aug 2, 2013: Bugfixes
|
110
115
|
* 0.2.1 Jul 17, 2013: Refactor again, add Liquid parsing.
|
111
116
|
* 0.2.0 Jul 14, 2013: Rewrite code base, bring in line with Jekyll Image Tag.
|
data/docs/index.md
CHANGED
@@ -3,7 +3,12 @@
|
|
3
3
|
|
4
4
|
![](logo.svg)
|
5
5
|
|
6
|
-
|
6
|
+
_Responsive Images, Done Correctly._
|
7
|
+
|
8
|
+
**Note:** These docs are for versions >= 2.0. Documentation for the last stable 1.x version may be
|
9
|
+
found by browsing the repository,
|
10
|
+
[here](https://github.com/rbuchberger/jekyll_picture_tag/tree/v1.14.0/docs). This [migration
|
11
|
+
guide](users/notes/migration_2) documents how to upgrade an existing site.
|
7
12
|
|
8
13
|
## Quick start / Demo
|
9
14
|
|
data/docs/users/installation.md
CHANGED
@@ -25,7 +25,8 @@ sort: 1
|
|
25
25
|
3. Install `libvips`. Most package managers know about it, otherwise it can be found
|
26
26
|
[here](https://libvips.github.io/libvips/install.html).
|
27
27
|
4. Install libvips dependencies for all image formats you will use, such as `libpng`, `libwebp`,
|
28
|
-
`libjpeg`, and `libheif` (for avif).
|
28
|
+
`libjpeg`, and `libheif` (for avif). Note that if you use a deployment or CI service, these
|
29
|
+
dependencies will be required there as well.
|
29
30
|
5. Optional: Install `ImageMagick` for additional image formats. If vips runs into an image format
|
30
31
|
it can't handle (jp2 on my particular installation), JPT will instruct it to try ImageMagick
|
31
32
|
instead.
|
@@ -35,8 +35,8 @@ move now. Again, speak up if this causes a great deal of pain.
|
|
35
35
|
|
36
36
|
## Image quality & write options.
|
37
37
|
|
38
|
-
- If you have set `quality:` in a preset, it will
|
39
|
-
`format_quality:` instead.
|
38
|
+
- If you have set `quality:` in a preset, it will stop having an effect for webp, avif, and jp2
|
39
|
+
images. You need to set `format_quality:` instead.
|
40
40
|
|
41
41
|
Previously, all image formats used a default quality of 75. We have now set a default quality for 3
|
42
42
|
formats:
|
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
sort:
|
2
|
+
sort: 2
|
3
3
|
---
|
4
|
-
#
|
4
|
+
# Examples
|
5
5
|
|
6
6
|
The following example media queries & presets (except for `default`) are built-in with a `jpt-`
|
7
7
|
prefix. For example, the `desktop` media query below can be used with `jpt-desktop`, and the `webp`
|
@@ -1,5 +1,5 @@
|
|
1
1
|
---
|
2
|
-
sort:
|
2
|
+
sort: 8
|
3
3
|
---
|
4
4
|
|
5
5
|
# Image Quality & Options
|
@@ -75,8 +75,7 @@ _Example:_ `strip_metadata: false`
|
|
75
75
|
|
76
76
|
_Default:_ `true`
|
77
77
|
|
78
|
-
Remove EXIF data, which can save a few tens of kilobytes per image. This is set
|
79
|
-
per-format.
|
78
|
+
Remove EXIF data, which can save a few tens of kilobytes per image. This is set for all formats.
|
80
79
|
|
81
80
|
## Image Format Options
|
82
81
|
|
@@ -113,7 +112,8 @@ available for a given image format, search for the method `vips_(format)save` in
|
|
113
112
|
[this](https://libvips.github.io/libvips/API/current/VipsForeignSave.html) API documentation. For
|
114
113
|
example, png options can be found by searching for `vips_pngsave()`, leading
|
115
114
|
[here](https://libvips.github.io/libvips/API/current/VipsForeignSave.html#vips-pngsave). See the
|
116
|
-
optional arguments.
|
115
|
+
optional arguments. `avif`'s options are under `vips_heifsave()`,
|
116
|
+
[here](https://libvips.github.io/libvips/API/current/VipsForeignSave.html#vips-heifsave).
|
117
117
|
|
118
118
|
For all formats, note that
|
119
119
|
- `Q:` (quality) is handled by the settings above.
|
data/docs/users/presets/index.md
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
sort: 3
|
3
3
|
---
|
4
4
|
|
5
|
-
#
|
5
|
+
# Presets
|
6
6
|
|
7
7
|
Presets are named collections of settings that determine basically everything
|
8
8
|
about JPT's output. Think of them like frameworks that you can plug images into;
|
@@ -70,68 +70,6 @@ media_queries:
|
|
70
70
|
|
71
71
|
More information [here](media_queries).
|
72
72
|
|
73
|
-
##
|
74
|
-
|
75
|
-
### 0. Pick a name
|
76
|
-
|
77
|
-
* Preset names should be a single word, and they can't contain periods.
|
78
|
-
* `default` is used when you don't specify one in a liquid tag.
|
79
|
-
* Anything beginning with `jpt-` is off limits.
|
80
|
-
|
81
|
-
### 1. Pick a Markup Format
|
82
|
-
|
83
|
-
The high level, overall markup format is controlled with the `markup:` setting, documented
|
84
|
-
[here](markup_formats). You probably want the default setting of `auto`, unless you're doing some
|
85
|
-
form of post-processing.
|
86
|
-
|
87
|
-
If you have a lot of images below-the-fold, consider setting up lazy-loading with an appropriate
|
88
|
-
javascript library (there are tons) and `data_auto`.
|
89
|
-
|
90
|
-
### 2. Choose a srcset format.
|
91
|
-
|
92
|
-
For images that are different sizes on different screens (most images), use a [width-based
|
93
|
-
srcset](width_srcsets) (which is the default). When using this format, it's important to create a
|
94
|
-
sizes attribute, documented at the link above.
|
95
|
-
|
96
|
-
Use a [pixel-ratio srcset](pixel_ratio_srcsets) when the image will always be the same size,
|
97
|
-
regardless of screen width (thumbnails, avatars, icons, etc).
|
98
|
-
|
99
|
-
### 3. Choose a set of image widths.
|
100
|
-
|
101
|
-
For width-based srcsets, set `widths:`. For pixel-ratio srcsets, set `base_width:` and
|
102
|
-
`pixel_ratios:`. You want 3-6 sizes that cover a wide range of devices.
|
103
|
-
|
104
|
-
### 4. Choose a set of image formats.
|
105
|
-
|
106
|
-
Accomplish this by setting `formats: [format1, format2, etc...]`
|
107
|
-
|
108
|
-
* `webp` has [broad support](https://caniuse.com/?search=webp) and is an obvious choice.
|
109
|
-
* `avif` has [bad](https://caniuse.com/?search=avif) (but improving) support, and for some reason is slow to generate, but gets better
|
110
|
-
file sizes than webp.
|
111
|
-
* `jp2` is [Apple's baby](https://caniuse.com/?search=jp2).
|
112
|
-
* `original` spits out whatever you put in.
|
113
|
-
|
114
|
-
Order matters; browsers will use the first one they support.
|
115
|
-
|
116
|
-
* `[webp, original]` is a good compromise of build resources, support, and performance.
|
117
|
-
* `[webp, jp2, original]` brings Safari users along for the ride.
|
118
|
-
* `[avif, original]` If you don't care about browsers that aren't chrome, or build time.
|
119
|
-
* `[avif, webp, jp2, original]` might be overkill, but it keeps everyone happy.
|
120
|
-
|
121
|
-
### 5. Turn on dimension attributes.
|
122
|
-
|
123
|
-
This step prevents page reflow on image load (especially when lazy loading), but requires some prep.
|
124
|
-
|
125
|
-
1. Make sure your CSS is correct. You need something like `width: 100%` and `height: auto` (which
|
126
|
-
is why they aren't turned on by default.) Without this step, you'll get crazy sizes and/or
|
127
|
-
stretched images.
|
128
|
-
2. Set `dimension_attributes: true`
|
129
|
-
|
130
|
-
### 6. Make any other changes you need
|
131
|
-
|
132
|
-
Here's a list of all preset settings available:
|
73
|
+
## Reference
|
133
74
|
|
134
75
|
{% include list.liquid %}
|
135
|
-
|
136
|
-
(Note that the `data_*` output formats have a few special options, documented on their respective
|
137
|
-
pages.)
|
@@ -0,0 +1,65 @@
|
|
1
|
+
---
|
2
|
+
sort: 1
|
3
|
+
---
|
4
|
+
|
5
|
+
# How to write a preset
|
6
|
+
|
7
|
+
## 0. Pick a name
|
8
|
+
|
9
|
+
* Preset names should be a single word, and they can't contain periods.
|
10
|
+
* `default` is used when you don't specify one in a liquid tag.
|
11
|
+
* Anything beginning with `jpt-` is off limits.
|
12
|
+
|
13
|
+
## 1. Pick a Markup Format
|
14
|
+
|
15
|
+
The high level, overall markup format is controlled with the `markup:` setting, documented
|
16
|
+
[here](markup_formats). You probably want the default setting of `auto`, unless you're doing some
|
17
|
+
form of post-processing.
|
18
|
+
|
19
|
+
If you have a lot of images below-the-fold, consider setting up lazy-loading with an appropriate
|
20
|
+
javascript library (there are tons) and `data_auto`.
|
21
|
+
|
22
|
+
## 2. Choose a srcset format.
|
23
|
+
|
24
|
+
For images that are different sizes on different screens (most images), use a [width-based
|
25
|
+
srcset](width_srcsets) (which is the default). When using this format, it's important to create a
|
26
|
+
sizes attribute, documented at the link above.
|
27
|
+
|
28
|
+
Use a [pixel-ratio srcset](pixel_ratio_srcsets) when the image will always be the same size,
|
29
|
+
regardless of screen width (thumbnails, avatars, icons, etc).
|
30
|
+
|
31
|
+
## 3. Choose a set of image widths.
|
32
|
+
|
33
|
+
For width-based srcsets, set `widths:`. For pixel-ratio srcsets, set `base_width:` and
|
34
|
+
`pixel_ratios:`. You want 3-6 sizes that cover a wide range of devices.
|
35
|
+
|
36
|
+
## 4. Choose a set of image formats.
|
37
|
+
|
38
|
+
Accomplish this by setting `formats: [format1, format2, etc...]`
|
39
|
+
|
40
|
+
* `webp` has [broad support](https://caniuse.com/?search=webp) and is an obvious choice.
|
41
|
+
* `avif` has [bad](https://caniuse.com/?search=avif) (but improving) support, and for some reason is slow to generate, but gets better
|
42
|
+
file sizes than webp.
|
43
|
+
* `jp2` is [Apple's baby](https://caniuse.com/?search=jp2).
|
44
|
+
* `original` spits out whatever you put in.
|
45
|
+
|
46
|
+
Order matters; browsers will use the first one they support.
|
47
|
+
|
48
|
+
* `[webp, original]` is a good compromise of build resources, support, and performance.
|
49
|
+
* `[webp, jp2, original]` brings Safari users along for the ride.
|
50
|
+
* `[avif, original]` If you don't care about browsers that aren't chrome, or build time.
|
51
|
+
* `[avif, webp, jp2, original]` might be overkill, but it keeps everyone happy.
|
52
|
+
|
53
|
+
## 5. Consider enabling dimension attributes.
|
54
|
+
|
55
|
+
This step prevents page reflow on image load (especially when lazy loading), but requires some prep.
|
56
|
+
|
57
|
+
1. Make sure your CSS is correct. You need something like `width: 100%` and `height: auto` (which
|
58
|
+
is why they aren't turned on by default.) Without this step, you'll get crazy sizes and/or
|
59
|
+
stretched images.
|
60
|
+
2. Set `dimension_attributes: true`
|
61
|
+
|
62
|
+
## 6. Make any other necessary changes.
|
63
|
+
|
64
|
+
Look through the options in the sidebar to the left, adjust as required. Note that the `data_*`
|
65
|
+
output formats have a few special options, documented on their respective pages.
|
data/jekyll_picture_tag.gemspec
CHANGED
@@ -25,7 +25,7 @@ Gem::Specification.new do |spec|
|
|
25
25
|
f.match(%r{^(test)/})
|
26
26
|
end
|
27
27
|
|
28
|
-
spec.required_ruby_version = ['>= 2.6', '<
|
28
|
+
spec.required_ruby_version = ['>= 2.6', '< 4.0']
|
29
29
|
|
30
30
|
# addressable is used to url-encode image filenames.
|
31
31
|
spec.add_runtime_dependency 'addressable', '~> 2.6'
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jekyll_picture_tag
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.0.
|
4
|
+
version: 2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Robert Wierzbowski
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2021-03-
|
13
|
+
date: 2021-03-25 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: addressable
|
@@ -359,6 +359,7 @@ files:
|
|
359
359
|
- docs/users/presets/quality_width_graph.png
|
360
360
|
- docs/users/presets/width_height_attributes.md
|
361
361
|
- docs/users/presets/width_srcsets.md
|
362
|
+
- docs/users/presets/writing_presets.md
|
362
363
|
- docs/users/tutorial.md
|
363
364
|
- jekyll_picture_tag.gemspec
|
364
365
|
- lib/jekyll_picture_tag.rb
|
@@ -420,15 +421,15 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
420
421
|
version: '2.6'
|
421
422
|
- - "<"
|
422
423
|
- !ruby/object:Gem::Version
|
423
|
-
version: '
|
424
|
+
version: '4.0'
|
424
425
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
425
426
|
requirements:
|
426
|
-
- - "
|
427
|
+
- - ">="
|
427
428
|
- !ruby/object:Gem::Version
|
428
|
-
version:
|
429
|
+
version: '0'
|
429
430
|
requirements:
|
430
431
|
- libvips
|
431
|
-
rubygems_version: 3.
|
432
|
+
rubygems_version: 3.2.3
|
432
433
|
signing_key:
|
433
434
|
specification_version: 4
|
434
435
|
summary: Easy responsive images for Jekyll.
|