feat: add option to disable image processing (#83)

* feat: add option to disable image processing

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/37

* refactor(list): use article/components/header inside default.html

* refactor: use .Fill for cover image

exampleSite/config.yaml

@@ -86,6 +86,12 @@ params:
         # Available values: auto, light, dark
         default: auto
 
+    imageProcessing:
+        cover:
+            enabled: true
+        content:
+            enabled: true
+
 menu:
     main:
         - identifier: home

layouts/_default/_markup/render-image.html

@@ -1,19 +1,27 @@
 {{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
 {{- if $image -}}
-	{{- $small := $image.Resize "480x" -}}
-	{{- $big := $image.Resize "1024x" -}}
 	{{- $alt := .PlainText | safeHTML -}}
-	{{- $caption := "" -}}
-	{{- with $alt -}}
-	{{- $caption = . | safeHTML -}}
-	{{- end -}}
 	<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px">
 		<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
-			<img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w"
+			{{- $Permalink := $image.RelPermalink -}}
-				src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
+			{{- $Width := $image.Width -}}
-				alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}">
+			{{- $Height := $image.Height -}}
+			{{- $Srcset := "" -}}
+
+			{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
+				{{- $small := $image.Resize "480x" -}}
+				{{- $big := $image.Resize "1024x" -}}
+				{{- $Srcset = printf "%s 480w, %s 1024w" $small.RelPermalink $big.RelPermalink -}}
+			{{- end -}}
+			
+			<img src="{{ $Permalink }}"
+				{{ with $Srcset }}srcset="{{ . }}"{{ end }}
+				width="{{ $Width }}"
+				height="{{ $Height }}"
+				loading="lazy"
+				{{ with $alt }}alt="{{ . }}"{{ end }}>
 		</a>
-		{{ with $caption }}
+		{{ with $alt }}
 		<figcaption>{{ . | markdownify }}</figcaption>
 		{{ end }}
 	</figure>

layouts/_default/list.html

@@ -20,11 +20,23 @@
         {{ if $image.exists }}
             <div class="section-image">
                 {{ if $image.resource }}
+                    {{- $Permalink := $image.resource.RelPermalink -}}
+                    {{- $Width := $image.resource.Width -}}
+                    {{- $Height := $image.resource.Height -}}
+
+                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
                         {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
+                        {{- $Permalink = $thumbnail.RelPermalink -}}
-                        height="{{ $thumbnail.Height }}" loading="lazy">
+                        {{- $Width = $thumbnail.Width -}}
+                        {{- $Height = $thumbnail.Height -}}
+                    {{- end -}}
+                    
+                    <img src="{{ $Permalink }}" 
+                        width="{{ $Width }}"
+                        height="{{ $Height }}" 
+                        loading="lazy">
                 {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy">
+                    <img src="{{ $image.permalink }}" loading="lazy" />
                 {{ end }}
             </div>
         {{ end }}

layouts/page/search.json

@@ -9,8 +9,12 @@
 
     {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
     {{- if and $image.exists $image.resource -}}
+        {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
             {{- $thumbnail := $image.resource.Fill "120x120" -}}
             {{- $image := dict "image" (absURL $thumbnail.Permalink) -}}
+        {{- else -}}
+            {{- $image := dict "image" (absURL $image.resource.Permalink) -}}
+        {{- end -}}
         {{- $data = merge $data $image -}}
     {{ end }}
 

layouts/partials/article-list/compact.html

@@ -15,9 +15,21 @@
         {{ if $image.exists }}
             <div class="article-image">
                 {{ if $image.resource }}
+                    {{- $Permalink := $image.resource.RelPermalink -}}
+                    {{- $Width := $image.resource.Width -}}
+                    {{- $Height := $image.resource.Height -}}
+
+                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
                         {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
+                        {{- $Permalink = $thumbnail.RelPermalink -}}
-                        height="{{ $thumbnail.Height }}" loading="lazy">
+                        {{- $Width = $thumbnail.Width -}}
+                        {{- $Height = $thumbnail.Height -}}
+                    {{- end -}}
+                    
+                    <img src="{{ $Permalink }}" 
+                        width="{{ $Width }}"
+                        height="{{ $Height }}" 
+                        loading="lazy">
                 {{ else }}
                     <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
                 {{ end }}

layouts/partials/article-list/default.html

@@ -1,22 +1,4 @@
 {{ $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" }}
 <article class="{{ if $image.exists }}has-image{{ end }}">
-    {{ if $image.exists }}
+    {{ partial "article/components/header" . }}
-        <div class="article-image">
-            <a href="{{ .RelPermalink }}">
-                {{ if $image.resource }}
-                    {{- $thumbnail := $image.resource.Fill "800x250" -}}
-                    {{- $thumbnailRetina := $image.resource.Fill "1600x500" -}}
-
-                    <img src="{{ $thumbnail.RelPermalink }}" 
-                        srcset="{{ $thumbnail.RelPermalink }} 800w, {{ $thumbnailRetina.RelPermalink }} 1600w"
-                        width="{{ $thumbnail.Width }}" height="{{ $thumbnail.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 }}
 </article>

layouts/partials/article-list/tile.html

@@ -6,10 +6,23 @@
             <div class="article-image">
                 {{ if $image.resource }}
                     {{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}}
-                    {{- $thumbnail := $imageRaw.Fill .size -}}
+                    {{- $Permalink := $imageRaw.RelPermalink -}}
+                    {{- $Width := $imageRaw.Width -}}
+                    {{- $Height := $imageRaw.Height -}}
 
-                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" 
+                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
-                        loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">
+                        {{- $thumbnail := $imageRaw.Fill .size -}}
+                        {{- $Permalink = $thumbnail.RelPermalink -}}
+                        {{- $Width = $thumbnail.Width -}}
+                        {{- $Height = $thumbnail.Height -}}
+                    {{- end -}}
+                    
+                    <img src="{{ $Permalink }}" 
+                        width="{{ $Width }}" 
+                        height="{{ $Height }}" 
+                        loading="lazy" 
+                        data-key="{{ .context.Slug }}" 
+                        data-hash="{{ $imageRaw.Data.Integrity }}">
                 {{ else }}
                     <img src="{{ $image.permalink }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.permalink }}"/>
                 {{ end }}

layouts/partials/article/components/header.html

@@ -2,16 +2,32 @@
     {{- $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" -}}
     {{ if $image.exists }}
         <div class="article-image">
+            <a href="{{ .RelPermalink }}">
                 {{ if $image.resource }}
-                {{- $tablet := $image.resource.Resize "1024x" -}}
+                    {{- $Permalink := $image.resource.RelPermalink -}}
-                {{- $desktop := $image.resource.Resize "2000x" -}}
+                    {{- $Width := $image.resource.Width -}}
+                    {{- $Height := $image.resource.Height -}}
+                    {{- $Srcset := "" -}}
                     
-                <img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
+                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
-                    src="{{ $desktop.RelPermalink }}" width="{{ $image.resource.Width }}" height="{{ $image.resource.Height }}" loading="lazy"
+                        {{- $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 }}