jekyll_img 0.2.1 → 0.2.2
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/CHANGELOG.md +5 -0
- data/README.md +62 -14
- data/lib/img_builder.rb +15 -1
- data/lib/img_props.rb +6 -0
- data/lib/jekyll_img/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a10a11e6cb03e677c6d6098d8a279435f15b2dc03cd81814526a5ebb3f7af367
|
|
4
|
+
data.tar.gz: 2bf8aa36d93a53b7f9b39545cf76429eb84ba27484075f33b4589d0c604e59f1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9dd14b201c72f52997f8dac7bb55900fc0ae41754fb00a0dd75578f5d4dab2db8cdb5e106c495a02619c1e33ca5b14833f9ced60fbe30964b5ba39a44f0de81f
|
|
7
|
+
data.tar.gz: 3f8ed134b38ddb608a1332eaed49eed3bf1fd97378c3f19c39bd0ab9c75b2497da8f32c14ab09b1092ffe26e4669f85120ff0251786b89b399b32d08be2dfd4e
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
|
@@ -4,27 +4,38 @@
|
|
|
4
4
|
`Jekyll_img` is a Jekyll plugin that embeds images in HTML documents, with alignment options,
|
|
5
5
|
flexible resizing, default styling, overridable styling, an optional caption, and an optional URL.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Muliple image formats are supported for each image.
|
|
8
|
+
The user’s web browser determines the formats which it will accept.
|
|
9
|
+
The most desirable formats that the web browser supports are prioritized.
|
|
10
|
+
|
|
11
|
+
I explain why the `webp` image format is important in
|
|
12
|
+
[Converting All Images in a Website to `webp` Format](https://mslinn.com/blog/2020/08/15/converting-all-images-to-webp-format.html).
|
|
13
|
+
That article also provides 2 bash scripts for converting existing images to and from <code>webp</code> format.
|
|
14
|
+
|
|
15
|
+
For example, if an image is encloded in `webp`, `png` and `gif` filetypes,
|
|
16
|
+
and the user’s web browser is relatively recent,
|
|
17
|
+
then `webp` format will give the fastest transmission and look best.
|
|
18
|
+
Older browsers, which might not support `webp` format,
|
|
19
|
+
would give best results for `png` format.
|
|
20
|
+
Really old web browsers would only support the `gif` file type.
|
|
21
|
+
|
|
8
22
|
Please read the next section for details.
|
|
9
|
-
If you have a use case that would benefit from expanding the supported file types,
|
|
10
|
-
please describe your use case on the [issue tracker](https://github.com/mslinn/jekyll_img/issues/5).
|
|
11
23
|
|
|
12
24
|
See [demo/index.html](demo/index.html) for examples.
|
|
13
25
|
|
|
14
26
|
|
|
15
27
|
## Image Fallback
|
|
16
28
|
|
|
17
|
-
This plugin provides support for
|
|
18
|
-
|
|
19
|
-
with a fallback to `png` format by using the HTML
|
|
29
|
+
This plugin provides support for many image formats,
|
|
30
|
+
fallbacks to less performant formats by using the HTML
|
|
20
31
|
[`picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
|
|
21
32
|
|
|
22
|
-
This means that
|
|
33
|
+
This means that at least one version of every image are required.
|
|
23
34
|
|
|
24
|
-
You specify the desired image with a `webp` filetype
|
|
25
|
-
|
|
35
|
+
You could specify the desired image with a `webp` filetype, or you could specify no filetype.
|
|
36
|
+
The plugin would generate a `picture` element that contains a primary
|
|
26
37
|
`source` sub-element that specifies the given image URL,
|
|
27
|
-
and
|
|
38
|
+
and secondary `img` sub-element with all other supported filetypes.
|
|
28
39
|
|
|
29
40
|
For example, these two invocations yield the same result:
|
|
30
41
|
|
|
@@ -38,16 +49,51 @@ The above generates the following
|
|
|
38
49
|
|
|
39
50
|
```html
|
|
40
51
|
<picture>
|
|
52
|
+
<source srcset="blah.svg" type="image/svg" />
|
|
41
53
|
<source srcset="blah.webp" type="image/webp" />
|
|
42
|
-
<source srcset="blah.
|
|
54
|
+
<source srcset="blah.apng" type="image/apng">
|
|
55
|
+
<source srcset="blah.png" type="image/png">
|
|
56
|
+
<source srcset="blah.jpg" type="image/jpeg">
|
|
57
|
+
<source srcset="blah.jpeg" type="image/jpeg">
|
|
58
|
+
<source srcset="blah.jfif" type="image/jpeg">
|
|
59
|
+
<source srcset="blah.pjpeg" type="image/jpeg">
|
|
60
|
+
<source srcset="blah.pjp" type="image/jpeg">
|
|
61
|
+
<source srcset="blah.gif" type="image/gif">
|
|
62
|
+
<source srcset="blah.tif" type="image/tiff">
|
|
63
|
+
<source srcset="blah.tiff" type="image/tiff">
|
|
64
|
+
<source srcset="blah.bmp" type="image/bmp">
|
|
65
|
+
<source srcset="blah.ico" type="image/x-icon">
|
|
66
|
+
<source srcset="blah.cur" type="image/x-icon">
|
|
43
67
|
<img src="blah.png" />
|
|
44
68
|
</picture>
|
|
45
69
|
```
|
|
46
70
|
|
|
47
|
-
|
|
71
|
+
If both `blah.webp` and `blah.png` were available,
|
|
72
|
+
the above would fetch and display `blah.webp` if the web browser supported `webp` format,
|
|
48
73
|
otherwise it would fetch and display `blah.png`.
|
|
49
74
|
|
|
50
75
|
|
|
76
|
+
## Supported Filetypes
|
|
77
|
+
|
|
78
|
+
The following are listed in order of priority.
|
|
79
|
+
See [MDN](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) for more information.
|
|
80
|
+
|
|
81
|
+
| Filetype | MIME type |
|
|
82
|
+
| ------------------------------------- | --------------- |
|
|
83
|
+
| `svg` | `image/svg+xml` |
|
|
84
|
+
| `avif` | `image/avif` |
|
|
85
|
+
| `webp` | `image/webp` |
|
|
86
|
+
| `apng` | `image/apng` |
|
|
87
|
+
| `png` | `image/png` |
|
|
88
|
+
| `jpg`, `jpeg`, `jfif`, `pjpeg`, `pjp` | `image/jpeg` |
|
|
89
|
+
| `gif` | `image/gif` |
|
|
90
|
+
| `tif`, `tiff` | `image/tiff` |
|
|
91
|
+
| `bmp` | `image/bmp` |
|
|
92
|
+
| `ico`, `cur` | `image/x-icon` |
|
|
93
|
+
|
|
94
|
+
Because `avif` is problematic as of 2024-01-08 on Firefox, Chrome and Safari, it is not supported yet.
|
|
95
|
+
|
|
96
|
+
|
|
51
97
|
## Demo
|
|
52
98
|
|
|
53
99
|
Run the demo website by typing:
|
|
@@ -207,11 +253,13 @@ jekyll_img (0.1.0)
|
|
|
207
253
|
|
|
208
254
|
### Debugging
|
|
209
255
|
|
|
210
|
-
You can cause `pry` to open when an `ImgError` is raised by setting
|
|
256
|
+
You can cause `pry` to open when an `ImgError` is raised by setting `pry_on_img_error` in `_config.yml`.
|
|
257
|
+
`Pry_on_img_error` has priority `die_on_img_error`.
|
|
211
258
|
|
|
212
259
|
```yaml
|
|
213
260
|
jekyll_img:
|
|
214
|
-
|
|
261
|
+
die_on_img_error: false # Default value is false
|
|
262
|
+
pry_on_img_error: true # Default value is false
|
|
215
263
|
```
|
|
216
264
|
|
|
217
265
|
|
data/lib/img_builder.rb
CHANGED
|
@@ -62,8 +62,22 @@ class ImgBuilder
|
|
|
62
62
|
img_classes = @props.classes || 'rounded shadow'
|
|
63
63
|
<<~END_IMG
|
|
64
64
|
<picture#{@props.attr_id} class='imgPicture'>
|
|
65
|
+
<source srcset="#{@props.src_any 'svg'}" type="image/svg">
|
|
66
|
+
<!---<source srcset="#{@props.src_any 'avif'}" type="image/avif">-->
|
|
65
67
|
<source srcset="#{@props.src}" type="image/webp">
|
|
66
|
-
<source srcset="#{@props.
|
|
68
|
+
<source srcset="#{@props.src_any 'apng'}" type="image/apng">
|
|
69
|
+
<source srcset="#{@props.src_any 'png'}" type="image/png">
|
|
70
|
+
<source srcset="#{@props.src_any 'jpg'}" type="image/jpeg">
|
|
71
|
+
<source srcset="#{@props.src_any 'jpeg'}" type="image/jpeg">
|
|
72
|
+
<source srcset="#{@props.src_any 'jfif'}" type="image/jpeg">
|
|
73
|
+
<source srcset="#{@props.src_any 'pjpeg'}" type="image/jpeg">
|
|
74
|
+
<source srcset="#{@props.src_any 'pjp'}" type="image/jpeg">
|
|
75
|
+
<source srcset="#{@props.src_any 'gif'}" type="image/gif">
|
|
76
|
+
<source srcset="#{@props.src_any 'tif'}" type="image/tiff">
|
|
77
|
+
<source srcset="#{@props.src_any 'tiff'}" type="image/tiff">
|
|
78
|
+
<source srcset="#{@props.src_any 'bmp'}" type="image/bmp">
|
|
79
|
+
<source srcset="#{@props.src_any 'ico'}" type="image/x-icon">
|
|
80
|
+
<source srcset="#{@props.src_any 'cur'}" type="image/x-icon">
|
|
67
81
|
<img #{@props.attr_alt}
|
|
68
82
|
class="imgImg #{img_classes.squish}"
|
|
69
83
|
src="#{@props.src_png}"
|
data/lib/img_props.rb
CHANGED
|
@@ -66,6 +66,12 @@ class ImgProperties
|
|
|
66
66
|
@title ||= @caption || @alt
|
|
67
67
|
end
|
|
68
68
|
|
|
69
|
+
def src_any(filetype)
|
|
70
|
+
raise Jekyll::ImgError, "The 'src' parameter was not specified" if @src.to_s.empty?
|
|
71
|
+
|
|
72
|
+
@src.gsub('.webp', ".#{filetype}")
|
|
73
|
+
end
|
|
74
|
+
|
|
69
75
|
def src_png
|
|
70
76
|
raise Jekyll::ImgError, "The 'src' parameter was not specified" if @src.to_s.empty?
|
|
71
77
|
|
data/lib/jekyll_img/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll_img
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mike Slinn
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2024-01-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -86,7 +86,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
86
86
|
- !ruby/object:Gem::Version
|
|
87
87
|
version: '0'
|
|
88
88
|
requirements: []
|
|
89
|
-
rubygems_version: 3.
|
|
89
|
+
rubygems_version: 3.4.22
|
|
90
90
|
signing_key:
|
|
91
91
|
specification_version: 4
|
|
92
92
|
summary: Provides a Jekyll tag that generates images.
|