jekyll-picture-tag-ng 0.3.1 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0db7bf60332a01764f52029da09c289aae64dca5211d85d12e17c6fd3518b616
-  data.tar.gz: f86895b50c8ac8cf8062d55f9084df2650458dde3c7f6dae6ac411d26c4d4fbc
+  metadata.gz: 9b13b667958ab46916ceda313a2dec27a6d824e9e567fc68faa369734cd56272
+  data.tar.gz: 390e2ab18a416bf1e3e3523d18d6fe5b94a1a2a5bbf7b05a2a6cec8fcbddb8b9
 SHA512:
-  metadata.gz: 036f7231a4ca24104af88f7a79d048e4924de12920c2ed54353d07f58f4ff6375e8cdd0b19f6c4775de8d5835f59ccb195b29770f380c5f8d76e0b061fdb051b
-  data.tar.gz: 7990c47da142e389e07a2d74a878a9f4d05ad91fe12668ffc7ffa9abd9c87f52989ab29438b3f6861d588aa41b52cb4acb2aebd769f610b15904d236f6f92363
+  metadata.gz: 39af2751eab33d119cb9f494e99bf387a542dd397bbc098ab346075100608263040412036f85618a8d5eca60a98fa6c584a3cd2acfb271d9b9e1e4a27f277790
+  data.tar.gz: ac269bf8ed4c504e7139b2b16eb6078ba3f3105c67a95a6d55371cda449f8a51f9c5bf7a9d061d69895bf66087bd6b81fbc5a7bdab7ee81008e658ab7ebe1eed

data/README.md

@@ -72,10 +72,112 @@ picture_tag_ng:
 The example above is equivalent to the defaults.
 
 - `background_color` is the color used to replace transparency when converting from `webp` to `jpeg`
-- `picture_versions` maps version names to target widths in pixels. The default configuration above produces output files 700px wide in `img/m/` and 400px wide in `img/s/`.
+- `picture_versions` in the simplest form, maps version names to target widths in pixels. The default configuration above produces output files 700px wide in `img/m/` and 400px wide in `img/s/`. See below for more complex forms.
 - `parallel` is a boolean indicating if you want to generate the output files in parallel threads. With a website that has a lot of large pictures, I get ~30% speed improvements when generating the site locally.
 - `threads` is the number of concurrent threads for generating the website (only used if `parallel` is `true`)
 
+#### `picture_versions` option
+
+The `picture_versions` option must be a map. The keys are the version identifiers, and the values control the output for each version. The values can be defined in one of the following formats :
+
+```yaml
+picture_tag_ng:
+  picture_versions:
+    s: 400
+```
+
+When the version consists only of an integer, the value is used for both the output width and the corresponding `max-width` media attribute.
+
+```yaml
+picture_tag_ng:
+  picture_versions:
+    s:
+      out_size: 400
+```
+
+Each version can be defined as a map, with the `out_size` key being required (must be an integer). This value controls the output width for the version. If `out_size` is the only defined key, it is also used for the corresponding `max-with` media attribute.
+
+```yaml
+picture_tag_ng:
+  picture_versions:
+    m:
+      out_size: 700
+      media: 1200
+```
+
+Each version that is a map can define the `media` key. If the value is an integer, produces `(max-width: #{media_integer_from_conf}px)` for the associated media attribute.
+
+```yaml
+picture_tag_ng:
+  picture_versions:
+    m:
+      out_size: 700
+      media: "screen and (max-width: 1200px)"
+```
+
+If `media` is a string, its value is used as-is for the corresponding media attribute.
+
+Additionally, you can add the `default: true` property to any version to remove the corresponding media attribute from HTML `source` elements, and use this version as the `src` for the default HTML `img` element. If no version is explicitly set as the default, the largest one will me used.
+
+The following configuration shows one version for each allowed format :
+
+```yaml
+picture_tag_ng:
+  picture_versions:
+    s:
+      out_size: 400
+    m:
+      out_size: 700
+      media: 1200
+    l:
+      out_size: 1200
+      media: "screen and (max-width: 1200px)"
+    xl:
+      out_size: 2000
+      default: true
+```
+
+When using the above configuration, the plugin will convert
+
+```md
+![Alt text](/path/to/img/orig.jpg)
+```
+
+to the following HTML :
+
+```html
+<picture>
+    <source media="(max-width: 400px)" srcset="/img/s/path/to/img/orig.webp" type="image/webp">
+    <source media="(max-width: 400px)" srcset="/img/s/path/to/img/orig.jpg" type="image/jpeg">
+    <source media="(max-width: 1200px)" srcset="/img/m/path/to/img/orig.webp" type="image/webp">
+    <source media="(max-width: 1200px)" srcset="/img/m/path/to/img/orig.jpg" type="image/jpeg">
+    <source media="screen and (max-width: 1200px)" srcset="/img/l/path/to/img/orig.webp" type="image/webp">
+    <source media="screen and (max-width: 1200px)" srcset="/img/l/path/to/img/orig.jpg" type="image/jpeg">
+    <source srcset="/img/xl/path/to/img/orig.webp" type="image/webp">
+    <source srcset="/img/xl/path/to/img/orig.jpg" type="image/jpeg">
+    <img src="/img/xl/path/to/img/orig.jpg" alt="Alt text" loading="lazy">
+</picture>
+```
+
+#### Extra `convert` arguments
+
+The `extra_convert_args` and `pre_extra_convert_args` options allow you to add any [`convert` argument](https://imagemagick.org/script/convert.php) to the image conversion processes. The `pre_extra_convert_args` will be added before the resize operation, and the `extra_convert_args` after the resize operation. These options must be either arrays of strings or a string that will be split on spaces. This can be used to add a watermark to all your pictures (see example below).
+
+Additionally, you can set different values based on the version for both these options. In the example below, the `m` version of output pictures will be blurred :
+
+```yaml
+picture_tag_ng:
+  pre_extra_convert_args: ["-font", "DejaVu-Sans-Book", "-pointsize", "72",
+    "-fill", "black", "-annotate", "+25+75", "Watermark"] # Add watermark to all output pics
+  picture_versions:
+    m:
+      out_size: 700
+      extra_convert_args: ["-scale", "20%", "-blur", "0x2.5", "-resize", "500%"] # Blur `m` pics
+    s: 400
+```
+
+You can disable the default resize operation by setting `replace_convert_args: true` either at the plugin level or at the version level. If the, the version-specific value will override the plugin-global value.
+
 ## Development
 
 After cloning the repo, you can run the following commands in a local Jekyll website's folder to start hacking on the code of `jekyll-picture-tag-ng` (you'll need to replace the path in the second command) :

data/lib/jekyll-picture-tag-ng/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module PictureTag
-    VERSION = "0.3.1"
+    VERSION = "0.5.0"
   end
 end

data/lib/jekyll-picture-tag-ng.rb

@@ -16,7 +16,9 @@ module Jekyll
         "s" => "400",
         "m" => "700"
       },
-      "background_color" => "FFFFFF"
+      "background_color" => "FFFFFF",
+      "extra_convert_args" => [],
+      "replace_convert_args" => false
     }.freeze
 
     class Error < StandardError; end
@@ -26,7 +28,11 @@ module Jekyll
       def initialize(site, orig_static_file, version, pictype)
         super(site, site.source, orig_static_file.dir, orig_static_file.name)
         @version = version
-        @picture_dim = picture_versions[@version]
+        @picture_dim = if picture_versions[@version].is_a?(Hash)
+                         picture_versions[@version]["out_size"]
+                       else
+                         picture_versions[@version]
+                       end
         @pictype = pictype
         @collection = nil
       end
@@ -35,33 +41,75 @@ module Jekyll
         @config ||= CONFIG.merge(@site.config["picture_tag_ng"] || {})
       end
 
+      def replace_args
+        result = config["replace_convert_args"]
+        if picture_versions[@version].is_a?(Hash) &&
+           !picture_versions[@version]["replace_convert_args"].nil?
+          result = picture_versions[@version]["replace_convert_args"]
+        end
+        result
+      end
+
       def picture_versions
         config["picture_versions"]
       end
 
+      def as_args(input)
+        if input.is_a?(Array)
+          input.clone
+        elsif input.is_a?(String)
+          input.split(" ")
+        else
+          raise(
+            TypeError,
+            "[jekyll-picture-tag-ng] `extra_convert_args` must be an array or a string"
+          )
+        end
+      end
+
+      def convert_args
+        @convert_args ||= as_args(config["extra_convert_args"]).concat(
+          picture_versions[@version].is_a?(Hash) &&
+          picture_versions[@version]["extra_convert_args"] || []
+        )
+      end
+
+      def pre_convert_args
+        @pre_convert_args ||= as_args(config["pre_extra_convert_args"]).concat(
+          picture_versions[@version].is_a?(Hash) &&
+          picture_versions[@version]["pre_extra_convert_args"] || []
+        )
+      end
+
       def picture?
         extname =~ /(\.jpg|\.jpeg|\.webp)$/i
       end
 
       def destination(dest)
         output_dir = File.join("img", @version, @dir)
-        output_basename = @site.in_dest_dir(@site.dest, File.join(output_dir, "#{basename}.#{@pictype}"))
+        output_basename = @site.in_dest_dir(
+          @site.dest,
+          File.join(output_dir, "#{basename}.#{@pictype}")
+        )
         FileUtils.mkdir_p(File.dirname(output_dir))
         @destination ||= {}
         @destination[dest] ||= output_basename
       end
 
       def popen_args(dest_path)
-        args = ["convert", @path, "-resize", "#{@picture_dim}x>"]
+        args = ["convert", @path]
+        args.concat pre_convert_args
+        args.concat ["-resize", "#{@picture_dim}x>"] unless replace_args
         if @pictype == "jpg"
           args.concat ["-background", "##{@config["background_color"]}",
                        "-flatten", "-alpha", "off"]
         end
+        args.concat convert_args
         args.push dest_path
       end
 
       def copy_file(dest_path)
-        Jekyll.logger.debug "copy_file : #{path} -> #{dest_path}"
+        Jekyll.logger.debug "copy_file : #{path} -> #{dest_path} (#{popen_args(dest_path)})"
         p = IO.popen(popen_args(dest_path))
         p.close
         File.utime(self.class.mtimes[path], self.class.mtimes[path], dest_path)
@@ -197,13 +245,51 @@ module Kramdown
         site_config["picture_versions"]
       end
 
+      def _get_default_pic_version
+        largest_version = ""
+        largest_size = 0
+        picture_versions.each do |version, geometry|
+          size = if geometry.is_a?(Integer)
+                   geometry
+                 elsif geometry["default"]
+                   999_999_999
+                 else
+                   geometry["out_size"]
+                 end
+          if size > largest_size
+            largest_version = version
+            largest_size = size
+          end
+        end
+        largest_version
+      end
+
+      def default_pic_version
+        @default_pic_version ||= _get_default_pic_version
+      end
+
+      def media_attribute(version)
+        geometry = picture_versions[version]
+        if geometry.is_a?(Hash)
+          if geometry["media"].is_a?(String)
+            "media=\"#{geometry["media"]}\""
+          elsif geometry["media"].is_a?(Integer)
+            "media=\"(max-width: #{geometry["media"]}px)\""
+          else
+            "media=\"(max-width: #{geometry["out_size"]}px)\""
+          end
+        else
+          "media=\"(max-width: #{geometry}px)\""
+        end
+      end
+
       def convert_img(el, _indent)
         require "cgi"
         res = "<picture>"
         new_src = el.attr["src"]
         if File.extname(el.attr["src"]) =~ /(\.jpg|\.jpeg|\.webp)$/i &&
            el.attr["src"] !~ %r{^https?://}
-          picture_versions.each_with_index do |(version, geometry), index|
+          picture_versions.each do |version, _geometry|
             src_base = File.join(
               "/img",
               version,
@@ -212,12 +298,8 @@ module Kramdown
               end.join("/"),
               File.basename(el.attr["src"], File.extname(el.attr["src"])).gsub(" ", "%20")
             )
-            if index == picture_versions.size - 1
-              media = ""
-              new_src = "#{src_base}.jpg"
-            else
-              media = "media=\"(max-width: #{geometry}px)\""
-            end
+            media = media_attribute(version)
+            new_src = "#{src_base}.jpg" if version == default_pic_version
             res += "<source #{media} srcset=\"#{src_base}.webp\" type=\"image/webp\">"
             res += "<source #{media} srcset=\"#{src_base}.jpg\" type=\"image/jpeg\">"
           end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-picture-tag-ng
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.5.0
 platform: ruby
 authors:
 - pcouy
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2023-04-27 00:00:00.000000000 Z
+date: 2023-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -76,6 +76,7 @@ licenses:
 metadata:
   allowed_push_host: https://rubygems.org
   homepage_uri: https://pierre-couy.dev/projects/jekyll-picture-tag-ng.html
+  documentation_uri: https://pierre-couy.dev/projects/jekyll-picture-tag-ng.html
   source_code_uri: https://github.com/pcouy/jekyll-picture-tag-ng
 post_install_message:
 rdoc_options: []