Image Enhancement: srcset dimensions, data-*

data/dimensions.yml

@@ -1,5 +1,8 @@
 - ratio: 4x3
   dimensions:
+    - 150x112
+    - 300x225
+    - 450x337
     - 576x432
     - 768x576
     - 992x744
@@ -8,6 +11,9 @@
     - 2800x2100
 - ratio: 3x2
   dimensions:
+    - 150x100
+    - 300x200
+    - 450x300
     - 576x384
     - 768x512
     - 992x661
@@ -16,6 +22,9 @@
     - 2800x1867
 - ratio: 1x1
   dimensions:
+    - 150x150
+    - 300x300
+    - 450x450
     - 576x576
     - 768x768
     - 992x992
@@ -24,6 +33,9 @@
     - 2800x2800
 - ratio: 16x9
   dimensions:
+    - 150x84
+    - 300x169
+    - 450x253
     - 576x324
     - 768x432
     - 992x558
@@ -32,6 +44,9 @@
     - 2800x1575
 - ratio: 21x9
   dimensions:
+    - 150x64
+    - 300x129
+    - 450x193
     - 576x247
     - 768x329
     - 992x425
@@ -40,9 +55,17 @@
     - 2800x1200
 - ratio: auto
   dimensions:
+    - 50    # Small thumbnails
+    - 150   # Standard thumbnails
+    - 300
+    - 450
     - 576
     - 768
     - 992
     - 1200
     - 1400
+    - 1920  # Full HD
+    - 2560  # QHD
     - 2800
+    - 3840  # 4K
+    - 5120  # 5K

data/structures/gallery.yml

@@ -0,0 +1,21 @@
+comment: >-
+  Displays the publication date and title as gallery.  
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Required context of the current page.
+    group: partial
+  list:
+    type:
+      - 'page.Pages'
+      - 'resource.Resources'
+    optional: false
+    comment: Required array of pages.
+    group: partial
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the list element, e.g. “w-50”.

data/structures/image-adapter.yml

@@ -52,6 +52,7 @@ arguments:
       values:
         - fill
         - fit
+        - resize
   height:
     type: int
     optional: false
@@ -76,4 +77,3 @@ arguments:
         - Bottom
         - BottomRight
         - Smart
-

data/structures/image.yml

@@ -58,6 +58,7 @@ arguments:
       to vector graphics.
     options:
       values:
+        - auto
         - 1x1
         - 3x2
         - 4x3
@@ -161,3 +162,8 @@ arguments:
         - BottomRight
         - Smart
     release: v0.24.22
+  dataAttributes:
+    type: string
+    optional: true
+    comment: image data attributes  `data-*`.
+    release: v0.27.14 

exampleSite/content/en/blog/image.md

@@ -40,3 +40,12 @@ As an example, the following shortcode displays an image with rounded corners an
     ratio="21x9" caption="imgix image" class="rounded" anchor="Top" */>}}
 {{< /example >}}
 {{% comment %}}<!-- markdownlint-enable MD037 -->{{% /comment %}}
+
+## Local image
+
+{{% comment %}}<!-- markdownlint-disable MD037 -->{{% /comment %}}
+{{< example lang="hugo" >}}
+{{</* image src="img/phone.jpg"
+    ratio="auto" caption="local image" class="rounded" anchor="Top" dataAttributes="data-location='unknown' data-image-option='test'" */>}}
+{{< /example >}}
+{{% comment %}}<!-- markdownlint-enable MD037 -->{{% /comment %}}

exampleSite/hugo_stats.json

@@ -584,6 +584,7 @@
       "lien",
       "liens-vers-des-tiers-et-utilisation-de-vos-informations",
       "link",
+      "local-image",
       "lottie-animation-0",
       "manage-cookie-preferences",
       "map",

layouts/_default/_markup/render-image.html

@@ -12,4 +12,5 @@
     "portrait" .Attributes.portrait
     "ratio"  .Attributes.ratio
     "wrapper" .Attributes.wrapper
+    "dataAttributes" .Attributes.dataAttributes
 ) }}

layouts/partials/assets/adapters/hugo.html

@@ -1,4 +1,4 @@
-<!-- 
+    <!-- 
     Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
     Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
     Visit gethinode.com/license for more details.
@@ -46,11 +46,16 @@
 <!-- Process image and generate image URL -->
 {{ if not $error }}
     {{ $scaled := "" }}
-    {{ if eq $transform "fill" }}
+
+    {{ if and (eq $transform "fill") $height }}
         {{- $scaled = $img.Fill (printf "%dx%d %s %s" $width $height $anchor $format) -}}
+    {{ else if (not $height) }}   
+        {{- $scaled = $img.Resize (printf "%dx %s %s" $width $anchor $format) -}}
+        {{- $height = $scaled.Height -}}
     {{ else }}
         {{- $scaled = $img.Fit (printf "%dx%d %s" $width $height $format) -}}
     {{ end }}
+
 
     {{- $clean := path.Ext $img.RelPermalink -}}
     {{ $destination := "" }}
@@ -68,4 +73,4 @@
     {{- end -}}
 {{ end }}
 
-{{ return $element }}
+{{ return $element }}

layouts/partials/assets/helpers/image-definition.html

@@ -17,6 +17,8 @@
 {{- $plain := .plain | default false }}
 {{- $anchor := .anchor }}
 {{- $alt := or $title $caption (T "image") }}
+{{- $dataAttributes := .dataAttributes | default "" }}
+
 
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
 {{- $fileAnchor := "" -}}
@@ -27,7 +29,6 @@
     {{- $url = index $segments 0 -}}
     {{- $fileAnchor = index $segments 1 -}}
 {{- end -}}
-
 <!-- Obtain fallback URL and imageset definition -->
 {{ $target := partial "assets/helpers/image-dimension.html" (dict 
     "page" $page
@@ -43,36 +44,49 @@
 {{ $height := index $target "height" }}
 {{ $width := index $target "width" }}
 {{ $data := index $target "data" }}
-
 <!-- Add color modes -->
 {{- range $none := $modes -}}
     {{- if ne $none $mode -}}
         {{- $wrapper = printf "%s d-none-%s" (or $wrapper "") $none -}}
     {{- end -}}
 {{- end -}}
-
 <!-- Generate image definition -->
 {{- if $caption -}}
     <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
 {{ else }}
     {{ with $wrapper }}<div class="{{ . }}">{{ end }}
 {{ end }}
-
 {{ if $data }}
     {{- if site.Params.debugging.includeSVGOrigin }}
         {{ printf "<!-- <svg src=\"%s\"> -->" $.url | safeHTML }}
     {{ end -}}
     {{- $data = replace $data "<svg" (printf "<svg class=\"%s\"" $class) -}}
     {{- $data | safeHTML -}}
 {{- else if not $fileAnchor -}}
-    <img class="img-fluid {{ $class }}"
-        src="{{ $fallbackURL }}"
-        {{ if $lazy }}loading="lazy"{{ end }}
-        {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
-        {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
-        {{ with $height }}height="{{ . }}"{{ end }}
-        {{ with $width }}width="{{ . }}"{{ end }}
-        {{ with $alt }}alt="{{ . }}"{{ end }}>
+
+{{ if in $class "lightbox" }}
+<div class="thumbnail-container position-relative">
+    <div class="image-wrapper position-relative">
+{{ end }}        
+        <img class="img-fluid {{ $class }}" 
+            src="{{ $fallbackURL }}"
+            {{ if $lazy }}loading="lazy"{{ end }}
+            {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
+            {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
+            {{ with $height }}height="{{ . }}"{{ end }}
+            {{ with $width }}width="{{ . }}"{{ end }}
+            {{ with $alt }}alt="{{ . }}"{{ end }}
+            {{ if $dataAttributes }}{{ with $dataAttributes }}{{ . | safeHTMLAttr  }}{{ end }}{{ end }}
+            >
+{{ if in $class "lightbox" }}            
+        <div class="lightbox-icon">
+            <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+            </svg>
+        </div>
+    </div>
+</div>   
+{{ end }}        
 {{- else }}
     <svg class="{{ $class }}">
         <use href="{{ $fallbackURL }}#{{ $fileAnchor }}"></use>

layouts/partials/assets/helpers/image-dimension.html

@@ -52,11 +52,10 @@
 {{- if hasSuffix $url "svg" -}}
     {{- $res = partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
     {{ if not $res }}
-        {{- $targetURL := partial "utilities/GetStaticURL" (dict "url" (strings.TrimPrefix "/static" $url)) -}}
-        {{- if not (fileExists (path.Join "/static" $targetURL)) -}}
+        {{- if not (fileExists (path.Join "/static" $url)) -}}
             {{ warnf "Cannot find vector image resource: %q" $url -}}
         {{ else }}
-            {{ $width := string (partial "utilities/GetWidth.html" (dict "path" $targetURL "height" 500)) }}
+            {{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
             {{ if $width }}
                 {{ $dims = $dims | append (printf "%sx500" $width) }}
             {{ else }}
@@ -84,8 +83,12 @@
 
         {{ $widths := partial "assets/helpers/GetDimension.html" (dict "ratio" "auto") }}
         {{ range $w := $widths -}}
-            {{ $height = int (math.Round (mul (div (float $w) $img.Width) $img.Height)) }}
-            {{- $dims = $dims | append (printf "%dx%d" (int $w) $height ) -}}
+            {{ if $height  }}
+                {{ $height = int (math.Round (mul (div (float $w) $img.Width) $img.Height)) }}
+                {{- $dims = $dims | append (printf "%dx%d" (int $w) $height ) -}}
+            {{ else}}    
+                {{- $dims = $dims | append (printf "%dx" (int $w)  ) -}}
+            {{ end }} 
         {{- end -}}
     {{ end }}
 {{ end }}
@@ -111,15 +114,17 @@
         {{ with $dims }}
             {{ range $dim := (. | last 1) }}
                 {{ $width = (int (index (split $dim "x") 0)) }}
-                {{ $height = (int (index (split $dim "x") 1)) }}
+                {{ if $height }}
+                    {{ $height = (int (index (split $dim "x") 1)) }}
+                {{ end}}
             {{ end }}
         {{ end }}
     {{ end }}
 {{ end }}
 
 <!-- Generate image url -->
 {{ if or (hasSuffix $url "svg") $plain }}
-    {{- $targetURL = partial "utilities/GetStaticURL" (dict "url" (strings.TrimPrefix "/static" $url)) -}}
+    {{- $targetURL = partial "utilities/GetStaticURL" (dict "url" $url) -}}
 {{ else }}
     {{- $targetURL = partial "assets/helpers/image-set.html" (dict 
         "url" $url

layouts/partials/assets/helpers/image-set.html

@@ -24,7 +24,10 @@
 {{ $imgset := slice }}
 {{- range $index, $dim := $dims -}}
     {{ $width := (int (index (split $dim "x") 0)) }}
-    {{ $height := (int (index (split $dim "x") 1)) }}
+    {{ $height := "" }}
+    {{ if $height }}
+        {{ $height = (int (index (split $dim "x") 1)) }}        
+    {{ end }}        
 
     {{- $element := partial $adapter (dict 
         "host" $host

layouts/partials/assets/image.html

@@ -28,6 +28,7 @@
 {{- $sizes := .sizes | default "100vw" -}}
 {{- $plain := .plain | default false -}}
 {{- $anchor := .anchor | default "" -}}
+{{- $dataAttributes := .dataAttributes -}}
 
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $url := .url -}}
@@ -51,6 +52,7 @@
     "absoluteURL" $absoluteURL
     "plain" $plain
     "anchor" $anchor
+    "dataAttributes" $dataAttributes
     )
 -}}
 

layouts/partials/assets/video.html

@@ -128,6 +128,7 @@
             "url" (printf "https://res.cloudinary.com/%s/video/upload/%s" $account (path.Clean $thumbnail))
             "ratio" $ratio
             "imageset" false
+            "height" 500
         ) }}
         {{ $height := index $metadata "height" }}
         {{ $width := index $metadata "width" }}

layouts/shortcodes/image.html

@@ -26,6 +26,7 @@
 {{- $error := false -}}
 {{- $plain := false -}}
 {{- $anchor := "" -}}
+{{- $dataAttributes := "" -}}
 
 {{- if .IsNamedParams -}}
     {{ $url = .Get "src" | default "" -}}
@@ -37,6 +38,7 @@
     {{ $title = .Get "title" | default "" -}}
     {{ $caption = .Get "caption" | default "" -}}
     {{ $figclass = .Get "figclass" | default "" -}}
+    {{ $dataAttributes =  .Get "dataAttributes" | default "" -}}
     {{ if isset .Params "mode" }}{{ $mode = partial "utilities/CastBool.html" (.Get "mode") }}{{ end -}}
     {{ if isset .Params "portrait" }}{{ $portrait = partial "utilities/CastBool.html" (.Get "portrait") }}{{ end -}}
     {{ if isset .Params "plain" }}{{ $plain = partial "utilities/CastBool.html" (.Get "plain") }}{{ end -}}
@@ -45,6 +47,8 @@
     {{ $url = .Get 0 }}
 {{ end -}}
 
+{{ warnf $dataAttributes }}
+
 {{ if not $url }}
     {{ errorf "Missing value for param 'src': %s" .Position -}}
     {{- $error = true -}}
@@ -65,6 +69,7 @@
         "plain" $plain
         "anchor" $anchor
         "loading" $loading
+        "dataAttributes" $dataAttributes
         "page" .Page)
     -}} 
 {{- end -}}