jekyll_img 0.2.6 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18a2afe029ee799d3c0afe05d58592b51aa2c49b2e6e880308963015ed43fe22
-  data.tar.gz: efd819e05b6b0cfebf23f2eede44eb96ba5496b05a29c6dbb5bca748ce5bc9d2
+  metadata.gz: bc81e3ae00a242cf25f3444f45da2f621c692d6c7ee4760a17b59e8acc672c4d
+  data.tar.gz: 8b10b63f09b8b586343fd7a4ccc42c205ad1618cb9b422712d2300838799ead3
 SHA512:
-  metadata.gz: ca437bd7388b2cd40b0c32ccc507352af61ff136aa3027b03cdecad617c12cde251642b8688356d1df1d41cacb1cb53652bbd2c683a6920606ebcf3cd9628ef9
-  data.tar.gz: 6be7dd74a4281d01d430c67576febe041a8d872ff4068ebce9c8c95c7857974a1b5ec5dc24d43b5c464a48b0c910f99ecb432c9ddd2065ba34cb2254c196cf54
+  metadata.gz: 97b5302cf184c4fa544498354f1a8bae327f1567c438d88a232eef174422425d9e416bd6b0568439c1df2544cfb9b534e3cf0603931e00b9b2ff6a708c00abd5
+  data.tar.gz: a3ebcc031fb6e63dc92073cf358a38c7092719df8fbf028a5e3376d5b3447e3a539647d0825f47a47c27b45121345c91fecd1af99fc00b1ee816906b71d9c638

data/CHANGELOG.md

@@ -1,6 +1,17 @@
 # Change Log
 
-## 0.2.6 / 2024-08-30
+## 0.2.8 / 2025-05-16
+
+* An image can now be lazily loaded by providing the `lazy` keyword.
+* An image can now be fetched with high priority by providing the `priority` keyword.
+
+
+## 0.2.7 / 2024-09-11
+
+* Further tweaking of the generated HTML.
+
+
+## 0.2.6 / 2024-09-10
 
 * Optimized the generated HTML.
   For example, `srcset` elements are now only generated for images that actually exit locally.

data/README.md

@@ -74,6 +74,135 @@ If the browser did not support the `picture` element,
 the `img src` attribute would be used to specify the image.
 
 
+### Default and Relative Paths
+
+Local images whose path does not start with a slash are assumed to be relative to `/assets/images`.
+Simply specifying the filename of the image will cause it to be fetched from
+`/assets/images/`.
+For example, the following all fetch the same image:
+
+```html
+{% img src="/assets/images/blah.webp" %}
+{% img src="blah.webp" %}
+{% img src="blah" %}
+```
+
+To specify an image in a subdirectory of where the page resides,
+prepend the relative path with a dot (`.`).
+
+For example, if the current page resides in a [Jekyll collection](https://jekyllrb.com/docs/collections/)
+with path `/collections/_av_studio/`,
+and an image resides in the `/collections/_av_studio/images` subdirectory,
+the following would result in the same image being displayed:
+
+```html
+{% img src="/av_studio/images/blah" %}
+{% img src="./images/blah" %}
+```
+
+### Lazy Loading
+
+An image can be lazily loaded by providing the `lazy` keyword.
+This feature relies upon the lazy loading capability built into all modern browsers and does not rely upon JavaScript.
+
+From [Browser-level image lazy loading for the web](https://web.dev/articles/browser-level-image-lazy-loading#dimension-attributes)
+on `web.dev`:
+
+> While the browser loads an image, it doesn't immediately know the image's dimensions,
+> unless they're explicitly specified.
+> To let the browser reserve enough space on a page for images, and avoid disruptive layout shifts,
+> we recommend adding width and height attributes to all  tags.
+>
+> <img src="image.png" loading="lazy" alt="…" width="200" height="200">
+Alternatively, specify their values directly in an inline style:
+>
+> <img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
+
+This would translate to:
+
+```html
+{% img lazy
+  src="blah.webp"
+  style="height:200px; width:200px"
+%}
+```
+
+Note that the image must be fetched in order for HTML `img` attributes `height='auto'` and `width='auto'` to work.
+Thus lazy loading is incompatible with a dimension whose value is specified as `auto`.
+This means that, for lazily loaded images,
+`height` and `width` must have values that are computable without loading the image.
+Because the Jekyll `img` tag's `size` attribute only specifies the `width` attribute,
+and sets `height` to `auto`, it should not be used with the `lazy` keyword.
+
+The following examples of implicit and explicit `auto` dimensions will all give problems:
+
+```html
+{% img lazy
+  caption="A warning will be written to the logger"
+  size="200px"
+  src="blah.webp"
+%}
+
+{% img lazy
+  src="blah.webp"
+  style="height:auto; width:200px"
+%}
+
+{% img lazy
+  src="blah.webp"
+  style="height:200px; width:auto"
+%}
+
+{% img lazy
+  src="blah.webp"
+  style="height:200px"
+%}
+
+{% img lazy
+  src="blah.webp"
+  style="width:200px"
+%}
+```
+
+
+### High Priority Loading
+
+An image can be fetched with high priority by providing the `priority` keyword.
+
+Sample usage:
+
+```html
+{% img priority src="blah.webp" %}
+```
+
+The above generates an HTML `img` tag with a `fetchpriority='high'` attribute.
+
+From [Browser-level image lazy loading for the web](https://web.dev/articles/browser-level-image-lazy-loading#loading-priority)
+on `web.dev`:
+
+> If you want to increase the fetch priority of an important image, use `fetchpriority="high"`.
+>
+> An image with `loading="lazy"` and `fetchpriority="high"` is still delayed while it's off-screen,
+> and then fetched with a high priority when it's almost within the viewport.
+> This combination isn't really necessary because the browser would likely load that image with high priority anyway.
+
+
+Note that the image must be fetched in order for `img` attributes `height='auto'` and `width='auto'` to work.
+This means that `height` and `width` must have values that are computable without loading
+the image or lazy loading will not work properly.
+Because the `img` tag's `size` attribute only specifies the `width` attribute, and sets `height` to `auto`,
+it should not be used.
+
+Sample usage combining lazy and high priority loading:
+
+```html
+{% img lazy priority
+  src="blah.webp"
+  style="height:200px; width:200px"
+%}
+```
+
+
 ## Supported Filetypes
 
 The following are listed in order of priority.
@@ -199,7 +328,7 @@ Using CSS units means that large enough values could cause the image to exceed t
 
 ## Installation
 
-Add this line to your Jekyll project's Gemfile, within the `jekyll_plugins` group:
+Add this line to your Jekyll project's `Gemfile`, within the `jekyll_plugins` group:
 
 ```ruby
 group :jekyll_plugins do

data/jekyll_img.gemspec

@@ -3,11 +3,11 @@ require_relative 'lib/jekyll_img/version'
 Gem::Specification.new do |spec|
   github = 'https://github.com/mslinn/jekyll_img'
 
-  spec.authors = ['Mike Slinn']
-  spec.email = ['mslinn@mslinn.com']
-  spec.files = Dir['.rubocop.yml', 'LICENSE.*', 'Rakefile', '{lib,spec}/**/*', '*.gemspec', '*.md']
+  spec.authors  = ['Mike Slinn']
+  spec.email    = ['mslinn@mslinn.com']
+  spec.files    = Dir['.rubocop.yml', 'LICENSE.*', 'Rakefile', '{lib,spec}/**/*', '*.gemspec', '*.md']
   spec.homepage = 'https://www.mslinn.com/jekyll_plugins/jekyll_img.html'
-  spec.license = 'MIT'
+  spec.license  = 'MIT'
   spec.metadata = {
     'allowed_push_host' => 'https://rubygems.org',
     'bug_tracker_uri'   => "#{github}/issues",
@@ -15,18 +15,20 @@ Gem::Specification.new do |spec|
     'homepage_uri'      => spec.homepage,
     'source_code_uri'   => github,
   }
-  spec.name = 'jekyll_img'
+  spec.name                 = 'jekyll_img'
+  spec.platform             = Gem::Platform::RUBY
   spec.post_install_message = <<~END_MESSAGE
 
     Thanks for installing #{spec.name}!
 
   END_MESSAGE
-  spec.require_paths = ['lib']
+  spec.require_paths         = ['lib']
   spec.required_ruby_version = '>= 2.6.0'
-  spec.summary = 'Provides a Jekyll tag that generates images.'
-  spec.test_files = spec.files.grep %r{^(test|spec|features)/}
-  spec.version = JekyllImgVersion::VERSION
+  spec.summary               = 'Provides a Jekyll tag that generates images.'
+  spec.test_files            = spec.files.grep %r{^(test|spec|features)/}
+  spec.version               = JekyllImgVersion::VERSION
 
   spec.add_dependency 'jekyll', '>= 3.5.0'
-  spec.add_dependency 'jekyll_plugin_support', '>= 1.0.0'
+  spec.add_dependency 'jekyll_draft', '>= 3.0.0'
+  spec.add_dependency 'jekyll_plugin_support', '>= 3.0.0'
 end

data/lib/img_builder.rb

@@ -1,5 +1,9 @@
-# Like RoR's squish method
 class String
+  def remove_blank_lines
+    strip.gsub(/^\s*$\n/, '')
+  end
+
+  # Like RoR's squish method
   def squish
     strip.gsub(/\s+/, ' ')
   end
@@ -7,107 +11,93 @@ end
 
 # Constructs HTML img tag from properties
 class ImgBuilder
-  def initialize(props)
-    props.compute_dependant_properties
-    @props = props
-  end
+  attr_reader :img, :props, :source
 
-  def to_s
+  def initialize(img, props)
+    @img = img
+    @props = props
     @props.compute_dependant_properties
-    generate_wrapper
+    @source = Source.new @props.src
   end
 
-  private
-
-  def generate_wrapper
-    classes = "imgWrapper #{@props.img_display} #{@props.align} #{@props.attr_size_class} #{@props.wrapper_class}".squish
-    result = <<~END_HTML
-      <div class='#{classes}' style='#{@props.attr_width_style} #{@props.wrapper_style}'>
-        #{"<figure>\n" if @props.caption}
-          #{ if @props.url
-               "<a href='#{@props.url}'#{@props.attr_target}#{@props.attr_nofollow} class='imgImgUrl'>#{generate_image}</a>"
-             else
-               generate_image
-             end
-          }
-          #{generate_figure_caption}
-        #{"</figure>\n" if @props.caption}
-        #{@props.attribute if @props.attribution}
-      </div>
-    END_HTML
-    result.strip.gsub(/^\s*$\n/, '')
-  end
-
-  def generate_figure_caption
-    return nil unless @props.caption
-
+  def generate_figcaption
     <<~END_CAPTION
       <figcaption class='imgFigCaption #{@props.attr_size_class}'>
-        #{if @props.url
-            <<~END_URL
-              <a href="#{@props.url}" #{@props.attr_target} #{@props.attr_nofollow}>
-                #{@props.caption}
-              </a>
-            END_URL
-          else
-            @props.caption
-          end
-        }
+        #{@props.url ? generate_url_caption : @props.caption}
       </figcaption>
     END_CAPTION
   end
 
-  # @return Array[String] containing HTML source elements
-  def generate_sources(filetypes, mimetype)
-    result = filetypes.map do |ftype|
-      filename = @props.src_any ftype
-      next unless filename.start_with?('http') || File.exist?("./#{filename}")
-
-      <<~END_HTML
-        <source srcset="#{filename}" type="#{mimetype}">
-      END_HTML
-    end
-    result&.compact&.map(&:strip)
-  end
-
-  def generate_compact_sources
-    [
-      generate_sources(%w[svg], 'image/svg'),
-      generate_sources(%w[webp], 'image/webp'),
-      generate_sources(%w[png], 'image/png'),
-      generate_sources(%w[apng], 'image/apng'),
-      generate_sources(%w[jpg jpeg jfif pjpeg pjp], 'image/jpeg'),
-      generate_sources(%w[gif], 'image/gif'),
-      generate_sources(%w[tif tiff], 'image/tiff'),
-      generate_sources(%w[bmp], 'image/bmp'),
-      generate_sources(%w[cur ico], 'image/x-icon')
-    ].compact.join("\n").strip.gsub(/^$\n/, '')
+  def generate_img
+    img_classes = @props.classes || 'rounded shadow'
+    <<~END_IMG
+      <img #{@props.attr_alt}
+        class="imgImg #{img_classes.squish}"
+        src="#{@source.src_fallback}"
+        #{@props.attr_style_img}
+        #{@props.attr_title}
+        #{@props.lazy}
+        #{@props.priority}
+      />
+    END_IMG
   end
 
   # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
-  def generate_image
+  def generate_picture
+    if @props.lazy && @props.size
+      @img.logger.warn do
+        <<~END_MSG.squish
+          Warning: lazy loading was specified, but the size attribute was specified for the href tag
+          on line #{@img.line_number} (after front matter) of #{@img.page['path']}.
+          Specify dimensions via style or class attributes instead.
+        END_MSG
+      end
+    end
+
     return generate_img if @props.src.start_with? 'http'
 
     # avif is not well supported yet
     # <source srcset="#{@props.src_any 'avif'}" type="image/avif">
     result = <<~END_IMG
       <picture#{@props.attr_id} class='imgPicture'>
-        #{generate_compact_sources}
+        #{@source.generate.join("\n  ")}
         #{generate_img}
       </picture>
     END_IMG
     result.strip
   end
 
-  def generate_img
-    img_classes = @props.classes || 'rounded shadow'
-    <<~END_IMG
-      <img #{@props.attr_alt}
-        class="imgImg #{img_classes.squish}"
-        src="#{@props.src_png}"
-        #{@props.attr_style_img}
-        #{@props.attr_title}
-      />
-    END_IMG
+  def generate_url_caption
+    <<~END_URL
+      <a href="#{@props.url}"#{@props.attr_target}#{@props.attr_nofollow}>
+        #{@props.caption}
+      </a>
+    END_URL
+  end
+
+  def generate_url_wrapper
+    <<~END_HTML
+      <a href='#{@props.url}'#{@props.attr_target}#{@props.attr_nofollow} class='imgImgUrl'>
+        #{generate_picture}
+      </a>
+    END_HTML
+  end
+
+  def generate_wrapper
+    classes = "imgWrapper #{@props.img_display} #{@props.align} #{@props.attr_size_class} #{@props.wrapper_class}".squish
+    <<~END_HTML.remove_blank_lines
+      <div class='#{classes}' style='#{@props.attr_width_style} #{@props.wrapper_style}'>
+        #{"<figure>\n" if @props.caption}
+          #{@props.url ? generate_url_wrapper : generate_picture}
+          #{generate_figcaption if @props.caption}
+        #{"</figure>\n" if @props.caption}
+        #{@props.attribute if @props.attribution}
+      </div>
+    END_HTML
+  end
+
+  def to_s
+    @props.compute_dependant_properties
+    generate_wrapper
   end
 end

data/lib/img_props.rb

@@ -6,10 +6,11 @@ require 'uri'
 # All methods except compute_dependant_properties can be called in any order
 class ImgProperties
   attr_accessor :align, :alt, :attr_wrapper_align_class, :attribute, :attribution, :caption, :classes, :die_on_img_error,
-                :id, :img_display, :local_src, :nofollow, :src, :size, :style, :target, :title,
+                :id, :img_display, :lazy, :local_src, :nofollow, :priority, :src, :size, :style, :target, :title,
                 :url, :wrapper_class, :wrapper_style
 
   SIZES = %w[eighthsize fullsize halfsize initial quartersize].freeze
+  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
 
   def attr_alt
     "alt='#{@alt}'" if @alt
@@ -69,13 +70,7 @@ class ImgProperties
   end
 
   def src_any(filetype)
-    @src.gsub('.webp', ".#{filetype}")
-  end
-
-  def src_png
-    raise Jekyll::ImgError, "The 'src' parameter was not specified" if @src.to_s.empty?
-
-    @src.gsub('.webp', '.png')
+    @src.gsub(/\..*?$/, ".#{filetype}")
   end
 
   def self.local_path?(src)
@@ -86,7 +81,7 @@ class ImgProperties
   private
 
   def setup_src
-    raise Jekyll::ImgError, "The 'src' parameter was not specified" if @src.nil?
+    raise Jekyll::ImgError, "The 'src' parameter was not specified" if @src.nil? || [true, false].include?(@src)
 
     raise Jekyll::ImgError, "The 'src' parameter was empty" if @src.empty?
 
@@ -103,8 +98,6 @@ class ImgProperties
     # 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
-
   def size_unit_specified?
     return false if @size == false || @size.to_s.strip.empty?
 

data/lib/jekyll_img/version.rb

@@ -1,3 +1,3 @@
 module JekyllImgVersion
-  VERSION = '0.2.6'.freeze
+  VERSION = '0.2.8'.freeze
 end

data/lib/jekyll_img.rb

@@ -3,6 +3,7 @@ require 'helper/jekyll_plugin_helper'
 require 'pry'
 require_relative 'img_builder'
 require_relative 'img_props'
+require_relative 'source'
 require_relative 'jekyll_img/version'
 
 # @author Copyright 2023 Michael Slinn
@@ -34,7 +35,9 @@ module Jekyll
       props.classes           = @helper.parameter_specified? 'class'
       props.die_on_img_error  = @die_on_img_error
       props.id                = @helper.parameter_specified? 'id'
+      props.lazy              = ' loading="lazy"' if @helper.parameter_specified?('lazy')
       props.nofollow          = @helper.parameter_specified? 'nofollow'
+      props.priority          = ' fetchpriority="high"' if @helper.parameter_specified?('priority')
       props.size              = @helper.parameter_specified?('size') || @helper.parameter_specified?('_size')
       props.src               = @helper.parameter_specified? 'src'
       props.style             = @helper.parameter_specified? 'style'
@@ -44,7 +47,7 @@ module Jekyll
       props.wrapper_class     = @helper.parameter_specified? 'wrapper_class'
       props.wrapper_style     = @helper.parameter_specified? 'wrapper_style'
 
-      @builder = ImgBuilder.new(props)
+      @builder = ImgBuilder.new(self, props)
       @builder.to_s
     rescue ImgError => e # jekyll_plugin_support handles StandardError
       @logger.error { e.logger_message }

data/lib/source.rb

@@ -0,0 +1,98 @@
+class Source
+  RANKS = %w[svg webp apng png jpg jpeg jfif pjpeg pjp gif tif tiff bmp cur ico].freeze
+  RANKS_LENGTH = RANKS.length
+
+  def initialize(path)
+    raise Jekyll::ImgError, "The 'src' parameter was not specified" if path.nil?
+    raise Jekyll::ImgError, "The 'src' parameter was empty" if path.empty?
+
+    path.strip!
+    raise Jekyll::ImgError, "The 'src' parameter only contained whitespace" if path.empty?
+
+    @path = path
+    @absolute_path = @path.start_with?('/')
+  end
+
+  # @return array of source statements for filetypes that exist locally;
+  #         return nil if @path points to a remote image
+  def generate
+    return nil if @path.nil? || @path.start_with?('http')
+
+    result = sorted_files.map do |filename|
+      mtype = mimetype filename
+      next unless mtype
+
+      <<~END_HTML
+        <source srcset="#{filename}" type="#{mtype}">
+      END_HTML
+    end
+    result&.compact&.map(&:strip)
+  end
+
+  # Webp is the least desired variant, png is most desired variant.
+  # @return URL of external image, otherwise return specified path unless it is a webp;
+  #         in which case return most desired image variant that exists.
+  def src_fallback
+    return @path if @path.start_with? 'http'
+
+    result = @absolute_path ? @path.delete_prefix('.') : @path
+    png = result.gsub(/\.webp$/, '.png')
+    return png if File.exist? png
+    return result unless result.end_with? '.webp' # we know @path will be a webp after this
+
+    files = sorted_files
+    return files[0] if files.count == 1
+
+    files.each do |filename|
+      ext = File.extname filename
+      unless ext == '.webp'
+        return @absolute_path ? filename.delete_prefix('.') : filename
+      end
+    end
+    result
+  end
+
+  private
+
+  # Convert absolute paths (which reference the website root) to relative paths for globbing
+  def globbed_path
+    dir = File.dirname @path
+    dir = ".#{dir}" if dir.start_with?('/')
+    base = File.basename @path, ".*"
+    "#{dir}/#{base}.*"
+  end
+
+  def mimetype(path)
+    case File.extname(path)
+    when '.svg'
+      'image/svg'
+    when '.webp'
+      'image/webp'
+    when '.png'
+      'image/png'
+    when '.apng'
+      'image/apng'
+    when %w[.jpg .jpeg .jfif .pjpeg .pjp]
+      'image/jpeg'
+    when '.gif'
+      'image/gif'
+    when %w[.tif .tiff]
+      'image/tiff'
+    when '.bmp'
+      'image/bmp'
+    when %w[cur ico]
+      'image/x-icon'
+      # else
+      # raise Jekyll::ImgError, "#{path} has an unrecognized filetype."
+    end
+  end
+
+  def sorted_files
+    sorted = Dir[globbed_path].sort_by do |path|
+      ext = File.extname(path)&.delete_prefix('.')
+      index = RANKS.index(ext)
+      index || RANKS_LENGTH
+    end
+    sorted.map { |x| @absolute_path ? x.delete_prefix('.') : x }
+  end
+end

data/spec/img_builder_spec.rb

@@ -1,25 +1,50 @@
 require 'rspec/match_ignoring_whitespace'
 require_relative '../lib/img_builder'
 require_relative '../lib/img_props'
+require_relative '../lib/source'
 
 # Test ImgProperties
 class ImgPropertiesTest
   RSpec.describe ImgBuilder do
     Dir.chdir("demo")
+    props = ImgProperties.new
+    props.src = '/assets/images/jekyll.webp'
+    builder = described_class.new(props)
 
     it 'generates sources' do
-      props = ImgProperties.new
-      props.src = 'jekyll.webp'
-      builder = described_class.new(props)
-      actual = builder.send(:generate_sources, ['png'], 'image/png')
-      expect(actual).to contain_exactly('<source srcset="/assets/images/jekyll.png" type="image/png">')
+      actual = builder.source.generate
+      desired = [
+        '<source srcset="/assets/images/jekyll.webp" type="image/webp">',
+        '<source srcset="/assets/images/jekyll.png" type="image/png">'
+      ]
+      expect(actual).to match_array(desired)
+    end
+
+    it 'generates a figcaption' do
+      desired = <<~END_STRING
+        <figcaption class='imgFigCaption '>
+        </figcaption>
+      END_STRING
+      expect(builder.generate_figcaption).to match_ignoring_whitespace(desired)
+    end
+
+    it 'generates a picture' do
+      desired = <<~END_DESIRED
+        <picture class='imgPicture'>
+          <source srcset="/assets/images/jekyll.webp" type="image/webp">
+          <source srcset="/assets/images/jekyll.png" type="image/png">
+          <img class="imgImg rounded shadow"
+            src="/assets/images/jekyll.png"
+            style='width: 100%; '
+          />
+        </picture>
+      END_DESIRED
+      actual = builder.generate_picture
+      expect(actual).to match_ignoring_whitespace(desired)
     end
 
     it 'generates a default img' do
-      props = ImgProperties.new
-      props.src = 'jekyll.webp'
-      builder = described_class.new(props)
-      picture = <<~END_IMG
+      desired = <<~END_IMG
         <div class='imgWrapper imgFlex' style=' '>
           <picture class='imgPicture'>
             <source srcset="/assets/images/jekyll.webp" type="image/webp">
@@ -32,15 +57,13 @@ class ImgPropertiesTest
         </div>
       END_IMG
 
-      expect(builder.send(:generate_figure_caption)).to be_nil
-      expect(builder.send(:generate_wrapper)).to        match_ignoring_whitespace(picture)
+      actual = builder.generate_wrapper
+      expect(actual).to match_ignoring_whitespace(desired)
     end
 
-    it 'generates an img with size and caption' do
-      props = ImgProperties.new
+    it 'generates an img wrapper with size and caption' do
       props.caption = 'This is a caption'
       props.size = '123px'
-      props.src = 'jekyll.webp'
       builder = described_class.new(props)
 
       caption = <<~END_CAPTION
@@ -49,7 +72,7 @@ class ImgPropertiesTest
         </figcaption>
       END_CAPTION
 
-      picture = <<~END_IMG
+      desired = <<~END_IMG
         <div class='imgWrapper imgBlock' style='width: 123px; '>
           <figure>
             <picture class='imgPicture'>
@@ -67,8 +90,8 @@ class ImgPropertiesTest
         </div>
       END_IMG
 
-      expect(builder.send(:generate_figure_caption)).to match_ignoring_whitespace(caption)
-      expect(builder.send(:generate_wrapper)).to        match_ignoring_whitespace(picture)
+      actual = builder.generate_wrapper
+      expect(actual).to match_ignoring_whitespace(desired)
     end
   end
 end

data/spec/img_props_spec.rb

@@ -1,6 +1,6 @@
 require_relative '../lib/img_props'
 
-class ImgProperitesTest
+class ImgPropertiesTest
   RSpec.describe ImgProperties do
     it 'detects relative paths' do
       expect(described_class.local_path?('abcdef')).to be false
@@ -37,7 +37,7 @@ class ImgProperitesTest
 
     it 'raises exception if src was not specified' do
       props = described_class.new
-      expect { props.src_png }.to raise_error(Jekyll::ImgError)
+      expect { props.compute_dependant_properties }.to raise_error(Jekyll::ImgError)
       expect { props.send(:setup_src) }.to raise_error(Jekyll::ImgError)
 
       props.src = 'relative/path.webp'

data/spec/jekyll_img_spec.rb

@@ -56,7 +56,7 @@ class MyTest
       )
     end
 
-    it 'has no cite or url' do
+    xit 'has no cite or url' do
       helper.reinitialize('src="./blah.webp"')
       img = described_class.send(
         :new,
@@ -64,10 +64,11 @@ class MyTest
         helper.markup.dup,
         parse_context
       )
-      result = img.send(:render_impl)
-      expect(result).to match_ignoring_whitespace <<-END_RESULT
+      actual = img.render_impl
+      desired = <<~END_DESIRED
         <img src="./blah.webp">
-      END_RESULT
+      END_DESIRED
+      expect(actual).to match_ignoring_whitespace(desired)
     end
   end
 end

data/spec/source_spec.rb

@@ -0,0 +1,87 @@
+require 'rspec/match_ignoring_whitespace'
+require_relative '../lib/source'
+
+# Test ImgProperties
+class ImgPropertiesTest
+  RSpec.describe Source do
+    Dir.chdir("#{__dir__}/../demo")
+    source_absolute = described_class.new('/assets/images/jekyll_240x103.webp')
+    source_relative = described_class.new('./assets/images/jekyll_240x103.webp')
+
+    it 'globs absolute paths' do
+      expect(source_absolute.send(:globbed_path)).to eq("./assets/images/jekyll_240x103.*")
+    end
+
+    it 'globs relative paths' do
+      expect(source_relative.send(:globbed_path)).to eq("./assets/images/jekyll_240x103.*")
+    end
+
+    it 'sorts files with absolute path' do
+      actual = source_absolute.send(:sorted_files)
+      desired = [
+        "/assets/images/jekyll_240x103.webp",
+        "/assets/images/jekyll_240x103.png",
+        "/assets/images/jekyll_240x103.jpg",
+        "/assets/images/jekyll_240x103.gif",
+        "/assets/images/jekyll_240x103.txt"
+      ]
+      expect(actual).to eq(desired)
+    end
+
+    it 'sorts files with relative path' do
+      actual = source_relative.send(:sorted_files)
+      desired = [
+        "./assets/images/jekyll_240x103.webp",
+        "./assets/images/jekyll_240x103.png",
+        "./assets/images/jekyll_240x103.jpg",
+        "./assets/images/jekyll_240x103.gif",
+        "./assets/images/jekyll_240x103.txt"
+      ]
+      expect(actual).to eq(desired)
+    end
+
+    it 'generates mimetype for absolute paths' do
+      expect(source_absolute.send(:mimetype, 'blah.png')).to  eq('image/png')
+      expect(source_absolute.send(:mimetype, 'blah.svg')).to  eq('image/svg')
+      expect(source_absolute.send(:mimetype, 'blah.webp')).to eq('image/webp')
+      expect(source_absolute.send(:mimetype, 'blah.gif')).to  eq('image/gif')
+      expect(source_absolute.send(:mimetype, 'blah.blah')).to be_nil
+    end
+
+    it 'generates mimetype for relative paths' do
+      expect(source_relative.send(:mimetype, 'blah.png')).to  eq('image/png')
+      expect(source_relative.send(:mimetype, 'blah.svg')).to  eq('image/svg')
+      expect(source_relative.send(:mimetype, 'blah.webp')).to eq('image/webp')
+      expect(source_relative.send(:mimetype, 'blah.gif')).to  eq('image/gif')
+      expect(source_relative.send(:mimetype, 'blah.blah')).to be_nil
+    end
+
+    it 'generates source fallback for absolute paths' do
+      expect(source_absolute.src_fallback).to eq("/assets/images/jekyll_240x103.png")
+    end
+
+    it 'generates source fallback for relative paths' do
+      expect(source_relative.src_fallback).to eq("./assets/images/jekyll_240x103.png")
+    end
+
+    it 'generates sources for absolute paths' do
+      actual = source_absolute.generate.join("\n")
+      desired = <<~END_DESIRED
+        <source srcset="/assets/images/jekyll_240x103.webp" type="image/webp">
+        <source srcset="/assets/images/jekyll_240x103.png" type="image/png">
+        <source srcset="/assets/images/jekyll_240x103.gif" type="image/gif">
+      END_DESIRED
+      expect(actual).to match_ignoring_whitespace(desired)
+    end
+
+    it 'generates sources for relative paths' do
+      actual = source_relative.generate.join("\n")
+      desired = <<~END_DESIRED
+        <source srcset="./assets/images/jekyll_240x103.webp" type="image/webp">
+        <source srcset="./assets/images/jekyll_240x103.png" type="image/png">
+        <source srcset="./assets/images/jekyll_240x103.gif" type="image/gif">
+      END_DESIRED
+      expect(actual).to match_ignoring_whitespace(desired)
+    end
+  end
+end

data/spec/status_persistence.txt

@@ -3,8 +3,14 @@ example_id                      | status | run_time        |
 ./spec/img_builder_spec.rb[1:1] | failed | 14.37 seconds   |
 ./spec/img_builder_spec.rb[1:2] | failed | 0.01498 seconds |
 ./spec/img_builder_spec.rb[1:3] | failed | 0.00093 seconds |
-./spec/img_props_spec.rb[1:1]   | passed | 0.00407 seconds |
-./spec/img_props_spec.rb[1:2]   | passed | 0.00005 seconds |
-./spec/img_props_spec.rb[1:3]   | passed | 0.00845 seconds |
-./spec/img_props_spec.rb[1:4]   | passed | 0.00135 seconds |
-./spec/img_props_spec.rb[1:5]   | passed | 11.17 seconds   |
+./spec/img_props_spec.rb[1:1]   | passed | 0.00393 seconds |
+./spec/img_props_spec.rb[1:2]   | passed | 0.00006 seconds |
+./spec/img_props_spec.rb[1:3]   | passed | 0.00673 seconds |
+./spec/img_props_spec.rb[1:4]   | passed | 4.65 seconds    |
+./spec/img_props_spec.rb[1:5]   | passed | 0.00009 seconds |
+./spec/jekyll_img_spec.rb[1:1]  | failed | 40.84 seconds   |
+./spec/source_spec.rb[1:1]      | passed | 0.00089 seconds |
+./spec/source_spec.rb[1:2]      | passed | 0.0045 seconds  |
+./spec/source_spec.rb[1:3]      | passed | 0.00687 seconds |
+./spec/source_spec.rb[1:4]      | passed | 0.00071 seconds |
+./spec/source_spec.rb[1:5]      | passed | 1.72 seconds    |

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: jekyll_img
 version: !ruby/object:Gem::Version
-  version: 0.2.6
+  version: 0.2.8
 platform: ruby
 authors:
 - Mike Slinn
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-31 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -24,21 +23,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.5.0
+- !ruby/object:Gem::Dependency
+  name: jekyll_draft
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.0.0
 - !ruby/object:Gem::Dependency
   name: jekyll_plugin_support
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.0.0
+        version: 3.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.0.0
-description:
+        version: 3.0.0
 email:
 - mslinn@mslinn.com
 executables: []
@@ -55,9 +67,11 @@ files:
 - lib/img_props.rb
 - lib/jekyll_img.rb
 - lib/jekyll_img/version.rb
+- lib/source.rb
 - spec/img_builder_spec.rb
 - spec/img_props_spec.rb
 - spec/jekyll_img_spec.rb
+- spec/source_spec.rb
 - spec/spec_helper.rb
 - spec/status_persistence.txt
 homepage: https://www.mslinn.com/jekyll_plugins/jekyll_img.html
@@ -87,14 +101,14 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.17
-signing_key:
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Provides a Jekyll tag that generates images.
 test_files:
 - spec/img_builder_spec.rb
 - spec/img_props_spec.rb
 - spec/jekyll_img_spec.rb
+- spec/source_spec.rb
 - spec/spec_helper.rb
 - spec/status_persistence.txt
 ...