Add image processing

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

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 -}}