fix: use responsive images also in html

Signed-off-by: lennartrommeiss <lennart.rommeiss@deutschebahn.com>
fipguide · Feb 3, 2025 · 38a03bf · 38a03bf
1 parent 2554c20
commit 38a03bf
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/themes/fiptheme/layouts/_default/_markup/render-image.html b/themes/fiptheme/layouts/_default/_markup/render-image.html
@@ -5,7 +5,7 @@
   <!-- Remote Bild: Direkt ausgeben ohne Bildverarbeitung -->
   {{ $remoteImage := resources.GetRemote .Destination }}
   <p class="md-image">
-    <img src="{{ $remoteImage.Permalink }}" alt="{{ .Title }}" title="{{ .Title }}" />
+    <img src="{{ $remoteImage.Permalink }}" alt="{{ .Title }}" title="{{ .Title }}" loading="lazy"/>
   </p>
 {{ else }}
   {{/* Lokales Bild: Mit Bildverarbeitung */}}
@@ -29,33 +29,33 @@
 
           {{ if gt $width 2200 }}
               {{ with $originalImage.Resize "2200x" }}
-                  <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" />
+                  <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
               {{ end }}
           {{ end }}
 
           {{ if gt $width 1500 }}
               {{ with $originalImage.Resize "1500x" }}
-                  <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" />
+                  <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
               {{ end }}
           {{ end }}
 
           {{ if gt $width 1200 }}
               {{ with $originalImage.Resize "1200x" }}
-                  <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" />
+                  <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
               {{ end }}
           {{ end }}
 
           {{ if gt $width 800 }}
               {{ with $originalImage.Resize "800x" }}
-                  <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" />
+                  <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
               {{ end }}
           {{ end }}
 
           {{ $tinyImage := $originalImage }}
           {{ if gt $width 500 }}
               {{ $tinyImage = $originalImage.Resize "500x" }}
           {{ end }}
-          <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" />
+          <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" loading="lazy"/>
       </picture>
   </p>
 {{ end }}
diff --git a/themes/fiptheme/layouts/partials/image.html b/themes/fiptheme/layouts/partials/image.html
@@ -0,0 +1,36 @@
+{{ $myTitle := "" }}
+  <p class="md-image">
+      <picture>
+          {{ $width := .Width }}
+
+          {{ if gt $width 2200 }}
+              {{ with .Resize "2200x" }}
+                  <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+              {{ end }}
+          {{ end }}
+
+          {{ if gt $width 1500 }}
+              {{ with .Resize "1500x" }}
+                  <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+              {{ end }}
+          {{ end }}
+
+          {{ if gt $width 1200 }}
+              {{ with .Resize "1200x" }}
+                  <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+              {{ end }}
+          {{ end }}
+
+          {{ if gt $width 800 }}
+              {{ with .Resize "800x" }}
+                  <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+              {{ end }}
+          {{ end }}
+
+          {{ $tinyImage :=  . }}
+          {{ if gt $width 500 }}
+              {{ $tinyImage = .Resize "500x" }}
+          {{ end }}
+          <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" loading="lazy"/>
+      </picture>
+  </p>
diff --git a/themes/fiptheme/layouts/partials/teaser.html b/themes/fiptheme/layouts/partials/teaser.html
@@ -1,6 +1,8 @@
 <a href="{{ .RelPermalink }}" class="m-teaser col-12 col-lg-4">
   {{ $image := .Page.Resources.GetMatch "image.webp" }}
-  <img class="m-teaser__image" src="{{ $image.RelPermalink }}" alt="" loading="lazy">
+  <div class="m-teaser__image">
+    {{ partial "image.html" $image }}
+  </div>
   {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
   {{ $dateHuman := .Date | time.Format ":date_long" }}
   <time class="m-teaser__dateline" datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>