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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cda0815bbb89ab7db7f1d92af07d01f5aab7790ed1f8f7583b7745c2f0036b0e
4
- data.tar.gz: 4714cf51a294939e1ac1145b37ca713c3e00ca0a61f868924fca5fe407109458
3
+ metadata.gz: a10a11e6cb03e677c6d6098d8a279435f15b2dc03cd81814526a5ebb3f7af367
4
+ data.tar.gz: 2bf8aa36d93a53b7f9b39545cf76429eb84ba27484075f33b4589d0c604e59f1
5
5
  SHA512:
6
- metadata.gz: 7d01edb16a9d8339ba70a43a4d0634c898bab22c9b4b2bb9835ceebabe1fe39d9fbe2f69bfe01e50a9f2acf0312e7b62f73a2163d70bba11d7aa428c6a7fe24c
7
- data.tar.gz: cc4b935393c9cae21468c12214c8b9f2de6dcdb9ac749651ee3f51d8a8ddece1da641f09be85982e9074fafccc76fb8d954d0402c8f0b79cf4f4e27653828d25
6
+ metadata.gz: 9dd14b201c72f52997f8dac7bb55900fc0ae41754fb00a0dd75578f5d4dab2db8cdb5e106c495a02619c1e33ca5b14833f9ced60fbe30964b5ba39a44f0de81f
7
+ data.tar.gz: 3f8ed134b38ddb608a1332eaed49eed3bf1fd97378c3f19c39bd0ab9c75b2497da8f32c14ab09b1092ffe26e4669f85120ff0251786b89b399b32d08be2dfd4e
data/CHANGELOG.md CHANGED
@@ -1,5 +1,10 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.2.2 / 2024-01-08
4
+
5
+ * Added support for all image types except `avif`.
6
+
7
+
3
8
  ## 0.2.1 / 2023-11-28
4
9
 
5
10
  * Took care of the inevitable blunder when making too many changes
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
- If you are not using `webp` images in your Jekyll website, this plugin is not for you.
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&rsquo;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 the
18
- [`webp`](https://developers.google.com/speed/webp) image format,
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 2 versions of every image are required: a `webp` version, and a `png` version.
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 (or no filetype),
25
- and the plugin generates a `picture` element that contains a primary
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 a secondary `img` sub-element with a [`png`](https://en.wikipedia.org/wiki/PNG) filetype.
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.png" type="image/png" />
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
- The above would fetch and display `blah.webp` if the web browser supported `webp` format,
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 the following in `_config.yml`:
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
- pry_on_img_error: true
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.src_png}" type="image/png">
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
 
@@ -1,3 +1,3 @@
1
1
  module JekyllImgVersion
2
- VERSION = '0.2.1'.freeze
2
+ VERSION = '0.2.2'.freeze
3
3
  end
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.1
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: 2023-11-28 00:00:00.000000000 Z
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.3.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.