jekyll-img-srcset 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9a56a3f914ab0ffe61cb9e9defd02ab2aa2105b7da27a3ed38462a626d31bd01
+  data.tar.gz: b44a9958fc4cc20013e564bc5c3a540e1d94155ea0b873963793884dffcd9f5c
+SHA512:
+  metadata.gz: 49dc2db7317d4228a898cb5f0edb7376b34a006e927ffbb1436caf083508ca3e1620f0825ff954af55adc027207753fc90c26bf516bd59fd6a3afd9ba2bdf5b8
+  data.tar.gz: d727ea1bc08d6100d0dc5cf37a90e3ef983399743d21730ef1139b01028fc09f5956550d813fb9dda086ee7c29b511fc536d889fbde86a42b22f32a0f87241b8

data/lib/jekyll-img-srcset.rb

@@ -0,0 +1,224 @@
+require 'mini_magick'
+
+def resize_image(url, widths, dest, base_image_path)
+    image = MiniMagick::Image.open(File.join(base_image_path, url))
+    w = image.dimensions[0]
+    aspect = image.dimensions[1].to_f / w
+    new_widths = widths.select {|x| x <= w}
+    new_widths.map do |width| 
+        [width, File.join(dest, base_image_path, "#{width}", url)]
+    end.select do |width, target| 
+        not File.exists? target
+    end.each do |width, target|
+        image = MiniMagick::Image.open(File.join(base_image_path, url))
+        image.resize "#{width}x#{width*aspect}"
+        if not Dir.exists? File.dirname(target)
+            FileUtils.mkdir_p File.dirname(target)
+        end
+        image.write target
+    end
+    return new_widths, w
+end
+
+def parse_identifier(ident)
+    i = {
+        classes: [],
+        sizes: "(min-width: 1180px) 1024px, (min-width: 980px) 844px, (min-width: 740px) 640, 100vw"
+    }
+    if ident.nil?
+        return i
+    end
+
+    ident.scan(/#[^\s\}]+|\.[^\s\}]+|[^\s\}]+="[^"]+"/) do | match |
+        if match.start_with? "#"
+            match[0] = ''
+            i[:id] = match
+        elsif match.start_with? "."
+            match[0] = ''
+            i[:classes] << match
+        else
+            parts = match.split '='
+            i[parts[0].to_sym] = parts[1].gsub(/^"/, '').gsub(/"$/, '')
+        end
+    end
+    return i
+end
+
+def format_image(ident, sizes, original_width, url, caption, title, baseurl, base_image_path)
+    srcset = sizes.map {|s| "#{baseurl}/#{base_image_path}/#{s}/#{url} #{s}w"}
+    srcset << "#{baseurl}/#{base_image_path}/#{url} #{original_width}w"
+    srcset = srcset.join ", "
+    classes = "image #{ident[:dimension]} #{ident[:classes].join " "}"
+    content = "<div class=\"#{classes}\""
+    if not ident[:style].nil?
+        content += " style=\"#{ident[:style]}\""
+    end
+    content += ">"
+    content += "<div>"
+    srcset_sizes = if sizes.length > 0
+        sizes.map do | size |
+            "(min-width: #{(size*1.16).floor}) #{size}px"
+        end.join(", ") + ", 100vw"
+    elsif not ident[:sizes].nil? and ident[:sizes].length > 0
+        ident[:sizes]
+    else
+        "(min-width: 1180px) 1024px, (min-width: 980px) 844px, (min-width: 740px) 640, 100vw"
+    end
+    if not caption.nil? and caption != ""
+        content += "<figure>
+            <img
+                    src    = \"#{baseurl}/#{base_image_path}/#{sizes[0]}/#{url}\"
+                    alt    = \"#{title}\"
+                    sizes  = \"#{srcset_sizes}\"
+                    srcset = \"#{srcset}\"
+            />
+            <figcaption>#{caption}</figcaption>
+        </figure>"
+    else
+        content += "<img
+            src    = \"#{baseurl}/#{base_image_path}/#{sizes[0]}/#{url}\"
+            alt    = \"#{title}\"
+            sizes  = \"#{srcset_sizes}\"
+            srcset = \"#{srcset}\"
+        />"
+    end
+    content += "</div>"
+    content += "</div>"
+    return content
+end
+
+def format_svg_image(url, ident, title, baseurl, base_image_path)
+    content = "<img "
+    if not ident[:style].nil?
+        content += "style=\"#{ident[:style]}\" "
+    end
+    if not ident[:classes].empty?
+        content += "class=\"#{ident[:classes].join " "}\" "
+    end
+    content += "src    = \"#{baseurl}/#{base_image_path}/#{url}\" "
+    content += "alt    = \"#{title}\""
+    content += "/>"
+end
+
+def process_page(document, payload)
+    # see https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841
+    doc_ext = document.extname.tr('.', '')
+    if payload['site']['markdown_ext'].include? doc_ext
+        content = document.content
+        base_image_path = document.site.config["base_image_path"] || "assets/images"
+        image_regex = /!\[(?<caption>.*?)?\]\((?<url>\S+?)(?<title> .+?)?\)(?<identifier>\{.+?\})?/ 
+        content = content.gsub(image_regex) do | img |
+            img = image_regex.match img
+            if (/\.(jpe?g|png)$/i =~ img["url"]).nil?
+                "#{base_image_path}/#{img[0]}"
+            elsif img["url"].start_with? "http"
+                img[0]
+            elsif img["url"].end_with? ".svg"
+                ident = parse_identifier img[:identifier]
+                format_svg_image(img["url"], ident, img["title"],
+                    document.site.baseurl)
+            else
+                if File.exists?(File.join base_image_path, img['url'])
+                    widths, original_width = resize_image(img['url'], 
+                        document.site.config["widths"],
+                        document.site.config["destination"], 
+                        base_image_path)
+                    document.site.keep_files.concat(widths.map do |w|
+                        File.join(base_image_path, "#{w}", img['url'])
+                    end)
+                    ident = parse_identifier img[:identifier]
+                    format_image(ident, widths, original_width,
+                        img["url"], img["caption"], img["title"],
+                        document.site.baseurl, base_image_path)
+                else
+                    img[0]
+                end
+            end
+        end
+        # puts content
+        document.content = content
+    end
+end
+
+Jekyll::Hooks.register [:pages, :posts, :documents], :pre_render do |document, payload|
+    process_page(document, payload)
+end
+
+# Jekyll::Hooks.register [:pages, :posts, :documents], :post_render do |document, payload|
+#     # puts "Post"
+#     # puts document
+#     process_page(document, payload)
+# end
+
+def check_in_context(context, path)
+    parts = path.split(".")
+    c = context.dup
+    parts.each do | part |
+        if not c.is_a?(Array) and c.key? part
+            c = c[part]
+        else
+            return nil
+        end
+    end
+    return c
+end
+
+module Jekyll
+    class ImgSrcsetTag < Liquid::Tag
+  
+      def initialize(tag_name, text, tokens)
+        super
+        @text = text
+      end
+  
+      def render(context)
+        config = context.registers[:site].config
+        base_image_path = config["base_image_path"] || "assets/images"
+        attrs = {
+            classes: [],
+        }
+        [/(\S+)="([^"]+?)"/, /(\S+)=([^\s\}"][^\s\}]+)/].each do | attr_regex |
+            @text.scan(attr_regex) do | key, value |
+                if key == "class"
+                    context_content = check_in_context context, value
+                    if context_content.nil?
+                        attrs[:classes] << value
+                    else
+                        attrs[:classes] << context_content
+                    end
+                else
+                    context_content = check_in_context context, value
+                    if context_content.nil?
+                        attrs[key.to_sym] = value
+                    else
+                        attrs[key.to_sym] = context_content
+                    end
+                end
+            end
+        end
+
+        #puts "fs context: #{context.find_variable('first_image')}"
+        # puts "Prepare image: #{attrs[:src]}"
+        if File.exists?(File.join base_image_path, attrs[:src])
+            widths, original_width = resize_image(
+                attrs[:src], 
+                config["widths"],
+                config["destination"], base_image_path)
+            context.registers[:site].keep_files.concat(widths.map do |w|
+                File.join(base_image_path, "#{w}", attrs[:src])
+            end)
+            format_image(attrs, widths, original_width,
+                attrs[:src], attrs[:caption], attrs[:title], 
+                context.registers[:site].baseurl, base_image_path)
+        else
+            puts "image not found: #{File.join base_image_path, attrs[:src]} in page at url #{context["page"]["url"]}"
+            ""
+        end
+      end
+    end
+end
+
+Liquid::Template.register_tag('imgsrcset', Jekyll::ImgSrcsetTag)
+  
+
+# /![(?<caption>.*?)?]\((?<url>[^\s]+?)(?<title> .+?)?\)(?<identifier>{.+?})?/

metadata

@@ -0,0 +1,100 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-img-srcset
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Jan-Philipp Stauffert
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-12-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: mini_magick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.9'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.9'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+description: 
+email:
+- jan-philipp.stauffert@uni-wuerzburg.de
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/jekyll-img-srcset.rb
+homepage: https://gitlab2.informatik.uni-wuerzburg.de/hci-development/jekyll-img-srcset
+licenses:
+- Apache-2.0
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.6
+signing_key: 
+specification_version: 4
+summary: Resizes images and puts all sizes into a srcset.
+test_files: []