Use semantic figure/figcaption for images with titles

Wraps images that have a title attribute in <figure> with <figcaption>
for better accessibility and SEO.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: johanrin

layouts/_default/_markup/render-image.html

@@ -2,13 +2,29 @@
 {{- if and (ne .Page.Kind "section") (.Page.Section ) }}
     <!-- Generate a unique id for each image -->
     {{- $random := (substr (md5 .Destination) 0 5) }}
+    {{- if .Title }}
+    <figure>
+        <input type="checkbox" id="zoomCheck-{{$random}}" hidden>
+        <label for="zoomCheck-{{$random}}">
+            <img class="zoomCheck" loading="lazy" decoding="async"
+                src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
+        </label>
+        <figcaption>{{ .Title }}</figcaption>
+    </figure>
+    {{- else }}
     <input type="checkbox" id="zoomCheck-{{$random}}" hidden>
     <label for="zoomCheck-{{$random}}">
-        <img class="zoomCheck" loading="lazy" decoding="async" 
-            src="{{ .Destination | safeURL }}" alt="{{ .Text }}" 
-            {{ with.Title}} title="{{ . }}" {{ end }} />
+        <img class="zoomCheck" loading="lazy" decoding="async"
+            src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
     </label>
+    {{- end }}
 {{- else }}
-    <img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}" 
-        alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
+    {{- if .Title }}
+    <figure>
+        <img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
+        <figcaption>{{ .Title }}</figcaption>
+    </figure>
+    {{- else }}
+    <img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
+    {{- end }}
 {{- end }}