jekyll_img 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f1c3ada28bfae9fa70ff421baa912391a64af4c156055e0f40438d6219c986b
-  data.tar.gz: 6915f59b67c6c0de7d91821553b4ecb7f246596f295d128ba6a850b6ddfb35af
+  metadata.gz: a10a11e6cb03e677c6d6098d8a279435f15b2dc03cd81814526a5ebb3f7af367
+  data.tar.gz: 2bf8aa36d93a53b7f9b39545cf76429eb84ba27484075f33b4589d0c604e59f1
 SHA512:
-  metadata.gz: 0c8281613ba38488ce8b32ac074abca3ce3ed7310d0fd70a0f6d78c87039b66a40b25775172ff88e910dcdb09cd9b78549bf4a1773a982e5a8c23f2109679f0d
-  data.tar.gz: 8ada70004b3b1328372f2675ed7b80edf1c6b9a1b2fdd44154a2ad40af1d9d1a64bbda2d53034394c860b79fd9489b74de4dd4542f9daf6db6be534df13e7c85
+  metadata.gz: 9dd14b201c72f52997f8dac7bb55900fc0ae41754fb00a0dd75578f5d4dab2db8cdb5e106c495a02619c1e33ca5b14833f9ced60fbe30964b5ba39a44f0de81f
+  data.tar.gz: 3f8ed134b38ddb608a1332eaed49eed3bf1fd97378c3f19c39bd0ab9c75b2497da8f32c14ab09b1092ffe26e4669f85120ff0251786b89b399b32d08be2dfd4e

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 0.2.2 / 2024-01-08
+
+* Added support for all image types except `avif`.
+
+
+## 0.2.1 / 2023-11-28
+
+* Took care of the inevitable blunder when making too many changes
+
+
 ## 0.2.0 / 2023-11-20
 
 * The [demo/](demo/) webapp has been upgraded to the latest features.
@@ -16,6 +26,7 @@
     pry_on_img_error: true
   ```
 
+
 ## 0.1.6 / 2023-08-10
 
 * `.webp` file type is assumed and no longer needs to be specified.

data/README.md

@@ -4,27 +4,38 @@
 `Jekyll_img` is a Jekyll plugin that embeds images in HTML documents, with alignment options,
 flexible resizing, default styling, overridable styling, an optional caption, and an optional URL.
 
-If you are not using `webp` images in your Jekyll website, this plugin is not for you.
+Muliple image formats are supported for each image.
+The user’s web browser determines the formats which it will accept.
+The most desirable formats that the web browser supports are prioritized.
+
+I explain why the `webp` image format is important in
+[Converting All Images in a Website to `webp` Format](https://mslinn.com/blog/2020/08/15/converting-all-images-to-webp-format.html).
+That article also provides 2 bash scripts for converting existing images to and from <code>webp</code> format.
+
+For example, if an image is encloded in `webp`, `png` and `gif` filetypes,
+and the user&rsquo;s web browser is relatively recent,
+then `webp` format will give the fastest transmission and look best.
+Older browsers, which might not support `webp` format,
+would give best results for `png` format.
+Really old web browsers would only support the `gif` file type.
+
 Please read the next section for details.
-If you have a use case that would benefit from expanding the supported file types,
-please describe your use case on the [issue tracker](https://github.com/mslinn/jekyll_img/issues/5).
 
 See [demo/index.html](demo/index.html) for examples.
 
 
 ## Image Fallback
 
-This plugin provides support for the
-[`webp`](https://developers.google.com/speed/webp) image format,
-with a fallback to `png` format by using the HTML
+This plugin provides support for many image formats,
+fallbacks to less performant formats by using the HTML
 [`picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
 
-This means that 2 versions of every image are required: a `webp` version, and a `png` version.
+This means that at least one version of every image are required.
 
-You specify the desired image with a `webp` filetype (or no filetype),
-and the plugin generates a `picture` element that contains a primary
+You could specify the desired image with a `webp` filetype, or you could specify no filetype.
+The plugin would generate a `picture` element that contains a primary
 `source` sub-element that specifies the given image URL,
-and a secondary `img` sub-element with a [`png`](https://en.wikipedia.org/wiki/PNG) filetype.
+and secondary `img` sub-element with all other supported filetypes.
 
 For example, these two invocations yield the same result:
 
@@ -38,16 +49,51 @@ The above generates the following
 
 ```html
 <picture>
+  <source srcset="blah.svg" type="image/svg" />
   <source srcset="blah.webp" type="image/webp" />
-  <source srcset="blah.png" type="image/png" />
+  <source srcset="blah.apng" type="image/apng">
+  <source srcset="blah.png" type="image/png">
+  <source srcset="blah.jpg" type="image/jpeg">
+  <source srcset="blah.jpeg" type="image/jpeg">
+  <source srcset="blah.jfif" type="image/jpeg">
+  <source srcset="blah.pjpeg" type="image/jpeg">
+  <source srcset="blah.pjp" type="image/jpeg">
+  <source srcset="blah.gif" type="image/gif">
+  <source srcset="blah.tif" type="image/tiff">
+  <source srcset="blah.tiff" type="image/tiff">
+  <source srcset="blah.bmp" type="image/bmp">
+  <source srcset="blah.ico" type="image/x-icon">
+  <source srcset="blah.cur" type="image/x-icon">
   <img src="blah.png" />
 </picture>
 ```
 
-The above would fetch and display `blah.webp` if the web browser supported `webp` format,
+If both `blah.webp` and `blah.png` were available,
+the above would fetch and display `blah.webp` if the web browser supported `webp` format,
 otherwise it would fetch and display `blah.png`.
 
 
+## Supported Filetypes
+
+The following are listed in order of priority.
+See [MDN](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) for more information.
+
+| Filetype                              | MIME type       |
+| ------------------------------------- | --------------- |
+| `svg`                                 | `image/svg+xml` |
+| `avif`                                | `image/avif`    |
+| `webp`                                | `image/webp`    |
+| `apng`                                | `image/apng`    |
+| `png`                                 | `image/png`     |
+| `jpg`, `jpeg`, `jfif`, `pjpeg`, `pjp` | `image/jpeg`    |
+| `gif`                                 | `image/gif`     |
+| `tif`, `tiff`                         | `image/tiff`    |
+| `bmp`                                 | `image/bmp`     |
+| `ico`, `cur`                          | `image/x-icon`  |
+
+Because `avif` is problematic as of 2024-01-08 on Firefox, Chrome and Safari, it is not supported yet.
+
+
 ## Demo
 
 Run the demo website by typing:
@@ -207,11 +253,13 @@ jekyll_img (0.1.0)
 
 ### Debugging
 
-You can cause `pry` to open when an `ImgError` is raised by setting the following in `_config.yml`:
+You can cause `pry` to open when an `ImgError` is raised by setting `pry_on_img_error` in `_config.yml`.
+`Pry_on_img_error` has priority `die_on_img_error`.
 
 ```yaml
 jekyll_img:
-  pry_on_img_error: true
+  die_on_img_error: false # Default value is false
+  pry_on_img_error: true # Default value is false
 ```
 
 

data/lib/img_builder.rb

@@ -62,8 +62,22 @@ class ImgBuilder
     img_classes = @props.classes || 'rounded shadow'
     <<~END_IMG
       <picture#{@props.attr_id} class='imgPicture'>
+        <source srcset="#{@props.src_any 'svg'}" type="image/svg">
+        <!---<source srcset="#{@props.src_any 'avif'}" type="image/avif">-->
         <source srcset="#{@props.src}" type="image/webp">
-        <source srcset="#{@props.src_png}" type="image/png">
+        <source srcset="#{@props.src_any 'apng'}" type="image/apng">
+        <source srcset="#{@props.src_any 'png'}" type="image/png">
+        <source srcset="#{@props.src_any 'jpg'}" type="image/jpeg">
+        <source srcset="#{@props.src_any 'jpeg'}" type="image/jpeg">
+        <source srcset="#{@props.src_any 'jfif'}" type="image/jpeg">
+        <source srcset="#{@props.src_any 'pjpeg'}" type="image/jpeg">
+        <source srcset="#{@props.src_any 'pjp'}" type="image/jpeg">
+        <source srcset="#{@props.src_any 'gif'}" type="image/gif">
+        <source srcset="#{@props.src_any 'tif'}" type="image/tiff">
+        <source srcset="#{@props.src_any 'tiff'}" type="image/tiff">
+        <source srcset="#{@props.src_any 'bmp'}" type="image/bmp">
+        <source srcset="#{@props.src_any 'ico'}" type="image/x-icon">
+        <source srcset="#{@props.src_any 'cur'}" type="image/x-icon">
         <img #{@props.attr_alt}
           class="imgImg #{img_classes.squish}"
           src="#{@props.src_png}"

data/lib/img_props.rb

@@ -66,6 +66,12 @@ class ImgProperties
     @title ||= @caption || @alt
   end
 
+  def src_any(filetype)
+    raise Jekyll::ImgError, "The 'src' parameter was not specified" if @src.to_s.empty?
+
+    @src.gsub('.webp', ".#{filetype}")
+  end
+
   def src_png
     raise Jekyll::ImgError, "The 'src' parameter was not specified" if @src.to_s.empty?
 
@@ -87,10 +93,10 @@ class ImgProperties
     @src += '.webp' if filetype.empty?
 
     @src = "/assets/images/#{@src}" unless ImgProperties.local_path?(@src) || url?(@src)
-    return unless ImgProperties.local_path?(@src)
+    # return unless ImgProperties.local_path?(@src)
 
-    src = @src.start_with?('/') ? ".#{@src}" : @src
-    raise Jekyll::ImgError, "#{@src} does not exist" unless File.exist?(src)
+    # src = @src.start_with?('/') ? ".#{@src}" : @src
+    # raise Jekyll::ImgError, "#{@src} does not exist" unless File.exist?(src)
   end
 
   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

data/lib/jekyll_img/version.rb

@@ -1,3 +1,3 @@
 module JekyllImgVersion
-  VERSION = '0.2.0'.freeze
+  VERSION = '0.2.2'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll_img
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.2
 platform: ruby
 authors:
 - Mike Slinn
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2023-11-22 00:00:00.000000000 Z
+date: 2024-01-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -86,7 +86,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.4.22
 signing_key:
 specification_version: 4
 summary: Provides a Jekyll tag that generates images.