jekyll_img 0.2.0 → 0.2.2

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: 4f1c3ada28bfae9fa70ff421baa912391a64af4c156055e0f40438d6219c986b
4
- data.tar.gz: 6915f59b67c6c0de7d91821553b4ecb7f246596f295d128ba6a850b6ddfb35af
3
+ metadata.gz: a10a11e6cb03e677c6d6098d8a279435f15b2dc03cd81814526a5ebb3f7af367
4
+ data.tar.gz: 2bf8aa36d93a53b7f9b39545cf76429eb84ba27484075f33b4589d0c604e59f1
5
5
  SHA512:
6
- metadata.gz: 0c8281613ba38488ce8b32ac074abca3ce3ed7310d0fd70a0f6d78c87039b66a40b25775172ff88e910dcdb09cd9b78549bf4a1773a982e5a8c23f2109679f0d
7
- data.tar.gz: 8ada70004b3b1328372f2675ed7b80edf1c6b9a1b2fdd44154a2ad40af1d9d1a64bbda2d53034394c860b79fd9489b74de4dd4542f9daf6db6be534df13e7c85
6
+ metadata.gz: 9dd14b201c72f52997f8dac7bb55900fc0ae41754fb00a0dd75578f5d4dab2db8cdb5e106c495a02619c1e33ca5b14833f9ced60fbe30964b5ba39a44f0de81f
7
+ data.tar.gz: 3f8ed134b38ddb608a1332eaed49eed3bf1fd97378c3f19c39bd0ab9c75b2497da8f32c14ab09b1092ffe26e4669f85120ff0251786b89b399b32d08be2dfd4e
data/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
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
+
8
+ ## 0.2.1 / 2023-11-28
9
+
10
+ * Took care of the inevitable blunder when making too many changes
11
+
12
+
3
13
  ## 0.2.0 / 2023-11-20
4
14
 
5
15
  * The [demo/](demo/) webapp has been upgraded to the latest features.
@@ -16,6 +26,7 @@
16
26
  pry_on_img_error: true
17
27
  ```
18
28
 
29
+
19
30
  ## 0.1.6 / 2023-08-10
20
31
 
21
32
  * `.webp` file type is assumed and no longer needs to be specified.
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
 
@@ -87,10 +93,10 @@ class ImgProperties
87
93
  @src += '.webp' if filetype.empty?
88
94
 
89
95
  @src = "/assets/images/#{@src}" unless ImgProperties.local_path?(@src) || url?(@src)
90
- return unless ImgProperties.local_path?(@src)
96
+ # return unless ImgProperties.local_path?(@src)
91
97
 
92
- src = @src.start_with?('/') ? ".#{@src}" : @src
93
- raise Jekyll::ImgError, "#{@src} does not exist" unless File.exist?(src)
98
+ # src = @src.start_with?('/') ? ".#{@src}" : @src
99
+ # raise Jekyll::ImgError, "#{@src} does not exist" unless File.exist?(src)
94
100
  end
95
101
 
96
102
  UNITS = %w[Q ch cm em dvh dvw ex in lh lvh lvw mm pc px pt rem rlh svh svw vb vh vi vmax vmin vw %].freeze
@@ -1,3 +1,3 @@
1
1
  module JekyllImgVersion
2
- VERSION = '0.2.0'.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.0
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-22 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.7
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.