Merge 8a8ae76bf2 into 16edb5da3b

CHANGELOG.md

@@ -10,10 +10,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Warning when building if links to markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
 
-### Changed
-
-- Refactored image logic into a new `picture.html` partial ([#693](https://github.com/jpanther/congo/pull/693))
-
 ### Removed
 
 - Fathom Analytics custom domain parameter as this is no longer supported by Fathom

config/_default/params.toml

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

exampleSite/config/_default/params.toml

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

layouts/_default/_markup/render-image.html

@@ -1,28 +1,64 @@
 {{ $url := urls.Parse .Destination }}
 {{ $altText := .Text }}
 {{ $caption := .Title }}
-{{ $class := "mx-auto my-0 rounded-md" }}
+{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
-
+{{ if findRE "^https?" $url.Scheme }}
-{{ $file := $url.Path }}
+  <figure>
-{{ $img := .Page.Resources.GetMatch $file }}
+    <img
-{{- if and (not $img) .Page.File }}
+      class="mx-auto my-0 rounded-md"
-    {{ $path := path.Join .Page.File.Dir $file }}
+      src="{{ $url.String }}"
-    {{ $img = resources.Get $path }}
+      alt="{{ $altText }}" 
-{{ end -}}
+      {{ if $lazyLoad }}
-
+        loading="lazy"
-{{/* https://github.com/gohugoio/hugo/pull/10666 */}}
+      {{ end }}
-{{- $params := $url.Query -}}
+    />
-{{- $x2Param := $params.Get "2x" -}}
-{{- $x2 := false -}}
-{{- if eq $x2Param "true" -}}
-    {{- $x2 = true  -}}
-{{- end -}}
-
-<figure>
-  {{- with $img -}}
-    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }}
-  {{- else -}}
-    <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/>
-  {{- end -}}
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-</figure>
+  </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/_default/single.html

@@ -15,9 +15,25 @@
       </div>
       {{ with $feature }}
         <div class="prose">
-          {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
+          <img
-          {{ $class := "mb-6 -mt-4 rounded-md" }}
+            class="mb-6 -mt-4 rounded-md"
-          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }}
+            {{ 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"
+              {{ end }}
+            {{ end }}
+            alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
+          />
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

layouts/partials/functions/warnings.html

@@ -8,5 +8,5 @@
   {{ warnf "[CONGO] Theme parameter `logo` has been renamed to `header.logo`. Please update your site configuration." }}
 {{ end }}
 {{ if .Author }}
-  {{ warnf "[CONGO] Theme parameter `author` block in `languages.xx.toml` has been renamed to `.params.author`. Please update your site configuration." }}
+  {{ warnf "[CONGO] Theme parameter `.Site.author` in `languages.xx.toml` has been renamed to `.Site.Language.Params.Author` in `params.toml`. Please update your site configuration." }}
 {{ end }}

layouts/partials/picture.html

@@ -1,112 +0,0 @@
-{{ $img := .img }}
-{{ $alt := .alt }}
-{{ $class := .class }}
-{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
-{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
-{{ $lqip := .lqip | default false }}
-{{ $x2 := .x2 | default false }}
-
-{{ 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 }}
-    >
-    {{ $width := .Width }}
-    {{ $height := .Height }}
-    {{ if $x2 }}
-      {{ $width = div .Width 2 }}
-      {{ $height = div .Height 2 }}
-    {{ 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
-            {{ if gt .Width 1024 }}
-              ,{{ (.Resize "1024x webp").RelPermalink }} 1024w
-            {{ else }}
-              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
-                ,{{ .RelPermalink }} {{ .Width }}w
-              {{ end }}
-            {{ end }}
-            {{ if gt .Width 1320 }}
-              ,{{ (.Resize "1320x webp").RelPermalink }} 2x
-            {{ else }}
-              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
-                ,{{ .RelPermalink }} {{ .Width }}w
-              {{ end }}
-            {{ end }}"
-          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
-          {{ if gt .Width 1024 }}
-            ,{{ (.Resize "1024x").RelPermalink }} 1024w
-          {{ else }}
-            ,{{ .RelPermalink }} {{ .Width }}w
-          {{ end }}
-          {{ if gt .Width 1320 }}
-            ,{{ (.Resize "1320x").RelPermalink }} 2x
-          {{ else }}
-            ,{{ .RelPermalink }} {{ .Width }}w
-          {{ end }}"
-          src="{{ (.Resize "660x").RelPermalink }}"
-        {{ end }}
-      >
-    </picture>
-  {{ end }}
-{{ end }}

layouts/shortcodes/figure.html

@@ -6,23 +6,45 @@
   {{ $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
-    {{- with $img -}}
+      class="mx-auto my-0 rounded-md"
-      {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class) }}
+      alt="{{ $altText }}"
-    {{- else -}}
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
-      <img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
+        loading="lazy"
-    {{- 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>

layouts/shortcodes/screenshot.html

@@ -4,16 +4,17 @@
     {{- if .Get "href" -}}
       <a href="{{ .Get "href" }}">
     {{- end -}}
-
+    <img src="{{ $image.RelPermalink }}"
-    {{ $altText := "" }}
+      {{- if or (.Get "alt") (.Get "caption") }}
-    {{ with .Get "alt" }}
+        alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
-      {{ $altText = . }}
+      {{- end -}}
-    {{ else }}
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
-      {{ $altText = (.Get "caption") | markdownify | plainify }}
+        loading="lazy"
       {{ end }}
-
+      width="100%"
-    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }}
+      height="auto"
-
+      style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
+    />
     {{- if .Get "href" }}</a>{{ end -}}
     {{- if .Get "caption" -}}
       <figcaption>