Add image processing

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

layouts/_default/_markup/render-image.html

@@ -1,7 +1,7 @@
-{{ partial "components/image/index.html" (dict
+{{ partial "components/image/index.html" (dict "page" .Page "image" (dict
   "src" .Destination
   "caption" .Text
   "alt" .Title
-  )
+  ))
 }}
 {{- /* chomp trailing newline */ -}}

layouts/partials/components/hero/index.html

@@ -5,5 +5,5 @@
     ·
     <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
   </div>
-  {{ partial "components/image/index.html" .Params.hero }}
+  {{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
 </section>

layouts/partials/components/image/index.html

@@ -1,24 +1,58 @@
-{{ $imageData := partial "components/image/reflect.html" . }}
-{{- with $imageData.image -}}
+{{- $page := .page -}}
+{{- $image := .image -}}
+
+{{- $src := $image -}}
+{{- $caption := "" -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+
+{{- if reflect.IsMap $image -}}
+  {{- $src = $image.src | default "" -}}
+  {{- $caption = $image.caption | default "" -}}
+  {{- $title = $image.title | default $caption | default "" -}}
+  {{- $alt = $image.alt | default $title | default "" -}}
+{{- end -}}
+
+{{- if $src -}}
+  {{- $isRemote := strings.HasPrefix $src "http" -}}
+
+  {{- if $isRemote -}}
+    {{- $remote := resources.GetRemote $src -}}
+    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
+  {{- else -}}
+    {{- $image = ($page.Resources.Get $src) | default (resources.Get $src) -}}
+  {{- end -}}
+{{- end -}}
+
+{{- with $image -}}
+  {{ $full := . | images.Filter (images.Process "webp q90") }}
+
+  {{ $thumb := . }}
+  {{- if gt .Width 2000 -}}
+    {{- $thumb = . | images.Filter (images.Process "resize 2000x webp q75") -}}
+  {{- else -}}
+    {{- $thumb = . | images.Filter (images.Process "webp q75") -}}
+  {{- end -}}
+
   <figure class="captioned-image lightbox">
     <a
-      href="{{- .RelPermalink -}}"
-      data-pswp-src="{{- .RelPermalink -}}"
-      data-pswp-width="{{- .Width -}}"
-      data-pswp-height="{{- .Height -}}"
+      href="{{- $full.RelPermalink -}}"
+      data-pswp-src="{{- $full.RelPermalink -}}"
+      data-pswp-width="{{- $full.Width -}}"
+      data-pswp-height="{{- $full.Height -}}"
       class="pswp-image"
     >
       <img
-        src="{{- .RelPermalink -}}"
-        width="{{- .Width -}}"
-        height="{{- .Height -}}"
+        src="{{- $thumb.RelPermalink -}}"
+        width="{{- $thumb.Width -}}"
+        height="{{- $thumb.Height -}}"
         loading="lazy"
-        {{ with $imageData.title }}title="{{- . -}}"{{ end }}
-        {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+        {{ with $title }}title="{{- . -}}"{{ end }}
+        {{ with $alt }}alt="{{- . -}}"{{ end }}
       />
     </a>
-    {{ with $imageData.caption }}
-      <figcaption>{{ . }}</figcaption>
+    {{ with $caption }}
+      <figcaption>{{ . | safeHTML }}</figcaption>
     {{ end }}
   </figure>
 {{- end -}}

layouts/partials/components/image/reflect.html

@@ -1,31 +0,0 @@
-{{- $input := . -}}
-
-{{- $src := $input -}}
-{{- $caption := "" -}}
-{{- $title := "" -}}
-{{- $alt := "" -}}
-
-{{- if reflect.IsMap $input -}}
-  {{- $src = $input.src | default "" -}}
-  {{- $caption = $input.caption | default "" -}}
-  {{- $title = $input.title | default $caption | default "" -}}
-  {{- $alt = $input.alt | default $title | default "" -}}
-{{- end -}}
-
-{{ $result := dict "image" nil "caption" $caption "title" $title "alt" $alt }}
-
-{{- if $src -}}
-  {{- $isRemote := strings.HasPrefix $src "http" -}}
-  {{- $image := "" -}}
-
-  {{- if $isRemote -}}
-    {{- $remote := resources.GetRemote $src -}}
-    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
-  {{- else -}}
-    {{- $image = resources.Get $src -}}
-  {{- end -}}
-
-  {{- $result = (dict "image" $image "caption" $caption "title" $title "alt" $alt) -}}
-{{- end -}}
-
-{{- return $result -}}