Example of integration of picture partial

config/_default/params.toml

@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = false
 enableCodeCopy = false
 enableImageLazyLoading = true
+enableImageWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

exampleSite/config/_default/params.toml

@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true
 enableImageLazyLoading = true
+enableImageWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

layouts/_default/_markup/render-image.html

@@ -1,64 +1,20 @@
 {{ $url := urls.Parse .Destination }}
 {{ $altText := .Text }}
 {{ $caption := .Title }}
-{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $class := "mx-auto my-0 rounded-md" }}
-{{ if findRE "^https?" $url.Scheme }}
+
+{{ $file := $url.Path }}
+{{ $img := .Page.Resources.GetMatch $file }}
+{{- if and (not $img) .Page.File }}
+    {{ $path := path.Join .Page.File.Dir $file }}
+    {{ $img = resources.Get $path }}
+{{ end -}}
+
 <figure>
-    <img
+  {{- with $img -}}
-      class="mx-auto my-0 rounded-md"
+    {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }}
-      src="{{ $url.String }}"
+  {{- else -}}
-      alt="{{ $altText }}" 
+    <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/>
-      {{ if $lazyLoad }}
+  {{- end -}}
-        loading="lazy"
-      {{ end }}
-    />
   {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
 </figure>
-{{ else }}
-  {{ $resource := "" }}
-  {{ if $.Page.Resources.GetMatch ($url.String) }}
-    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-  {{ else if resources.GetMatch ($url.String) }}
-    {{ $resource = resources.Get ($url.String) }}
-  {{ end }}
-  {{ with $resource }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        {{ if eq .MediaType.SubType "svg" }}
-          src="{{ .RelPermalink }}"
-        {{ else }}
-          width="{{ .Width }}"
-          height="{{ .Height }}"
-          {{ if lt .Width 660 }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            srcset="
-            {{- (.Resize "330x").RelPermalink }} 330w,
-            {{- (.Resize "660x").RelPermalink }} 660w,
-            {{- (.Resize "1024x").RelPermalink }} 1024w,
-            {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-          {{ end }}
-        {{ end }}
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ else }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        src="{{ $url.String }}"
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ end }}
-{{ end }}

layouts/partials/picture.html

@@ -0,0 +1,85 @@
+{{ $img := .img }}
+{{ $alt := .alt }}
+{{ $class := .class }}
+{{ $lazy := .lazy }}
+{{ $webp := .webp }}
+{{ $lqip := .lqip }}
+
+{{ with $img }}
+  {{ if (eq .MediaType.SubType "svg") }}
+    {{ $width := ""}}
+    {{ $height := ""}}
+    {{ $svgContent := .Content }}
+    {{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
+      {{ $width = index . 1 }}
+    {{ end }}
+    {{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
+      {{ $height = index . 1 }}
+    {{ end }}
+    {{ if (eq "" $width $height) }}
+      {{ range (findRESubmatch `<svg[^>]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }}
+        {{ $width = index . 3 }}
+        {{ $height = index . 4 }}
+      {{ end }}
+    {{ end }}
+    {{ if (eq "" $width $height) }}
+      {{ warnf "Can't detect width and height for SVG %s" .RelPermalink }}
+      {{/* do not use lazy without dimensions */}}
+      {{ $lazy = false }}
+    {{ end }}
+    <picture {{ with $class }} class="{{ . }}" {{ end }}>
+      <img
+        src="{{ .RelPermalink }}"
+        {{ with $width }} width="{{ . }}" {{ end }}
+        {{ with $height }} height="{{ . }}" {{ end }}
+        {{ with $class }} class="{{ . }}" {{ end }}
+        {{ with $alt }} alt="{{ . }}" {{ end }}
+        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
+      >
+    </picture>
+  {{ else }}
+    <picture 
+      {{ with $class }} class="{{ . }}" {{ end }}
+      {{ if $lqip }}
+        {{ $bg := (.Resize "20x webp q20").Content | base64Encode }}
+        style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover"
+      {{ end }}
+    >
+    {{ if $webp }}
+      <source 
+        {{ if lt .Width 660 }}
+          {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+            src="{{ .RelPermalink }}"
+          {{ end }}
+        {{ else }}
+          srcset="
+            {{- (.Resize "330x webp").RelPermalink }} 330w,
+            {{- (.Resize "660x webp").RelPermalink }} 660w,
+            {{- (.Resize "1024x webp").RelPermalink }} 1024w,
+            {{- (.Resize "1320x webp").RelPermalink }} 2x"
+          src="{{ (.Resize "660x webp").RelPermalink }}" 
+        {{ end }}
+        type="image/webp" 
+      />
+    {{ end }}
+      <img
+        src="{{ .RelPermalink }}"
+        width="{{ .Width }}"
+        height="{{ .Height }}"
+        {{ with $class }} class="{{ . }}" {{ end }}
+        {{ with $alt }} alt="{{ . }}" {{ end }}
+        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
+        {{ if lt .Width 660 }}
+          src="{{ .RelPermalink }}"
+        {{ else }}
+          srcset="
+          {{- (.Resize "330x").RelPermalink }} 330w,
+          {{- (.Resize "660x").RelPermalink }} 660w,
+          {{- (.Resize "1024x").RelPermalink }} 1024w,
+          {{- (.Resize "1320x").RelPermalink }} 2x"
+          src="{{ (.Resize "660x").RelPermalink }}"
+        {{ end }}
+      >
+    </picture>
+  {{ end }}
+{{ end }}

layouts/partials/pictureDefaults.html

@@ -0,0 +1,7 @@
+{{ $img := .img }}
+{{ $alt := .alt }}
+{{ $class := .class }}
+{{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+{{ $lqip := false }}
+{{ partial "picture.html" (dict "img" $img "alt" $alt "class" $class "lazy" $lazy "webp" $webp "lqip" $lqip) }}

layouts/shortcodes/figure.html

@@ -6,45 +6,23 @@
   {{ $caption := .Get "caption" }}
   {{ $href := .Get "href" }}
   {{ $class := .Get "class" }}
+
+  {{ $file := $url.Path }}
+  {{ $img := .Page.Resources.GetMatch $file }}
+  {{- if and (not $img) .Page.File }}
+    {{ $path := path.Join .Page.File.Dir $file }}
+    {{ $img = resources.Get $path }}
+  {{ end -}}
+
   <figure{{ with $class }} class="{{ . }}"{{ end }}>
     {{ with $href }}<a href="{{ . }}">{{ end }}
-    <img
+
-      class="mx-auto my-0 rounded-md"
+    {{- with $img -}}
-      alt="{{ $altText }}"
+      {{ partial "pictureDefaults.html" (dict "img" . "alt" $altText "class" $class) }}
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
+    {{- else -}}
-        loading="lazy"
+      <img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
-      {{ end }}
+    {{- end -}}
-      {{ if findRE "^https?" $url.Scheme }}
+
-        src="{{ $url.String }}"
-      {{ else }}
-        {{ $resource := "" }}
-        {{ if $.Page.Resources.GetMatch ($url.String) }}
-          {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-        {{ else if resources.GetMatch ($url.String) }}
-          {{ $resource = resources.Get ($url.String) }}
-        {{ end }}
-        {{ with $resource }}
-          {{ if eq .MediaType.SubType "svg" }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            width="{{ .Width }}"
-            height="{{ .Height }}"
-            {{ if lt .Width 660 }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              srcset="
-              {{- (.Resize "330x").RelPermalink }} 330w,
-              {{- (.Resize "660x").RelPermalink }} 660w,
-              {{- (.Resize "1024x").RelPermalink }} 1024w,
-              {{- (.Resize "1320x").RelPermalink }} 2x"
-              src="{{ (.Resize "660x").RelPermalink }}"
-            {{ end }}
-          {{ end }}
-        {{ else }}
-          src="{{ $url.String }}"
-        {{ end }}
-      {{ end }}
-    />
     {{ with $href }}</a>{{ end }}
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>