use get-image partial

layouts/cv/section.html

@@ -23,11 +23,14 @@
   {{ if .IsDescendant ( .GetPage "/cv/organisations" ) }}
       <header class="site-content__header">
           <div class="article-header__featured-image article-header__featured-image--fit"
-          {{ if .Params.featured_image }}
+            {{- with .Params.featured_image -}}
-              {{ with .Resources.GetMatch .Params.featured_image }}
+              {{- with ( $.Resources.GetMatch . ) -}}
-              style="background-image: url({{ .RelPermalink }}); {{ with .Params.bg }}background-color: {{ . }};{{ end }}"
+                style="background-image: url({{- partialCached "images/get-image.html" ( dict "img" . ) .Title -}}){{ with .Params.bg -}}; background-color: {{ . -}};{{- end -}}"
-              {{ end }}
+              {{- else -}}
-          {{ end }}>
+                {{- errorf "No Page Resource found for src '%q' (%q).\n\n\tAvailable Page Resources are:\n\t\t%v" . $.pc.Page.File.Path $.pc.Page.Resources -}}
+              {{- end -}}
+            {{- end -}}
+          >
             <div class="article-header__title-wrapper{{ if .Params.title_in_logo }} article-header__title-wrapper--no-title{{ end }}">
                 <h2 class="article-header__title">{{ default .Title .Params.markup_title | .Page.RenderString  }}</h2>
             </div>

layouts/partials/images/get-image.html

@@ -1,25 +1,62 @@
-{{- /*
+<!--
     Renders an image, resizing it if valid.
 
     @params img  The image.
-  */
+    @params size The resize target. Optional.
--}}
+    @params format Image conversation format. Optional.
+-->
 
+<!-- Variable assignment -->
+
+{{- $img := .img -}}
+{{- $hint := default ( index $img.Params "hint" ) "" }}
+{{- $size := cond ( isset . "size" ) .size "" }}
+{{- $isResizable := not ( in ( slice "avif" "svg" "gif" ) $img.MediaType.SubType ) -}}
+{{- $format := cond ( isset . "format" ) .format "webp" }}
+
+{{- $permalink := "" -}}
 
 <!-- Validation -->
 
+{{- if ( not ( isset . "img" ) ) -}}
+  {{- errorf "No img set" -}}
+{{- end -}}
+
 {{- if ne .img.MediaType.MainType "image" -}}
   {{- errorf "Image '%q' is not an image" .img }}
 {{- end -}}
 
+{{- if ( isset . "size" ) -}}
+  {{- if $isResizable -}}
+    {{- $width := ( first 1 ( split .size "x" ) ) -}}
+    {{- if gt $width $img.Width -}}
+      {{- warnf "Requested size %s is more than image width %d (%q)" $width $img.Width $img.File.Path -}}
+    {{- end -}}
+  {{- else -}}
+    {{- warnf "Size set on non-resizable image of type %s; ignoring" $img.MediaType.SubType -}}
+  {{- end -}}
+{{- end -}}
 
 <!-- Rendering -->
 
-{{- $isResizable := not ( in ( slice "avif" "svg" "gif" ) .img.MediaType.SubType ) -}}
 {{- if $isResizable -}}
-  {{- with .img.Resize "1200x webp" -}}
+  {{- if $size -}}
-    {{- .RelPermalink -}}
+    {{- if eq $size "same" -}}
+      {{- $permalink = ( $img.Process ( printf "%s %s" $format $hint ) ).RelPermalink -}}
+    {{- else -}}
+      {{- $permalink = ( $img.Resize ( printf "%s %s %s" $size $format $hint ) ).RelPermalink -}}
+    {{- end -}}
+  {{- else -}}
+    {{- if gt $img.Width 1200 -}}
+      {{- $permalink = ( $img.Resize ( printf "1200x %s %s" $format $hint ) ).RelPermalink -}}
+    {{- else if gt $img.Width 800 -}}
+      {{- $permalink = ( $img.Resize ( printf "800x %s %s" $format $hint ) ).RelPermalink -}}
+    {{- else -}}
+      {{- $permalink = ( $img.Process ( printf "%s %s" $format $hint ) ).RelPermalink -}}
+    {{- end -}}
   {{- end -}}
 {{- else }}
-  {{- .img.RelPermalink -}}
+  {{- $permalink = $img.RelPermalink -}}
 {{- end -}}
+
+{{- return $permalink -}}

layouts/partials/item-tile.html

@@ -32,17 +32,14 @@
     <article
       class="item-tile lazy {{- with .Params.site }}item-tile--{{ . }}{{ end -}}"
       {{ if .Params.featured_image }}
+      style="background-image: url(
         {{ with .Resources.GetMatch .Params.featured_image }}
-          {{ if  ( in ( slice "avif" "svg" "gif" ) .MediaType.SubType ) }}
+          {{- partialCached "images/get-image.html" ( dict "img" . "size" "500x" ) ( printf "%s-500x" .Title ) -}}
-            style="background-image: url({{ .RelPermalink }})"
+        {{- else -}}
-          {{ else }}
+          {{- warnf "Featured image %s is not a page resource" .Params.featured_image -}}
-            {{ with .Resize "1000x webp" }}
+          {{- .Params.featured_image -}}
-              style="background-image: url({{ .RelPermalink }})"
+        {{- end -}}
-            {{ end }}
+      )"
-          {{ end }}
-        {{ else }}
-          style="background-image: url({{ .Params.featured_image }})"
-        {{ end }}
       {{ end }}
     >
       {{ if .Params.featured_image -}}
@@ -51,15 +48,10 @@
           style="display: none;"
           src="
           {{- with .Resources.GetMatch .Params.featured_image -}}
-            {{- if ( in ( slice "avif" "svg" "gif" ) .MediaType.SubType ) -}}
+            {{- partialCached "images/get-image.html" ( dict "img" . "size" "500x" ) ( printf "%s-500x" .Title ) -}}
-              {{ .RelPermalink }}
           {{- else -}}
-              {{- with .Resize "1000x webp" -}}
+            {{- warnf "Featured image %s is not a page resource" .Params.featured_image -}}
-                {{- .RelPermalink -}}
+            {{- .Params.featured_image -}}
-              {{- end -}}
-            {{- end -}}
-          {{- else -}}
-            {{ .Params.featured_image }}
           {{ end }}
           "
           alt="

layouts/partials/media/picture.html

@@ -1,12 +1,15 @@
 <!--
     Render an image in a context-appropriate format and size.
 
-    @params context Image media file.
+    @params src Image media file.
+    @params raw Force raw image only. Optional.
 -->
 
 <!-- Variable assignment -->
 
-{{- $src := . -}}
+{{- $src := .src -}}
+{{- $hint := default ( index $src.Params "hint" ) "" }}
+{{- $format := cond ( and ( isset . "raw" ) .raw ) "" "webp" -}}
 {{- $isResizable := not ( in ( slice "svg" "gif" ) $src.MediaType.SubType ) -}}
 
 
@@ -17,18 +20,30 @@
   itemprop="image"
 >
   {{ if $isResizable -}}
-    <source srcset="{{- ($src.Resize "1200x webp").RelPermalink -}}" />
     <source 
-      srcset="{{- ($src.Resize "800x png").RelPermalink -}}"
+      srcset="{{- partialCached "images/get-image.html" ( dict "img" $src "size" "same" "format" $format ) $src.Title -}}"
+    />
+    {{- if gt $src.Width 1200 -}}
+      <source 
+        srcset="{{- partialCached "images/get-image.html" ( dict "img" $src "size" "1200x" "format" $format ) ( printf "%s-1200x" $src.Title ) -}}" 
+        media="(max-width: 1200px)"
+      />
+    {{- end -}}
+    {{- if gt $src.Width 800 -}}
+      <source
+        srcset="{{- partialCached "images/get-image.html" ( dict "img" $src "size" "800x" "format" $format ) ( printf "%s-800x" $src.Title ) -}}"
         media="(max-width: 800px)"
       />
+    {{- end -}}
   {{- end }}
   <img
     class="u-photo picture__image"
     {{ if not $isResizable -}}
       src="{{- $src.RelPermalink -}}"
     {{- else -}}
-      src="{{- ($src.Resize "1200x webp").RelPermalink -}}" width="{{- $src.Width -}}" height="{{- $src.Height -}}"
+      src="{{- partialCached "images/get-image.html" ( dict "img" $src "format" $format ) $src.Title -}}" 
+      width="{{- $src.Width -}}"
+      height="{{- $src.Height -}}"
     {{- end }}
     {{ with $src.Params.alt -}}alt="{{- . -}}"{{- end }}
     {{ with $src.Params.title -}}title="{{- . -}}"{{- end }}

layouts/partials/media/video.html

@@ -16,9 +16,7 @@
     poster="
     {{- if $src.Params.poster -}}
         {{- $posterSrc := $.Page.Resources.GetMatch ( .Get $src.Params.poster ) -}}
-        {{- with $posterSrc.Resize "1200x webp" -}}
+        {{- partialCached "images/get-image.html" ( dict "img" $posterSrc ) $posterSrc.Title -}}
-            {{- .RelPermalink -}}
-        {{- end -}}
     {{- else -}}
         {{- erroridf "a11y-video-poster" "No poster defined for resource %q (%q)" $src.RelPermalink .page_file_path -}}
     {{- end -}}

layouts/partials/single/main-header/item-tile.html

@@ -20,7 +20,7 @@
     style="display: none;"
     src="
     {{- with ( $.pc.Resources.GetMatch . ) -}}
-      {{ partialCached "images/get-image.html" ( dict "img" . ) . }}
+      {{- partialCached "images/get-image.html" ( dict "img" . ) .Title -}}
     {{- else -}}
       {{- . -}}
     {{- end -}}
@@ -37,7 +37,7 @@
   class="article-header__featured-image"
   {{ with .pc.Params.featured_image }}
     {{ with ( $.pc.Resources.GetMatch . ) }}
-      style="background-image: url({{ partial "images/get-image.html" ( dict "img" . ) }})"
+      style="background-image: url({{- partialCached "images/get-image.html" ( dict "img" . ) .Title -}})"
     {{ else }}
       {{- if $.pc.Page.Resources -}}
         {{- errorf "No Page Resource found for src '%q' (%q).\n\n\tAvailable Page Resources are:\n\t\t%v" . $.pc.Page.File.Path $.pc.Page.Resources -}}

layouts/shortcodes/figure.html

@@ -40,7 +40,7 @@
     {{- end -}}
 
     {{- if eq $src.ResourceType "image" -}}
-      {{- partial "media/picture.html" $src -}}
+      {{- partial "media/picture.html" ( dict "src" $src ) -}}
 
     {{- else if eq $src.ResourceType "audio" -}}
         {{- partial "media/audio.html" $src -}}

layouts/shortcodes/picture.html

@@ -4,11 +4,13 @@
     @params src Image `src` path.
     @params link  URI or Page Resource to wrap image in. Optional.
     @params rel Force relationship value. Optional.
+    @params raw Force raw image only. Optional.
 -->
 
 <!-- Variable assignment -->
 
 {{- $src := $.Page.Resources.GetMatch ( .Get "src" ) -}}
+{{- $raw := default false ( .Get "raw" ) -}}
 {{- $linkedResource := $.Page.Resources.GetMatch ( .Get "link" ) -}}
 {{- $valid_rel_values := partialCached "util/get_valid_rel_values.html" . -}}
 
@@ -37,7 +39,7 @@
         <a href="{{- .Get "link" -}}">
     {{- end -}}
 {{- end -}}
-{{- partial "media/picture.html" $src -}}
+{{- partial "media/picture.html" ( dict "src" $src "raw" $raw ) -}}
 {{- if .Get "link" -}}
     </a>
 {{- end -}}