refactor: image handling logic + support for external images (#1235)

* refactor: simplify image partial logic, remove generation of different image sizes

* Remove `defaultImage.opengraph` configuration from `params.toml`.

config/_default/params.toml

@@ -36,10 +36,6 @@ rssFullContent     = true
     site = ""
     card = "summary_large_image"
 
-[defaultImage.opengraph]
-    enabled = false
-    local   = false
-
 [colorScheme]
     toggle  = true
     default = "auto"

layouts/_partials/article-list/compact.html

@@ -11,30 +11,12 @@
             </footer>
         </div>
 
-        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
+        {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
-        {{ if $image.exists }}
+        {{ if $image }}
-            <div class="article-image">
+        <div class="article-image">
-                {{ if $image.resource }}
+            <img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}"
-                    {{- $Permalink := $image.resource.RelPermalink -}}
+                loading="lazy">
-                    {{- $Width := $image.resource.Width -}}
+        </div>
-                    {{- $Height := $image.resource.Height -}}
-
-                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
-                        {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                        {{- $Permalink = $thumbnail.RelPermalink -}}
-                        {{- $Width = $thumbnail.Width -}}
-                        {{- $Height = $thumbnail.Height -}}
-                    {{- end -}}
-                    
-                    <img src="{{ $Permalink }}" 
-                        width="{{ $Width }}"
-                        height="{{ $Height }}" 
-                        alt="{{ .Title }}"
-                        loading="lazy">
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
-                {{ end }}
-            </div>
         {{ end }}
     </a>
 </article>

layouts/_partials/article-list/default.html

@@ -1,4 +1,4 @@
-{{ $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" }}
+{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) }}
-<article class="{{ if $image.exists }}has-image{{ end }}">
+<article class="{{ if $image }}has-image{{ end }}">
     {{ partial "article/components/header" . }}
 </article>

layouts/_partials/article-list/tile.html

@@ -1,33 +1,11 @@
-{{ $image := partialCached "helper/image" (dict "Context" .context "Type" .Type) .context.RelPermalink .Type }}
+{{ $image := partial "helper/image" (dict "Image" .context.Params.image "Resources" .context.Resources) }}
-<article class="{{ if $image.exists }}has-image{{ end }}">
+<article class="{{ if $image }}has-image{{ end }}">
     <a href="{{ .context.RelPermalink }}">
-        
+        {{ if $image }}
-        {{ if $image.exists }}
+        <div class="article-image">
-            <div class="article-image">
+            <img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
-                {{ if $image.resource }}
+                alt="Featured image of post {{ .context.Title }}">
-                    {{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}}
+        </div>
-                    {{- $Permalink := $imageRaw.RelPermalink -}}
-                    {{- $Width := $imageRaw.Width -}}
-                    {{- $Height := $imageRaw.Height -}}
-
-                    {{- if .context.Site.Params.imageProcessing.cover.enabled -}}
-                        {{- $thumbnail := $imageRaw.Fill .size -}}
-                        {{- $Permalink = $thumbnail.RelPermalink -}}
-                        {{- $Width = $thumbnail.Width -}}
-                        {{- $Height = $thumbnail.Height -}}
-                    {{- end -}}
-                    
-                    <img src="{{ $Permalink }}" 
-                        width="{{ $Width }}" 
-                        height="{{ $Height }}" 
-                        loading="lazy"
-                        alt="Featured image of post {{ .context.Title }}"
-                        {{ with .context.Slug }}data-key="{{ . }}" {{ end }}
-                        data-hash="{{ $imageRaw.Data.Integrity }}">
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.permalink }}"/>
-                {{ end }}
-            </div>
         {{ end }}
 
         <div class="article-details">
@@ -36,4 +14,4 @@
             </h2>
         </div>
     </a>
-</article>
+</article>

layouts/_partials/article/components/header.html

@@ -1,34 +1,12 @@
 <header class="article-header">
-    {{- $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" -}}
+    {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
-    {{ if $image.exists }}
+    {{ if $image }}
-        <div class="article-image">
+    <div class="article-image">
-            <a href="{{ .RelPermalink }}">
+        <a href="{{ .RelPermalink }}">
-                {{ if $image.resource }}
+            <img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
-                    {{- $Permalink := $image.resource.RelPermalink -}}
+                alt="Featured image of post {{ .Title }}" />
-                    {{- $Width := $image.resource.Width -}}
+        </a>
-                    {{- $Height := $image.resource.Height -}}
+    </div>
-                    {{- $Srcset := "" -}}
-                    
-                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
-                        {{- $thumbnail := $image.resource.Resize "800x" -}}
-                        {{- $thumbnailRetina := $image.resource.Resize "1600x" -}}
-                        {{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
-                        {{- $Permalink = $thumbnail.RelPermalink -}}
-                        {{- $Width = $thumbnail.Width -}}
-                        {{- $Height = $thumbnail.Height -}}
-                    {{- end -}}
-
-                    <img src="{{ $Permalink }}"
-                        {{ with $Srcset }}srcset="{{ . }}"{{ end }}
-                        width="{{ $Width }}" 
-                        height="{{ $Height }}" 
-                        loading="lazy"
-                        alt="Featured image of post {{ .Title }}" />
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
-                {{ end }}
-            </a>
-        </div>
     {{ end }}
 
     {{ partialCached "article/components/details" . .RelPermalink }}

layouts/_partials/head/opengraph/provider/base.html

@@ -37,7 +37,7 @@
     {{- end -}}
 {{- end -}}
 
-{{ $image := partialCached "helper/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" }}
+{{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) }}
-{{- if $image.exists -}}
+{{- if $image -}}
     <meta property='og:image' content='{{ absURL $image.permalink }}' />
 {{- end -}}

layouts/_partials/head/opengraph/provider/twitter.html

@@ -9,8 +9,8 @@
 <meta name="twitter:title" {{ printf "content=%q" $title | safeHTMLAttr }}>
 <meta name="twitter:description" {{ printf "content=%q" $description | safeHTMLAttr }}>
 
-{{- $image := partialCached "helper/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" -}}
+{{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
-{{- if $image.exists -}}
+{{- if $image -}}
     <meta name="twitter:card" content="{{ default `summary_large_image` .Site.Params.opengraph.twitter.card }}">
     <meta name="twitter:image" content='{{ absURL $image.permalink }}' />
 {{- end -}}

layouts/_partials/helper/image.html

@@ -1,61 +1,54 @@
-{{ $result := dict "exists" false "permalink" nil "resource" nil "isDefault" false }}
+/// Params:
-{{ $imageField := default "image" .Context.Site.Params.featuredImageField }}
+///     Resources: Where to search for images
-{{ $imageValue := index .Context.Params $imageField }}
+///     Image: Image URL
 
-{{ if $imageValue }}
+/// Returns:
-    <!-- If page has `image` field set -->
+///     Local: true if the image is local, false if it is remote
-    {{ $result = merge $result (dict "exists" true) }}
+///     Resource: Hugo image resource object, not nil if the image is local
-    {{ $url := urls.Parse $imageValue }}
+///     Permalink: Image URL
+///     Height: Image height
+///     Width: Image width
 
-    {{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
+{{ $result := dict
-        <!-- Is an external image -->
+    "Local" false
-        {{ $result = merge $result (dict "permalink" $imageValue) }}
+    "Resource" nil
+    "Permalink" (.Image | absURL)
+    "Width" nil
+    "Height" nil
+}}
+
+{{ if not .Image }}
+    {{ $result = "" }}
+{{ else }}
+    {{ $url := urls.Parse .Image }}
+    {{ if not (in (slice "https" "http") $url.Scheme) }}
+        {{ $resource := .Resources.Get (printf "%s" (.Image | safeURL)) }}
+        {{ if $resource }}
+            {{ $result = dict
+                "Local" true
+                "Resource" $resource
+                "Permalink" $resource.RelPermalink
+                "Height" $resource.Height
+                "Width" $resource.Width
+            }}
+        {{ end }}
     {{ else }}
-        {{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageValue | safeURL)) }}
+        {{ with try (resources.GetRemote $url) }}
-        
+            {{ with .Err }}
-        {{ if $pageResourceImage }}
+                {{ errorf "%s" . }}
-            <!-- If image is found under page bundle -->
+            {{ else with .Value }}
-            {{ $result = merge $result (dict "permalink" $pageResourceImage.RelPermalink) }}
+                {{ $result = dict
-
+                    "Local" false
-            <!-- Disable SVG image processing, not supported by Hugo -->
+                    "Resource" .
-            {{ if ne (path.Ext $imageValue) ".svg" }}
+                    "Permalink" .RelPermalink
-                {{ $result = merge $result (dict "resource" $pageResourceImage) }}
+                    "Height" .Height
-            {{ end }}
+                    "Width" .Width
-        {{ else }}
+                }}
-            <!-- Can not find the image under page bundle. Could be a relative linked image -->
-            {{ $result = merge $result (dict "permalink" (relURL $imageValue)) }}
-        {{ end }}
-
-    {{ end }}
-
-{{ else if and (ne .Type nil) (index .Context.Site.Params.defaultImage .Type) }}
-    <!-- Type arg is set, check for defaultImage setting -->
-    {{ $defaultImageSetting := index .Context.Site.Params.defaultImage .Type }}
-
-    {{ if $defaultImageSetting.enabled }}
-        {{ $result = merge $result (dict "isDefault" true) }}
-        {{ $result = merge $result (dict "exists" true) }}
-
-        {{ if $defaultImageSetting.local }}
-            {{ $siteResourceImage := resources.GetMatch (printf "%s" ($defaultImageSetting.src | safeURL)) }}
-
-            {{ if $siteResourceImage }}
-                <!-- Try search image under site's assets folder -->
-                {{ $result = merge $result (dict "permalink" $siteResourceImage.RelPermalink) }}
-                {{ $result = merge $result (dict "resource" $siteResourceImage) }}
             {{ else }}
-                <!-- Can not find the image -->
+                {{ errorf "Unable to get remote resource %q" $url }}
-                {{ errorf "Failed loading image: %q" $defaultImageSetting.src }}
-                {{ $result = merge $result (dict "exists" false) }}
             {{ end }}
-
+        {{ end }}   
-        {{ else }}
-            <!-- External image -->
-            {{ $result = merge $result (dict "permalink" (relURL $defaultImageSetting.src)) }}
-        {{ end }}
-        
     {{ end }}
-
 {{ end }}
 
-{{ return $result }}
+{{ return $result }}

layouts/list.html

@@ -17,28 +17,13 @@
                 {{ end }}
             </div>
     
-            {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
+            {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
-            {{ if $image.exists }}
+            {{ if $image }}
                 <div class="section-image">
-                    {{ if $image.resource }}
+                    <img src="{{ $image.Permalink }}" 
-                        {{- $Permalink := $image.resource.RelPermalink -}}
+                        width="{{ $image.Width }}"
-                        {{- $Width := $image.resource.Width -}}
+                        height="{{ $image.Height }}" 
-                        {{- $Height := $image.resource.Height -}}
+                        loading="lazy">
-    
-                        {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
-                            {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                            {{- $Permalink = $thumbnail.RelPermalink -}}
-                            {{- $Width = $thumbnail.Width -}}
-                            {{- $Height = $thumbnail.Height -}}
-                        {{- end -}}
-                        
-                        <img src="{{ $Permalink }}" 
-                            width="{{ $Width }}"
-                            height="{{ $Height }}" 
-                            loading="lazy">
-                    {{ else }}
-                        <img src="{{ $image.permalink }}" loading="lazy" />
-                    {{ end }}
                 </div>
             {{ end }}
         </div>

layouts/page/search.json

@@ -6,8 +6,8 @@
 {{- range $filtered -}}
     {{- $data := dict "title" .Title "date" .Date "permalink" .RelPermalink "content" (.Plain) -}}
 
-    {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
+    {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
-    {{- if $image.exists -}}
+    {{- if $image -}}
         {{- $imagePermalink := "" -}}
         {{- if and $image.resource (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
             {{- $thumbnail := $image.resource.Fill "120x120" -}}

layouts/rss.xml

@@ -38,8 +38,8 @@
         {{ with .Site.Params.Author.email }}<author>{{.}}{{ with $.Site.Params.Author.name }} ({{.}}){{end}}</author>{{end}}
         <guid>{{ .Permalink }}</guid>
         <description>
-            {{- $image := partial "helper/image" (dict "Context" . "Type" "rss") -}}
+            {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
-            {{- if $image.exists -}}
+            {{- if $image -}}
                 {{ "<" | html }}img src="{{ $image.permalink | absURL }}" alt="Featured image of post {{ .Title }}" {{ "/>" | html}}
             {{- end -}}{{ $content }}</description>
         </item>