use get-image partial

2025-06-04 17:57:21 +02:00 · 2025-06-04 17:57:21 +02:00 · edba5d203e
commit edba5d203e
parent ed9e769b2d
8 changed files with 94 additions and 47 deletions
--- a/layouts/cv/section.html
+++ b/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 .Resources.GetMatch .Params.featured_image }}
-              style="background-image: url({{ .RelPermalink }}); {{ with .Params.bg }}background-color: {{ . }};{{ end }}"
-              {{ end }}
-          {{ end }}>
+            {{- with .Params.featured_image -}}
+              {{- with ( $.Resources.GetMatch . ) -}}
+                style="background-image: url({{- partialCached "images/get-image.html" ( dict "img" . ) .Title -}}){{ with .Params.bg -}}; background-color: {{ . -}};{{- end -}}"
+              {{- else -}}
+                {{- 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>
--- a/layouts/partials/images/get-image.html
+++ b/layouts/partials/images/get-image.html
@ -1,25 +1,62 @@
-{{- /*
-  Renders an image, resizing it if valid.
+<!--
+    Renders an image, resizing it if valid.

-  @params img  The image.
-  */
-}}
+    @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" -}}
-    {{- .RelPermalink -}}
+  {{- if $size -}}
+    {{- 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 -}}
--- a/layouts/partials/item-tile.html
+++ b/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 ) }}
-            style="background-image: url({{ .RelPermalink }})"
-          {{ else }}
-            {{ with .Resize "1000x webp" }}
-              style="background-image: url({{ .RelPermalink }})"
-            {{ end }}
-          {{ end }}
-        {{ else }}
-          style="background-image: url({{ .Params.featured_image }})"
-        {{ end }}
+          {{- partialCached "images/get-image.html" ( dict "img" . "size" "500x" ) ( printf "%s-500x" .Title ) -}}
+        {{- else -}}
+          {{- warnf "Featured image %s is not a page resource" .Params.featured_image -}}
+          {{- .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 ) -}}
-              {{ .RelPermalink }}
-            {{- else -}}
-              {{- with .Resize "1000x webp" -}}
-                {{- .RelPermalink -}}
-              {{- end -}}
-            {{- end -}}
+            {{- partialCached "images/get-image.html" ( dict "img" . "size" "500x" ) ( printf "%s-500x" .Title ) -}}
          {{- else -}}
-            {{ .Params.featured_image }}
+            {{- warnf "Featured image %s is not a page resource" .Params.featured_image -}}
+            {{- .Params.featured_image -}}
          {{ end }}
          "
          alt="
--- a/layouts/partials/media/picture.html
+++ b/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 -}}"
-      media="(max-width: 800px)"
+      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 }}
--- a/layouts/partials/media/video.html
+++ b/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" -}}
-            {{- .RelPermalink -}}
-        {{- end -}}
+        {{- partialCached "images/get-image.html" ( dict "img" $posterSrc ) $posterSrc.Title -}}
    {{- else -}}
        {{- erroridf "a11y-video-poster" "No poster defined for resource %q (%q)" $src.RelPermalink .page_file_path -}}
    {{- end -}}
--- a/layouts/partials/single/main-header/item-tile.html
+++ b/layouts/partials/single/main-header/item-tile.html
@ -19,8 +19,8 @@
    class="u-photo"
    style="display: none;"
    src="
-  {{- with ( $.pc.Resources.GetMatch . ) -}}
-      {{ partialCached "images/get-image.html" ( dict "img" . ) . }}
+    {{- with ( $.pc.Resources.GetMatch . ) -}}
+      {{- 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 -}}
--- a/layouts/shortcodes/figure.html
+++ b/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 -}}
--- a/layouts/shortcodes/picture.html
+++ b/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 -}}