jekyll-imgflow 0.3.0 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d37c208e7250fe6da8291bfab933d5df7391347d0ce95492e32e1d94e54df7a8
-  data.tar.gz: cd222c0e6dbdcffe168ec0919a12d53c57324a277cb9efeecb5173a98c4c5b04
+  metadata.gz: fa56ff31b7cfe312dfe202726e049c99db5511dc35b2e82d721abde41c76488e
+  data.tar.gz: 88ff3c89e44a1dfe0fe022a016bbeba79185c137bca201c4e2c66c9d06cc5a92
 SHA512:
-  metadata.gz: 2f566b0e2d70993a209a5353cf1b91d54e3b3f3143397146f58bbbcf19428eab9797ed5def60efdd3d8f926f214fa2ec6670d47ccfd6c000fe2f9c35b2bac00c
-  data.tar.gz: 0b601aea8c16d71133816f034b4277e399e6108569af169c0984416ef6e5d90edc30490d17af254f736f2897eae5c6b55d515888a4b71af35dd8020b63f37a88
+  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
@@ -60,7 +61,8 @@ module Jekyll
       # Combine image path with preset markup. Keep the path quoted because
       # filenames may contain spaces.
       image_markup = if image_path.include?(" ")
-                       "\"#{image_path.gsub('"', '\\"')}\""
+                       escaped_path = image_path.gsub("\\") { "\\\\" }.gsub('"', '\\"')
+                       "\"#{escaped_path}\""
                      else
                        image_path
                      end
@@ -98,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])
@@ -194,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/picture_tag_adaptor.rb

@@ -42,11 +42,11 @@ module JekyllImgFlow
     # @param picture_markup [String] Picture Tag markup like "{% picture hero image.jpg 16:9 --alt Text %}"
     # @return [Hash] Translation result with markup and attributes
     def translate_to_imgflow(picture_markup)
-      # Extract content between {% picture ... %}
-      match = picture_markup.match(/\{%\s*picture\s+(.+?)%\}/)
-      return { markup: "", attributes: {} } unless match
+      # Extract content between {% picture ... %} without a backtracking regex
+      content = extract_picture_content(picture_markup)
+      return { markup: "", attributes: {} } unless content
 
-      content = match[1].strip
+      content = content.strip
       return { markup: "", attributes: {} } if content.empty?
 
       # Parse arguments
@@ -75,6 +75,32 @@ module JekyllImgFlow
 
     private
 
+    def extract_picture_content(markup)
+      offset = 0
+      while (opening = markup.index("{%", offset))
+        cursor = skip_whitespace(markup, opening + 2)
+        if markup[cursor, 7] == "picture"
+          cursor += 7
+          if cursor < markup.length && whitespace?(markup[cursor])
+            cursor = skip_whitespace(markup, cursor)
+            closing = markup.index("%}", cursor)
+            return markup[cursor...closing] if closing
+          end
+        end
+        offset = opening + 2
+      end
+      nil
+    end
+
+    def skip_whitespace(markup, cursor)
+      cursor += 1 while cursor < markup.length && whitespace?(markup[cursor])
+      cursor
+    end
+
+    def whitespace?(character)
+      [" ", "\t", "\r", "\n"].include?(character)
+    end
+
     # Parse arguments handling quoted paths and attributes
     # @param content [String] Raw content
     # @return [Array] Parsed arguments

data/lib/jekyll-imgflow/providers/sharp.rb

@@ -79,7 +79,7 @@ module JekyllImgFlow
 
         format_op = @operations.find { |op| op[:type] == :format }
         quality_op = @operations.find { |op| op[:type] == :quality }
-        command_parts += ["-f", format_op[:format]] if format_op
+        command_parts += ["-f", sharp_format(format_op[:format])] if format_op
         command_parts += ["-q#{quality_op[:quality]}"] if quality_op
 
         if opacity && opacity < 1.0
@@ -142,7 +142,7 @@ module JekyllImgFlow
         quality_op = @operations.find { |op| op[:type] == :quality }
         alpha_op = @operations.find { |op| op[:type] == :alpha_opacity }
 
-        command_parts += ["-f", format_op[:format]] if format_op
+        command_parts += ["-f", sharp_format(format_op[:format])] if format_op
         command_parts += ["-q#{quality_op[:quality]}"] if quality_op
         if alpha_op
           alpha_value = (alpha_op[:opacity] * 255).round
@@ -200,7 +200,7 @@ module JekyllImgFlow
         quality_op = @operations.find { |op| op[:type] == :quality }
         alpha_op = @operations.find { |op| op[:type] == :alpha_opacity }
 
-        command_parts += ["-f", format_op[:format]] if format_op
+        command_parts += ["-f", sharp_format(format_op[:format])] if format_op
         command_parts += ["-q#{quality_op[:quality]}"] if quality_op
         if alpha_op
           alpha_value = (alpha_op[:opacity] * 255).round
@@ -209,6 +209,12 @@ module JekyllImgFlow
 
         command_parts.join(" ")
       end
+
+      # Sharp CLI calls JPEG "jpeg", while ImgFlow uses the standard "jpg"
+      # extension in generated filenames and public configuration.
+      def sharp_format(format)
+        format.to_s == "jpg" ? "jpeg" : format
+      end
     end
   end
 end

data/lib/jekyll-imgflow/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module JekyllImgFlow
-  VERSION = "0.3.0"
+  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.0
+  version: 0.3.2
 platform: ruby
 authors:
 - Svend Gundestrup