jekyll-picture-tag-ng 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0db7bf60332a01764f52029da09c289aae64dca5211d85d12e17c6fd3518b616
-  data.tar.gz: f86895b50c8ac8cf8062d55f9084df2650458dde3c7f6dae6ac411d26c4d4fbc
+  metadata.gz: 6cd5f67823462661b93520b765668c3da82794480e4e58a7fb6657b41920c893
+  data.tar.gz: f76fc204106a3dc79fa40dbbb371ac988dcf6f2043a3089d2ab79b24cc6d94c7
 SHA512:
-  metadata.gz: 036f7231a4ca24104af88f7a79d048e4924de12920c2ed54353d07f58f4ff6375e8cdd0b19f6c4775de8d5835f59ccb195b29770f380c5f8d76e0b061fdb051b
-  data.tar.gz: 7990c47da142e389e07a2d74a878a9f4d05ad91fe12668ffc7ffa9abd9c87f52989ab29438b3f6861d588aa41b52cb4acb2aebd769f610b15904d236f6f92363
+  metadata.gz: 5ea82a06e9626494f78b35a962733ff979f4c9b9c956e56a120290cc9c24930c10b7db29d409c0ec73741100341e5fce63be1d92b86fa54907847975dc4b0f0a
+  data.tar.gz: d967db3c36973c4eb29cca8c45a39b16c8cb9ece0003663c3ac2c11dd24435421d3b87248c15eca243a6cd333b820c7c591ec077e1c3de365efed46e2dd427f5

data/README.md

@@ -72,10 +72,93 @@ 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>
+```
+
 ## 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.4.0"
   end
 end

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

@@ -26,7 +26,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
@@ -197,13 +201,55 @@ 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)
+        if version == default_pic_version
+          ""
+        else
+          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
+      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 +258,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.4.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: []