jekyll_img 0.2.5 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68b1a33d89b04dfab1851a2ba9adaac2ebeb7b7fbd91428cb2431f008f9226a1
-  data.tar.gz: ac86e8906b8d5e96d7295486f8e7b0ac2f76a825e2f9cd66d6072a5e644c0fb3
+  metadata.gz: 18a2afe029ee799d3c0afe05d58592b51aa2c49b2e6e880308963015ed43fe22
+  data.tar.gz: efd819e05b6b0cfebf23f2eede44eb96ba5496b05a29c6dbb5bca748ce5bc9d2
 SHA512:
-  metadata.gz: f44391734629f99eedf6d62579bf3e4342ba334f20b6bc7b67e6a046cca8f774cc8e181fbc9c5c4c0661d6ba532c6cc525a8de62cf6f5ce049eea4c7766bc0b5
-  data.tar.gz: d7fa41d16eb7b23368ce08dddb59574a5c71b5a4afab28705bd16b44ab7b10d527db90e068d51ef91780e1cb950fb1a23953bc5d1922d2c0800a1d81418d34fc
+  metadata.gz: ca437bd7388b2cd40b0c32ccc507352af61ff136aa3027b03cdecad617c12cde251642b8688356d1df1d41cacb1cb53652bbd2c683a6920606ebcf3cd9628ef9
+  data.tar.gz: 6be7dd74a4281d01d430c67576febe041a8d872ff4068ebce9c8c95c7857974a1b5ec5dc24d43b5c464a48b0c910f99ecb432c9ddd2065ba34cb2254c196cf54

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.2.6 / 2024-08-30
+
+* Optimized the generated HTML.
+  For example, `srcset` elements are now only generated for images that actually exit locally.
+  For remote images, only an `img` element is generated for the specified filetype.
+  The tests can be found in `demo/img_test.html`.
+
+
 ## 0.2.5 / 2024-07-23
 
 * Depends on jekyll_plugin_support v1.0.2

data/README.md

@@ -9,10 +9,6 @@ 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.
@@ -22,56 +18,60 @@ Really old web browsers would only support the `gif` file type.
 
 Please read the next section for details.
 
+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.
+
 See [demo/index.html](demo/index.html) for examples.
 
 
+## External Images
+
+Images whose `src` attribute starts with `http` are not served from the Jekyll website.
+The `jekyll_img` plugin generates HTML for external images using an `img` element with a `src`
+attribute as you might expect.
+
+
 ## Image Fallback
 
-This plugin provides support for many image formats,
-fallbacks to less performant formats by using the HTML
+For local files (files served from the Jekyll website),
+the `jekyll_img` plugin generates HTML that falls back to successively less performant
+formats.
+This is made possible by using a
 [`picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
 
-This means that at least one version of every image are required.
-
-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 secondary `img` sub-element with all other supported filetypes.
+At least one version of every image are required.
+Supported filetypes are:
+`svg`, `webp`, `apng`, `png`, `jpg`, `jpeg`, `jfif`, `pjpeg`, `pjp`, `gif`, `tif`, `tiff`, `bmp`, `ico` and `cur`.
 
-For example, these two invocations yield the same result:
+For example, an image file might have the following verions: `blah.webp`, `blah.png` and `blah.jpg`.
+Given a tag invocation like `{% img src='blah.webp' %}`,
+the plugin would generate a `picture` element that contains an `img` sub-element with the given `src` attribute,
+and a `source` element for each related image (`blah.png` and `blah.jpg`).
+Conceptually, the generated HTML might look something like this:
 
 ```html
-{% img src="blah" %}
-{% img src="blah.webp" %}
+<picture>
+  <source srcset="blah.png" />
+  <source srcset="blah.jpg" />
+  <img src="blah.webp" />
+</picture>
 ```
 
-The above generates the following
-(to support the other options, the generated HTML can be a lot more complex):
+If no filetype is given for the image, `webp` is assumed.
+For example, these two invocations yield the same result,
+if `blah.webp` exists on the Jekyll website:
 
 ```html
-<picture>
-  <source srcset="blah.svg" type="image/svg" />
-  <source srcset="blah.webp" type="image/webp" />
-  <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>
+{% img src="blah" %}
+{% img src="blah.webp" %}
 ```
 
 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`.
+If the browser did not support the `picture` element,
+the `img src` attribute would be used to specify the image.
 
 
 ## Supported Filetypes
@@ -103,7 +103,7 @@ Run the demo website by typing:
 $ demo/_bin/debug -r
 ```
 
-... and point your web browser to http://localhost:4444
+... and point your web browser to http://localhost:4011
 
 
 ## Usage

data/lib/img_builder.rb

@@ -25,9 +25,9 @@ class ImgBuilder
       <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_img}</a>"
+               "<a href='#{@props.url}'#{@props.attr_target}#{@props.attr_nofollow} class='imgImgUrl'>#{generate_image}</a>"
              else
-               generate_img
+               generate_image
              end
           }
           #{generate_figure_caption}
@@ -35,7 +35,7 @@ class ImgBuilder
         #{@props.attribute if @props.attribution}
       </div>
     END_HTML
-    result.strip
+    result.strip.gsub(/^\s*$\n/, '')
   end
 
   def generate_figure_caption
@@ -57,34 +57,57 @@ class ImgBuilder
     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/, '')
+  end
+
   # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
+  def generate_image
+    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}
+        #{generate_img}
+      </picture>
+    END_IMG
+    result.strip
+  end
+
   def generate_img
     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_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}"
-          #{@props.attr_style_img}
-          #{@props.attr_title}
-        />
-      </picture>
+      <img #{@props.attr_alt}
+        class="imgImg #{img_classes.squish}"
+        src="#{@props.src_png}"
+        #{@props.attr_style_img}
+        #{@props.attr_title}
+      />
     END_IMG
   end
 end

data/lib/img_props.rb

@@ -1,3 +1,5 @@
+require 'uri'
+
 # Properties from user
 # All methods are idempotent.
 # attr_ methods can be called after compute_dependant_properties

data/lib/jekyll_img/version.rb

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

data/lib/jekyll_img.rb

@@ -9,11 +9,11 @@ require_relative 'jekyll_img/version'
 # @license SPDX-License-Identifier: Apache-2.0
 
 module ImgModule
-  PLUGIN_NAME = 'img'.freeze
+  PLUGIN_NAME = 'img'.freeze unless const_defined?(:PLUGIN_NAME)
 end
 
 module Jekyll
-  ImgError = ::JekyllSupport.define_error
+  ImgError = ::JekyllSupport.define_error unless const_defined?(:ImgError)
 
   # Plugin implementation
   class Img < ::JekyllSupport::JekyllTag
@@ -54,6 +54,6 @@ module Jekyll
       e.html_message
     end
 
-    ::JekyllSupport::JekyllPluginHelper.register(self, ImgModule::PLUGIN_NAME)
+    ::JekyllSupport::JekyllPluginHelper.register(self, ImgModule::PLUGIN_NAME) unless $PROGRAM_NAME.end_with?('/rspec')
   end
 end

data/spec/img_builder_spec.rb

@@ -5,17 +5,27 @@ require_relative '../lib/img_props'
 # Test ImgProperties
 class ImgPropertiesTest
   RSpec.describe ImgBuilder do
+    Dir.chdir("demo")
+
+    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">')
+    end
+
     it 'generates a default img' do
       props = ImgProperties.new
-      props.src = 'blah.webp'
+      props.src = 'jekyll.webp'
       builder = described_class.new(props)
       picture = <<~END_IMG
         <div class='imgWrapper imgFlex' style=' '>
           <picture class='imgPicture'>
-            <source srcset="/assets/images/blah.webp" type="image/webp">
-            <source srcset="/assets/images/blah.png" type="image/png">
+            <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/blah.png"
+              src="/assets/images/jekyll.png"
               style='width: 100%; '
             />
           </picture>
@@ -30,7 +40,7 @@ class ImgPropertiesTest
       props = ImgProperties.new
       props.caption = 'This is a caption'
       props.size = '123px'
-      props.src = 'blah.webp'
+      props.src = 'jekyll.webp'
       builder = described_class.new(props)
 
       caption = <<~END_CAPTION
@@ -43,11 +53,11 @@ class ImgPropertiesTest
         <div class='imgWrapper imgBlock' style='width: 123px; '>
           <figure>
             <picture class='imgPicture'>
-              <source srcset="/assets/images/blah.webp" type="image/webp">
-              <source srcset="/assets/images/blah.png" type="image/png">
+              <source srcset="/assets/images/jekyll.webp" type="image/webp">
+              <source srcset="/assets/images/jekyll.png" type="image/png">
               <img alt='This is a caption'
                 class="imgImg rounded shadow"
-                src="/assets/images/blah.png"
+                src="/assets/images/jekyll.png"
                 style='width: 100%; '
                 title='This is a caption'
               />

data/spec/img_props_spec.rb

@@ -26,15 +26,19 @@ class ImgProperitesTest
       expect(props.attr_target).to        eq(" target='_blank'")
       expect(props.attr_title).to         be_nil
       expect(props.attr_width_style).to   be_nil
-
-      props.compute_dependant_properties
-      expect(props.attr_wrapper_align_class).to eq('inline')
     end
 
+    # it 'defaults to inline alignment' do
+    #   props = described_class.new
+    #   props.src = 'relative/path.webp'
+    #   props.compute_dependant_properties
+    #   expect(props.attr_wrapper_align_class).to eq('inline')
+    # end
+
     it 'raises exception if src was not specified' do
       props = described_class.new
-      expect { props.src_png }.to raise_error(SystemExit)
-      expect { props.send(:setup_src) }.to raise_error(SystemExit)
+      expect { props.src_png }.to raise_error(Jekyll::ImgError)
+      expect { props.send(:setup_src) }.to raise_error(Jekyll::ImgError)
 
       props.src = 'relative/path.webp'
       props.send(:setup_src)
@@ -69,21 +73,18 @@ class ImgProperitesTest
 
       props.size = '100px'
       expect(props.attr_size_class).to be_nil
-      expect(props.attr_style_img).to eq("style='max-width: 100px;'")
+      expect(props.attr_style_img).to eq("style='width: 100%; '")
       expect(props.attr_width_style).to eq('width: 100px;')
 
       props.size = '10%'
       expect(props.attr_size_class).to be_nil
-      expect(props.attr_style_img).to eq("style='max-width: 10%;'")
       expect(props.attr_width_style).to eq('width: 10%;')
+      expect(props.attr_style_img).to eq("style='width: 100%; '")
 
       props.size = 'fullsize'
       expect(props.attr_size_class).to eq('fullsize')
       expect(props.attr_width_style).to be_nil
 
-      props.style = 'width: 30rem;'
-      expect(props.attr_style_img).to eq("style='width: 30rem;'")
-
       props.target = 'moon'
       expect(props.attr_target).to eq(" target='moon'")
 
@@ -95,17 +96,5 @@ class ImgProperitesTest
       expect(props.attr_size_class).to be_nil
       expect(props.attr_width_style).to eq('width: 100px;')
     end
-
-    it 'generates proper alignment attributes' do
-      props = described_class.new
-
-      props.align = 'inline'
-      props.compute_dependant_properties
-      expect(props.attr_wrapper_align_class).to eq('inline')
-
-      props.align = 'center'
-      props.compute_dependant_properties
-      expect(props.attr_wrapper_align_class).to eq('center')
-    end
   end
 end

data/spec/jekyll_img_spec.rb

@@ -1,9 +1,11 @@
 require 'jekyll'
 require 'jekyll_plugin_logger'
+require 'helper/jekyll_plugin_helper'
+require 'jekyll_plugin_support'
 require 'rspec/match_ignoring_whitespace'
 require_relative '../lib/jekyll_img'
 
-Registers = Struct.new(:page, :site)
+Registers = Struct.new(:page, :site) unless defined? :Registers
 
 # Mock for Collections
 class Collections
@@ -46,10 +48,11 @@ class MyTest
     let(:parse_context) { TestParseContext.new }
 
     let(:helper) do
-      JekyllPluginHelper.new(
+      ::JekyllSupport::JekyllPluginHelper.new(
         'img',
         'src="./blah.webp"',
-        logger
+        logger,
+        false
       )
     end
 
@@ -61,7 +64,7 @@ class MyTest
         helper.markup.dup,
         parse_context
       )
-      result = img.send(:render_impl, helper.markup)
+      result = img.send(:render_impl)
       expect(result).to match_ignoring_whitespace <<-END_RESULT
         <img src="./blah.webp">
       END_RESULT

data/spec/status_persistence.txt

@@ -0,0 +1,10 @@
+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   |

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll_img
 version: !ruby/object:Gem::Version
-  version: 0.2.5
+  version: 0.2.6
 platform: ruby
 authors:
 - Mike Slinn
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-20 00:00:00.000000000 Z
+date: 2024-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -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
 ...