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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f7b9809326f283e0ec7db7ed8e4c9d142de92b5002e49e0addd75fff04c38d7d
4
- data.tar.gz: 2a9686f1e39a3812337b9f0bc33ec9368211d26e3dd9c4b1960936457e00154c
3
+ metadata.gz: 3f9db202e681087ec43ee9cc26b3e32dbc76de45c394ea834039b72f100215e1
4
+ data.tar.gz: 2c195508efb7d9e05bda81dd529366f47fa25c5e1ce7bc6ca60edbd5e2db8a4f
5
5
  SHA512:
6
- metadata.gz: 4710bd147e0973818f7eb846137b81bb8a90eae63da7a720ebe0802f323752631f3e487a7c5fac01d0ae655d3b0d7e82839206646e5abfe65de6c86166b25687
7
- data.tar.gz: 53cc71fff10a85c23bd80ad68478db2bd5e3c2fa2024d5bf1953b9975728b7ea739695f9da05a8aad248cde951b06939241c1f176b78c27602fa6499cc90f86d
6
+ metadata.gz: fc17dcd0e8a5ffb70f3ca67bf22e8bb34b2e9c5af61ffabaf5e92e853b01bec6a0b56a01f45ccc44f55be11112aed75e04ac293e4d8012af3b135ce20aaa84fb
7
+ data.tar.gz: '09b01489bcd3dc1e7428ae41fe6f603488f1863cc731ad0d70f5861cb1c3525dda04f7445a9f97d22f005b5a900c8d6ba019467f7379575fe07c0370e9a0d8cb'
@@ -1,23 +1,28 @@
1
1
  ---
2
2
  ---
3
3
  # Release History
4
- * **2.0** (TBD)
5
- * Move from ImageMagick to libvips.
6
- * **MUCH MORE FASTER**. Like a lot.
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; we now use vips' smartcrop function and an aspect
14
- ratio. No more geometry and gravity, just an aspect ratio and an
15
- optional interestingness (keep) setting.
16
- * Add `format_quality` default settings for webp, avif, and jp2.
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 releases.
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
- * [migration guide]({{ site.baseurl }}/users/notes/migration).
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
- Responsive Images, Done Correctly.
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
 
@@ -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 likely stop having an effect. You need to set
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,5 +1,5 @@
1
1
  ---
2
- sort: 6
2
+ sort: 7
3
3
  ---
4
4
 
5
5
  # Cropping
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 12
2
+ sort: 14
3
3
  ---
4
4
 
5
5
  # Default preset
@@ -1,7 +1,7 @@
1
1
  ---
2
- sort: 1
2
+ sort: 2
3
3
  ---
4
- # Example presets
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: 10
2
+ sort: 11
3
3
  ---
4
4
 
5
5
  # Fallback Image
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 9
2
+ sort: 10
3
3
  ---
4
4
 
5
5
  # Arbitrary HTML Attributes
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 3
2
+ sort: 4
3
3
  ---
4
4
 
5
5
  # Image Formats
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 7
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 globally, not
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.
@@ -2,7 +2,7 @@
2
2
  sort: 3
3
3
  ---
4
4
 
5
- # Writing Presets
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
- ## How to write a preset
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.)
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 11
2
+ sort: 12
3
3
  ---
4
4
 
5
5
  # Source Image Link
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 2
2
+ sort: 3
3
3
  ---
4
4
 
5
5
  # Media Queries
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 12
2
+ sort: 13
3
3
  ---
4
4
 
5
5
  # Nomarkdown Override
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 5
2
+ sort: 6
3
3
  ---
4
4
 
5
5
  # Pixel Ratio Srcsets
@@ -1,5 +1,5 @@
1
1
  ---
2
- sort: 4
2
+ sort: 5
3
3
  ---
4
4
 
5
5
  # Width Based Srcsets
@@ -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.
@@ -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', '< 3']
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'
@@ -1,3 +1,3 @@
1
1
  module PictureTag
2
- VERSION = '2.0.0pre1'.freeze
2
+ VERSION = '2.0.0'.freeze
3
3
  end
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.0pre1
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-24 00:00:00.000000000 Z
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: '3'
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: 1.3.1
429
+ version: '0'
429
430
  requirements:
430
431
  - libvips
431
- rubygems_version: 3.0.3
432
+ rubygems_version: 3.2.3
432
433
  signing_key:
433
434
  specification_version: 4
434
435
  summary: Easy responsive images for Jekyll.