jekyll-imgflow 0.3.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f902d95441ebd7a1c3a98200b140c2bf109343a79cf43700221a6cfec2902df
-  data.tar.gz: c89e222e5f37bb795f44ec7b6e3ecc865ca3fb66fefac0481ea31211f8fa7dfb
+  metadata.gz: fa56ff31b7cfe312dfe202726e049c99db5511dc35b2e82d721abde41c76488e
+  data.tar.gz: 88ff3c89e44a1dfe0fe022a016bbeba79185c137bca201c4e2c66c9d06cc5a92
 SHA512:
-  metadata.gz: cfc171eb11a3f533033671d2b8d8bfdc90bd3a9790bc9b764cf1ada4e58817179261419c80af2cd0eb2bc8c6bc1c130d754f31a0415664bd4262c43f0c3adb49
-  data.tar.gz: 1f92eb5e21c373a01e570bcaa843a51ccfd093655c46a64a4ae21248c9d4862d8cd6acac84830e2f1d023a8de4a8b8b2662bfbfe44e83c0a6a633c6eb23cc6d1
+  metadata.gz: c1f92e12c629652780356a972969ee435992b29dd62dea03ea263582084e8b512b35eb25e8bb1845c111834a5506cd1c3ffd5c9b4c5392ff6e17e20d3ea5c4ae
+  data.tar.gz: 92b73297116fd7dd7d38a5aeb349c81aeab97709f3a85886469dc0443e3fa9e5e35c2c971b1c01bd6682db2c59776c54112682a31e3610c64a6254b3d4067441

data/lib/jekyll-imgflow/html_generator.rb

@@ -83,7 +83,8 @@ module JekyllImgFlow
         parent: attributes[:parent] || {},
         alt: attributes[:alt],
         link: attributes[:link],
-        modal: attributes[:modal]
+        modal: attributes[:modal],
+        modal_results: attributes[:modal_results] || []
       }
     end
 
@@ -96,7 +97,8 @@ module JekyllImgFlow
         parent: {},
         alt: nil,
         link: nil,
-        modal: nil
+        modal: nil,
+        modal_results: []
       }
     end
 

data/lib/jekyll-imgflow/imgflow_tag.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "shellwords"
+require "fastimage"
 
 module Jekyll
   class ImgflowTag < Liquid::Tag
@@ -99,11 +100,51 @@ module Jekyll
                                    page_path)
                 end
 
+      modal_results = if operations.empty?
+                        []
+                      else
+                        process_modal_variants(components, operations.first, parsed, original_name,
+                                               input_path, page_path)
+                      end
       relative_results = results.uniq.map { |result| relative_result_path(result, site) }
+      relative_modal_results = modal_results.uniq.map do |result|
+        relative_result_path(result, site)
+      end
       parsed = parsed.merge(markup_format: "picture") if relative_results.length > 1
+      parsed = parsed.merge(modal_results: relative_modal_results)
       generate_html(relative_results, parsed, context)
     end
 
+    def process_modal_variants(components, operation, parsed, original_name, input_path, page_path)
+      config = components[:config]
+      return [] unless modal_requested?(parsed, config)
+
+      original_width = FastImage.size(input_path)&.first
+      return [] unless original_width
+
+      params = operation[:params].dup
+      formats = Array(params.delete(:formats) || params[:format])
+      formats = config.formats if formats.empty?
+      modal_width = [original_width, config.sizes.values.max].min
+
+      formats.map do |format|
+        modal_params = params.merge(width: modal_width, format: format)
+        process_variant(components, operation, modal_params, original_name, input_path, page_path)
+      end
+    rescue FastImage::ImageFetchError, FastImage::UnknownImageType
+      []
+    end
+
+    def modal_requested?(parsed, config)
+      return false if %w[direct_url naked_srcset].include?(parsed[:markup_format])
+
+      attrs = parsed[:html_attributes] || {}
+      return false if attrs[:link]
+
+      modal = attrs[:modal]
+      modal.nil? ? (config.respond_to?(:image_modal) && config.image_modal) : modal.to_s == "true"
+    end
+
     def process_variants(components, operation, original_name, input_path, page_path)
       params = operation[:params].dup
       formats = Array(params.delete(:formats) || params[:format])
@@ -195,7 +236,8 @@ module Jekyll
         parent: extract_prefixed_attrs(base_attrs, "parent-"),
         alt: base_attrs[:alt],
         link: base_attrs[:link],
-        modal: base_attrs[:modal]
+        modal: base_attrs[:modal],
+        modal_results: parsed[:modal_results] || []
       }
     end
 

data/lib/jekyll-imgflow/modal_assets.rb

@@ -20,15 +20,24 @@ module JekyllImgFlow
 
     JS = <<~JS
       (function(){
-      function openModal(src,alt){
+      function openModal(trigger,alt){
       var o=document.createElement('div');
       o.className='imgflow-modal-overlay';
+      var p=document.createElement('picture');
+      var href=trigger.getAttribute('href');
+      var types={avif:'image/avif',webp:'image/webp',png:'image/png',jpg:'image/jpeg',jpeg:'image/jpeg'};
+      var formats=(trigger.getAttribute('data-imgflow-modal-formats')||'').split(',');
+      formats.forEach(function(format){
+      if(!format)return;
+      var s=document.createElement('source');
+      s.srcset=href.replace(/.[^.]+$/,'.'+format);s.type=types[format];p.appendChild(s);});
       var i=document.createElement('img');
-      i.src=src;i.alt=alt||'';i.className='imgflow-modal-image';
+      i.src=href;
+      i.alt=alt||'';i.className='imgflow-modal-image';p.appendChild(i);
       var b=document.createElement('button');
       b.className='imgflow-modal-close';b.setAttribute('aria-label','Close');
       b.innerHTML='&times;';
-      o.appendChild(b);o.appendChild(i);document.body.appendChild(o);
+      o.appendChild(b);o.appendChild(p);document.body.appendChild(o);
       function c(){document.body.removeChild(o);
       document.removeEventListener('keydown',k);}
       function k(e){if(e.key==='Escape')c();}
@@ -38,7 +47,7 @@ module JekyllImgFlow
       document.addEventListener('click',function(e){
       var t=e.target.closest('[data-imgflow-modal]');
       if(!t)return;e.preventDefault();
-      openModal(t.getAttribute('href'),t.getAttribute('data-imgflow-alt'));});
+      openModal(t,t.getAttribute('data-imgflow-alt'));});
       })();
     JS
 
@@ -84,20 +93,72 @@ module JekyllImgFlow
       @config&.image_modal ? true : false
     end
 
-    # Pick the best image path for the modal — prefer the fallback format
-    # (e.g. jpg) for maximum browser compatibility
+    # Pick the largest existing fallback-format variant for the modal.
     def modal_image_path
-      fallback_ext = @config&.fallback_format ? ".#{@config.fallback_format}" : ".jpg"
-      fallback = @results.find { |r| File.extname(r).downcase == fallback_ext }
-      fallback || @results.last
+      variants = modal_variants
+      variants[modal_fallback_format] || @results.last
+    end
+
+    def modal_variants
+      candidates = @attributes[:modal_results] + @results + generated_modal_results
+      max_width = modal_max_width
+
+      candidates.each_with_object({}) do |result, variants|
+        parsed = JekyllImgFlow::FilenameGenerator.new.parse_filename(File.basename(result))
+        next if parsed.empty? || (max_width && parsed[:width] > max_width)
+        next if variants[parsed[:format]] && modal_width(variants[parsed[:format]]) >= parsed[:width]
+
+        variants[parsed[:format]] = result
+      end
+    end
+
+    def modal_fallback_format
+      @config&.fallback_format.to_s
+    end
+
+    def modal_max_width
+      return unless @config.respond_to?(:sizes)
+
+      @config.sizes.values.max
+    end
+
+    def generated_modal_results
+      return [] unless @config && @context&.registers&.key?(:site)
+
+      result = @results.first
+      parsed = JekyllImgFlow::FilenameGenerator.new.parse_filename(File.basename(result))
+      return [] if parsed.empty?
+
+      site = @context.registers[:site]
+      directory = File.join(site.source, File.dirname(result.delete_prefix("/")))
+      return [] unless File.directory?(directory)
+
+      max_width = @config.sizes.values.max
+      Dir.children(directory).filter_map do |filename|
+        candidate = JekyllImgFlow::FilenameGenerator.new.parse_filename(filename)
+        next unless candidate[:base_name] == parsed[:base_name]
+        next unless candidate[:hash] == parsed[:hash]
+        next if max_width && candidate[:width] > max_width
+
+        File.join(File.dirname(result), filename)
+      end
+    rescue Errno::ENOENT
+      []
+    end
+
+    def modal_width(result)
+      JekyllImgFlow::FilenameGenerator.new.parse_filename(File.basename(result))[:width] || 0
     end
 
     # Wrap HTML in modal trigger anchor
     def wrap_with_modal(html)
-      modal_href = html_path(modal_image_path)
+      variants = modal_variants
+      modal_href = html_path(variants[modal_fallback_format] || @results.last)
       return html unless modal_href
 
+      source_formats = variants.keys.reject { |format| format == modal_fallback_format }
       data_attrs = " data-imgflow-modal"
+      data_attrs += " data-imgflow-modal-formats=\"#{source_formats.join(',')}\"" unless source_formats.empty?
       alt = @attributes[:alt]
       data_attrs += " data-imgflow-alt=\"#{escape_attr_value(alt)}\"" if alt
 

data/lib/jekyll-imgflow/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module JekyllImgFlow
-  VERSION = "0.3.1"
+  VERSION = "0.3.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-imgflow
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.2
 platform: ruby
 authors:
 - Svend Gundestrup