jekyll-imgflow 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b95efe6605d712e14895c4152a68b4b751eea6954416e428acbe96518bd4284
-  data.tar.gz: 434fc1985138599142a94d32dda9c986c63893c4acfc587e085d8e3486d700d4
+  metadata.gz: d37c208e7250fe6da8291bfab933d5df7391347d0ce95492e32e1d94e54df7a8
+  data.tar.gz: cd222c0e6dbdcffe168ec0919a12d53c57324a277cb9efeecb5173a98c4c5b04
 SHA512:
-  metadata.gz: f588617884137bcf8054e2a1bce6489b9aebfe4829ce9a279bb65654871dd13d41df6e6f0e0a15ddeb7fb39b9f4f9776206a2f6ff16b83db6e11c82b76dd78ef
-  data.tar.gz: 480ba9208f2952793bff054b24b8f7e79a47de1b83d322d0f0f261242cbd8d01f4e532b0571397d4f0efb18c31f27867546ba987f51add3a664fb5b7049bcfb1
+  metadata.gz: 2f566b0e2d70993a209a5353cf1b91d54e3b3f3143397146f58bbbcf19428eab9797ed5def60efdd3d8f926f214fa2ec6670d47ccfd6c000fe2f9c35b2bac00c
+  data.tar.gz: 0b601aea8c16d71133816f034b4277e399e6108569af169c0984416ef6e5d90edc30490d17af254f736f2897eae5c6b55d515888a4b71af35dd8020b63f37a88

data/lib/jekyll-imgflow/config.rb

@@ -20,11 +20,12 @@ module JekyllImgFlow
     # Format used for the <img> fallback in <picture> elements.
     # All other formats in `formats` get <source> tags for browsers that support them.
     DEFAULT_FALLBACK_FORMAT = "jpg"
+    DEFAULT_IMAGE_MODAL = true
 
     attr_reader :site, :originals, :output, :input_formats, :sizes, :formats,
                 :quality, :backend_priority, :imgproxy_url,
                 :weserv_url, :flyimg_url,
-                :optimize_qualities, :fallback_format
+                :optimize_qualities, :fallback_format, :image_modal
 
     def initialize(site)
       shared = site.config["shared_images_configs"] || {}
@@ -40,6 +41,7 @@ module JekyllImgFlow
       @quality          = cfg["quality"] || DEFAULT_QUALITY
       @backend_priority = cfg["backend_priority"] || DEFAULT_BACKEND_PRIORITY
       @fallback_format  = cfg["fallback_format"] || DEFAULT_FALLBACK_FORMAT
+      @image_modal      = cfg.fetch("image_modal", DEFAULT_IMAGE_MODAL)
 
       @imgproxy_url = cfg["imgproxy_url"]
       @weserv_url       = cfg["weserv_url"]

data/lib/jekyll-imgflow/hooks.rb

@@ -47,6 +47,13 @@ module JekyllImgFlow
     end
   end
 
+  # Inject modal CSS/JS into pages that contain data-imgflow-modal triggers
+  %i[pages documents].each do |type|
+    Jekyll::Hooks.register type, :post_render do |doc|
+      doc.output = ModalAssets.inject(doc.output) if doc.output
+    end
+  end
+
   def self.cleanup_orphaned_images(site, manifest = nil)
     Jekyll.logger.info "🧹 ImgFlow: Checking for orphaned specialized images..."
 

data/lib/jekyll-imgflow/html_generator.rb

@@ -4,6 +4,8 @@ module JekyllImgFlow
   # Unified HTML Generator for all markup formats
   # Supports Picture Tag compatibility with multiple markup formats and attributes
   class HtmlGenerator
+    include ModalWrapper
+
     # Generate HTML based on markup format and attributes
     # @param results [Array<String>] Processed image paths
     # @param attributes [Hash] HTML attributes by element
@@ -47,6 +49,9 @@ module JekyllImgFlow
       # Wrap in link if specified
       html = wrap_with_link(html) if @attributes[:link]
 
+      # Wrap in modal trigger if enabled (only for HTML elements, not raw URLs)
+      html = wrap_with_modal(html) if modal_enabled? && html_element?
+
       # Wrap in parent container if specified
       html = wrap_with_parent(html) if @attributes[:parent]&.any?
 
@@ -77,7 +82,8 @@ module JekyllImgFlow
         a: attributes[:a] || {},
         parent: attributes[:parent] || {},
         alt: attributes[:alt],
-        link: attributes[:link]
+        link: attributes[:link],
+        modal: attributes[:modal]
       }
     end
 
@@ -89,7 +95,8 @@ module JekyllImgFlow
         a: {},
         parent: {},
         alt: nil,
-        link: nil
+        link: nil,
+        modal: nil
       }
     end
 

data/lib/jekyll-imgflow/imgflow_tag.rb

@@ -193,7 +193,8 @@ module Jekyll
         a: extract_prefixed_attrs(base_attrs, "a-"),
         parent: extract_prefixed_attrs(base_attrs, "parent-"),
         alt: base_attrs[:alt],
-        link: base_attrs[:link]
+        link: base_attrs[:link],
+        modal: base_attrs[:modal]
       }
     end
 

data/lib/jekyll-imgflow/modal_assets.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module JekyllImgFlow
+  # Inline CSS and JS for the image modal/lightbox feature.
+  # Injected by hooks.rb into pages that contain data-imgflow-modal triggers.
+  module ModalAssets
+    CSS = <<~CSS
+      .imgflow-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);
+      display:flex;align-items:center;justify-content:center;z-index:9999;
+      cursor:pointer;animation:imgflow-fade .15s ease-out}
+      .imgflow-modal-image{max-width:90vw;max-height:90vh;object-fit:contain;
+      cursor:auto;border-radius:4px;box-shadow:0 4px 30px rgba(0,0,0,.5)}
+      .imgflow-modal-close{position:absolute;top:1rem;right:1rem;
+      background:rgba(255,255,255,.2);border:none;color:#fff;font-size:2rem;
+      width:3rem;height:3rem;border-radius:50%;cursor:pointer;
+      display:flex;align-items:center;justify-content:center;line-height:1}
+      .imgflow-modal-close:hover{background:rgba(255,255,255,.4)}
+      @keyframes imgflow-fade{from{opacity:0}to{opacity:1}}
+    CSS
+
+    JS = <<~JS
+      (function(){
+      function openModal(src,alt){
+      var o=document.createElement('div');
+      o.className='imgflow-modal-overlay';
+      var i=document.createElement('img');
+      i.src=src;i.alt=alt||'';i.className='imgflow-modal-image';
+      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);
+      function c(){document.body.removeChild(o);
+      document.removeEventListener('keydown',k);}
+      function k(e){if(e.key==='Escape')c();}
+      o.addEventListener('click',function(e){
+      if(e.target===o||e.target===b)c();});
+      document.addEventListener('keydown',k);}
+      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'));});
+      })();
+    JS
+
+    def self.inject(html)
+      return html unless html&.include?("data-imgflow-modal")
+
+      style_tag = "<style>\n#{CSS}</style>"
+      script_tag = "<script>\n#{JS}</script>"
+
+      if html.include?("</head>")
+        html = html.sub("</head>", "#{style_tag}\n</head>")
+        html = html.sub("</body>", "#{script_tag}\n</body>") if html.include?("</body>")
+      elsif html.include?("</body>")
+        html = html.sub("</body>", "#{style_tag}\n#{script_tag}\n</body>")
+      else
+        html = "#{html}\n#{style_tag}\n#{script_tag}"
+      end
+
+      html
+    end
+  end
+
+  # Modal wrapping logic for HtmlGenerator — extracted to keep HtmlGenerator
+  # under the RuboCop class length limit.
+  module ModalWrapper
+    # Formats that produce raw URLs/srcsets (not wrappable HTML elements)
+    NON_HTML_FORMATS = %w[direct_url naked_srcset].freeze
+
+    # Check if the current markup format produces an HTML element
+    def html_element?
+      !NON_HTML_FORMATS.include?(@markup_format)
+    end
+
+    # Determine if modal behavior is enabled for this image
+    # Per-image modal:true/false overrides config default
+    # Modal is skipped when an explicit link is set
+    def modal_enabled?
+      return false if @attributes[:link]
+
+      modal_attr = @attributes[:modal]
+      return modal_attr.to_s == "true" if modal_attr
+
+      @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
+    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
+    end
+
+    # Wrap HTML in modal trigger anchor
+    def wrap_with_modal(html)
+      modal_href = html_path(modal_image_path)
+      return html unless modal_href
+
+      data_attrs = " data-imgflow-modal"
+      alt = @attributes[:alt]
+      data_attrs += " data-imgflow-alt=\"#{escape_attr_value(alt)}\"" if alt
+
+      "<a href=\"#{modal_href}\"#{data_attrs}>#{html}</a>"
+    end
+  end
+end

data/lib/jekyll-imgflow/parser.rb

@@ -9,7 +9,7 @@ module JekyllImgFlow
     # Define valid operation parameters and attribute types
     OPERATION_PARAMS = %i[width height ratio aspect_ratio quality format formats
                           optimize level watermark opacity position keep preset].freeze
-    HTML_ATTRIBUTES = %i[alt class title loading].freeze
+    HTML_ATTRIBUTES = %i[alt class title loading link modal].freeze
 
     # Simple operation mappings for single-parameter operations
     SIMPLE_OPERATIONS = {

data/lib/jekyll-imgflow/version.rb

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

data/lib/jekyll-imgflow.rb

@@ -23,6 +23,7 @@ require_relative "jekyll-imgflow/provider_registry"
 require_relative "jekyll-imgflow/build_time_processor"
 require_relative "jekyll-imgflow/parser"
 require_relative "jekyll-imgflow/tags/tag_registry"
+require_relative "jekyll-imgflow/modal_assets"
 require_relative "jekyll-imgflow/html_generator"
 require_relative "jekyll-imgflow/imgflow_tag"
 require_relative "jekyll-imgflow/picture_tag_adaptor"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-imgflow
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Svend Gundestrup
@@ -74,6 +74,7 @@ files:
 - lib/jekyll-imgflow/html_generator.rb
 - lib/jekyll-imgflow/imgflow_tag.rb
 - lib/jekyll-imgflow/manifest_manager.rb
+- lib/jekyll-imgflow/modal_assets.rb
 - lib/jekyll-imgflow/operation_processor.rb
 - lib/jekyll-imgflow/parser.rb
 - lib/jekyll-imgflow/path_resolver.rb