jekyll_img 0.2.1 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cda0815bbb89ab7db7f1d92af07d01f5aab7790ed1f8f7583b7745c2f0036b0e
-  data.tar.gz: 4714cf51a294939e1ac1145b37ca713c3e00ca0a61f868924fca5fe407109458
+  metadata.gz: fda05bddcf8c3506b2a68947549a297afe1cceec2dd461c21cd24141d1ecfe8d
+  data.tar.gz: 374733466b41e6f70209ec49db53cd0e177c77f712a050cdc5ed61fa0406fa7a
 SHA512:
-  metadata.gz: 7d01edb16a9d8339ba70a43a4d0634c898bab22c9b4b2bb9835ceebabe1fe39d9fbe2f69bfe01e50a9f2acf0312e7b62f73a2163d70bba11d7aa428c6a7fe24c
-  data.tar.gz: cc4b935393c9cae21468c12214c8b9f2de6dcdb9ac749651ee3f51d8a8ddece1da641f09be85982e9074fafccc76fb8d954d0402c8f0b79cf4f4e27653828d25
+  metadata.gz: bbdaa8fb03b1cba56b855e0f02d747175ca07e248cf7343d1ba2eb6304ffaf09d86f6b30a38b44cf0116585cd4e6ecfe356c3c61853846d1e1b3523d77c873cd
+  data.tar.gz: 338caab74974775747ee4f21ab66c913dc2efd4a23ac0b2f9cb83d14add8f60e2a33d2d4dda3b0f72d20d782870deb4f1dbb067699d1abcd053368de021cb82f

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 0.2.3 / 2024-04-27
+
+* Depends on jekyll_plugin_support v0.8.5
+
+
+## 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

data/README.md

@@ -2,29 +2,41 @@
 
 
 `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.
+flexible resizing, default styling, overridable styling, an optional caption, an optional URL,
+and optional fullscreen zoom on mouseover.
+
+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.
 
-If you are not using `webp` images in your Jekyll website, this plugin is not for you.
 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 +50,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:
@@ -85,6 +132,7 @@ $ demo/_bin/debug -r
 - `url='https://domain.com'` No default value
 - `wrapper_class='class1 class2 classN'` Extra CSS classes for wrapper &lt;div&gt;; no default value
 - `wrapper_style='background-color: black;'` CSS style for wrapper &lt;div&gt;; no default value
+- `zoom` Fullscreen zoom on mouseover; presse escape or click outside image to dismiss
 
 [`unit`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages)
 is one of: `Q`, `ch`, `cm`, `em`, `dvh`, `dvw`, `ex`, `in`, `lh`,
@@ -207,11 +255,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/jekyll_img.gemspec

@@ -3,7 +3,6 @@ require_relative 'lib/jekyll_img/version'
 Gem::Specification.new do |spec|
   github = 'https://github.com/mslinn/jekyll_img'
 
-  spec.bindir = 'exe'
   spec.authors = ['Mike Slinn']
   spec.email = ['mslinn@mslinn.com']
   spec.files = Dir['.rubocop.yml', 'LICENSE.*', 'Rakefile', '{lib,spec}/**/*', '*.gemspec', '*.md']
@@ -29,5 +28,5 @@ Gem::Specification.new do |spec|
   spec.version = JekyllImgVersion::VERSION
 
   spec.add_dependency 'jekyll', '>= 3.5.0'
-  spec.add_dependency 'jekyll_plugin_support', '>= 0.8.0'
+  spec.add_dependency 'jekyll_plugin_support', '>= 0.8.5'
 end

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?
 

data/lib/jekyll_img/version.rb

@@ -1,3 +1,3 @@
 module JekyllImgVersion
-  VERSION = '0.2.1'.freeze
+  VERSION = '0.2.3'.freeze
 end

data/lib/jekyll_img.rb

@@ -1,5 +1,5 @@
 require 'jekyll_plugin_support'
-require 'jekyll_plugin_helper'
+require 'helper/jekyll_plugin_helper'
 require 'pry'
 require_relative 'img_builder'
 require_relative 'img_props'

data/spec/status_persistence.txt

@@ -0,0 +1,10 @@
+example_id                      | status | run_time        |
+------------------------------- | ------ | --------------- |
+./spec/img_builder_spec.rb[1:1] | passed | 0.00073 seconds |
+./spec/img_props_spec.rb[1:1]   | passed | 0.0001 seconds  |
+./spec/img_props_spec.rb[1:2]   | passed | 0.00008 seconds |
+./spec/img_props_spec.rb[1:3]   | failed | 0.00051 seconds |
+./spec/img_props_spec.rb[1:4]   | passed | 0.0011 seconds  |
+./spec/img_props_spec.rb[1:5]   | passed | 0.00019 seconds |
+./spec/img_props_spec.rb[1:6]   | failed | 0.00008 seconds |
+./spec/jekyll_img_spec.rb[1:1]  | failed | 0.00037 seconds |

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll_img
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.3
 platform: ruby
 authors:
 - Mike Slinn
 autorequire:
-bindir: exe
+bindir: bin
 cert_chain: []
-date: 2023-11-28 00:00:00.000000000 Z
+date: 2024-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -30,14 +30,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.8.5
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.8.5
 description:
 email:
 - mslinn@mslinn.com
@@ -59,6 +59,7 @@ files:
 - spec/img_props_spec.rb
 - spec/jekyll_img_spec.rb
 - spec/spec_helper.rb
+- spec/status_persistence.txt
 homepage: https://www.mslinn.com/jekyll_plugins/jekyll_img.html
 licenses:
 - MIT
@@ -95,4 +96,5 @@ test_files:
 - spec/img_props_spec.rb
 - spec/jekyll_img_spec.rb
 - spec/spec_helper.rb
+- spec/status_persistence.txt
 ...