jekyll_img 0.2.1 → 0.2.2
Sign up to get free protection for your applications and to get access to all the features.
- 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.
|