Add eager loading and high fetchpriority for LCP image

content/_index.md

@@ -1,6 +1,11 @@
 # Musikverein Molbergen
 
-![Gruppenfoto des Musikverein Molbergen im Brgerpark Molbergen](ABP_4586.jpeg)
+{{< figure
+    src="ABP_4586.jpeg"
+    alt="Gruppenfoto des Musikverein Molbergen im Bürgerpark Molbergen"
+    fetchpriority="high"
+    loading="eager"
+    >}}
 
 Der Musikverein Molbergen besteht aktuell aus rund 115 aktiven Mitgliedern, 71% davon weiblich. Das Durchschnittsalter der Mitglieder liegt bei 25 Jahren. Der Verein teilt sich in 10 Register auf, die von unserer Dirigentin Ingrid Sieve auf Kurs gehalten werden. Jeden Donnerstagabend finden von 18.30 Uhr – 19.30 Uhr die Proben des Jugendorchesters und von 20:00 Uhr – 22.00 Uhr die Proben des Hauptorchesters im Molberger Pfarrheim statt.
 

layouts/shortcodes/figure.html

@@ -0,0 +1,61 @@
+{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default
+false }} {{ if .Get "default" }} {{ partial
+"hugo-embedded/shortcodes/figure-default.html" . }} {{ else }} {{- $url :=
+urls.Parse (.Get "src") }} {{- $altText := .Get "alt" }} {{- $caption := .Get
+"caption" }} {{- $href := .Get "href" }} {{- $class := .Get "class" }} {{-
+$target := .Get "target" | default "_blank" }} {{- $nozoom := .Get "nozoom" |
+default false -}} {{- $loading := .Get "loading" | default "lazy" -}} {{-
+$fetchpriority := .Get "fetchpriority" | default "auto" -}}
+
+<figure>
+  {{- with $href }}<a
+    href="{{ . }}"
+    {{
+    with
+    $target
+    }}target="{{ . }}"
+    {{
+    end
+    }}
+    class="inline-block"
+    >{{ end -}} {{- if findRE "^https?" $url.Scheme }}
+    <img
+      class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}"
+      loading="{{ $loading }}"
+      fetchpriority="{{ $fetchpriority }}"
+    />
+    {{- else }} {{- $resource := "" }} {{- if $.Page.Resources.GetMatch
+    ($url.String) }} {{- $resource = $.Page.Resources.GetMatch ($url.String) }}
+    {{- else if resources.GetMatch ($url.String) }} {{- $resource =
+    resources.Get ($url.String) }} {{- end }} {{- with $resource }} {{- if or
+    $disableImageOptimization (eq .MediaType.SubType "svg")}}
+    <img
+      class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
+      src="{{ .RelPermalink }}"
+      alt="{{ $altText }}"
+      loading="{{ $loading }}"
+      fetchpriority="{{ $fetchpriority }}"
+    />
+    {{- else }} <img class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{
+    with $class }} {{ . }}{{ end }}" loading="{{ $loading }}" decoding="async"
+    fetchpriority="{{ $fetchpriority }}" alt="{{ $altText }}" {{ with .Width
+    }}width="{{ . }}"{{ end }} {{ with .Height }}height="{{ . }}"{{ end }}
+    src="{{ (.Resize "800x").RelPermalink }}" srcset=" {{- (.Resize
+    "800x").RelPermalink }} 800w, {{- (.Resize "1280x").RelPermalink }} 1280w"
+    sizes="(min-width: 768px) 50vw, 65vw" data-zoom-src="{{ .RelPermalink }}" />
+    {{- end }} {{- else }}
+    <img
+      class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}"
+      loading="{{ $loading }}"
+      fetchpriority="{{ $fetchpriority }}"
+    />
+    {{- end }} {{- end }} {{ if $href }}</a
+  >{{ end }} {{ with $caption }}
+  <figcaption>{{ . | markdownify }}</figcaption>
+  {{ end }}
+</figure>
+{{- end -}}