hugo: Display images a figures

assets/css/main.css

@@ -207,11 +207,9 @@ article {
     margin: 0;
 
     figcaption {
-      p {
+      margin: 0.25rem 0 2rem;
-        margin: 0.25rem 0 2rem;
+      font-family: var(--sans-serif);
-        font-family: var(--sans-serif);
+      text-align: center;
-        text-align: center;
-      }
     }
   }
 

content/fotos/abendliche-bewoelkung/index.md

@@ -5,4 +5,4 @@ description: "über Regensburg"
 tags: [fotos, regensburg]
 ---
 
-{{< figure src="abendliche-bewoelkung.webp" alt="Abendliche Bewölkung über Regensburg" caption="Abendliche Bewölkung über Regensburg" loading="lazy" >}}
+![Abendliche Bewölkung über Regensburg](./abendliche-bewoelkung.webp "Abendliche Bewölkung über Regensburg")

content/fotos/ustronie-morskie/index.md

@@ -5,10 +5,16 @@ date: 2025-11-15T21:53:01+01:00
 tags: [fotos, polen]
 ---
 
-{{< figure src="holzwall.jpeg" alt="Holzwall" caption="Holzwall" loading="lazy" decoding="async" fetchpriority="high" >}}
+![Holzwall](./holzwall.jpeg "Holzwall")
-{{< figure src="pfote.jpeg" alt="Pfote" caption="Pfote" loading="lazy" >}}
+
-{{< figure src="nala.jpeg" alt="Nala" caption="Nala" loading="lazy" >}}
+![Pfote](./pfote.jpeg "Pfote")
-{{< figure src="pier.jpeg" alt="Pier" caption="Pier" loading="lazy" >}}
+
-{{< figure src="dom-1.jpeg" alt="Kolberger Dom" caption="Kolberger Dom" loading="lazy" >}}
+![Nala](./nala.jpeg "Nala")
-{{< figure src="dom-2.jpeg" alt="Dom" caption="Dom" loading="lazy" >}}
+
-{{< figure src="moeve.jpeg" alt="Möve" caption="Möve" loading="lazy" >}}
+![Pier](./pier.jpeg "Pier")
+
+![Kolberger Dom](./dom-1.jpeg "Kolberger Dom")
+
+![Dom](./dom-2.jpeg "Dom")
+
+![Möve](./moeve.jpeg "Möve")

hugo.toml

@@ -8,6 +8,8 @@ enableGitInfo = true
 [markup.goldmark]
 [markup.goldmark.renderer]
 unsafe = true
+[markup.goldmark.parser]
+wrapStandAloneImageWithinParagraph = false
 [markup.highlight]
 style = "rose-pine-dawn"
 

layouts/_markup/render-image.html

@@ -0,0 +1,15 @@
+{{- if .IsBlock -}}
+  <figure>
+    <img
+      src="{{ .Destination | safeURL }}"
+      {{- with .PlainText }}alt="{{ . }}"{{ end -}}
+    />
+    {{- with .Title }}<figcaption>{{ . }}</figcaption>{{ end -}}
+  </figure>
+{{- else -}}
+  <img
+    src="{{ .Destination | safeURL }}"
+    {{- with .PlainText }}alt="{{ . }}"{{ end -}}
+    {{- with .Title }}title="{{ . }}"{{ end -}}
+  />
+{{- end -}}