Use <figure> for images and videos

assets/css/bobastyle.css

@@ -28,6 +28,7 @@
 
 .post-media {
   margin-top: 15px;
+  display: inline-block;
 }
 
 .post-description {
@@ -106,6 +107,10 @@ img:not(.noborder), video:not(.noborder) {
   border: 5px solid #1b5b9b;
 }
 
+figure {
+  margin: auto;
+}
+
 figcaption {
   font-style: italic;
   font-size: small;

layouts/_default/summary.html

@@ -12,17 +12,24 @@
     {{ partial "post-metadata.html" . }}
 
     {{ with .Resources.GetMatch "feature" }}
-    {{ if eq .MediaType.MainType "image" }}
     <div class="post-media">
-        <img src="{{ .Permalink }}" alt="{{ .Title }}" />
+        <figure>
+            {{ $media := . | resources.Fingerprint "sha512" }}
+            {{ if eq .MediaType.MainType "image" }}
+            <img src="{{ $media.Permalink }}" alt="{{ $media.Title }}" />
+            {{ else if eq .MediaType.MainType "video" }}
+            <video controls>
+                <source src="{{ $media.Permalink }}" alt="{{ $media.Title }}">
+            </video>
+            {{ end }}
+
+            {{ with $media.Title }}
+            <figcaption>
+                {{ . | markdownify }}
+            </figcaption>
+            {{ end }}
+        </figure>
     </div>
-    {{ else if eq .MediaType.MainType "video" }}
-    <div class="post-media">
-        <video controls>
-            <source src="{{ .Permalink }}" alt="{{ .Title }}">
-        </video>
-    </div>
-    {{ end }}
     {{ end }}
 
     <div class="post-description">

layouts/shortcodes/figimage.html

@@ -0,0 +1,22 @@
+<figure>
+
+    {{ $img := $.Page.Resources.GetMatch (.Get "src") | resources.Fingerprint "sha512" }}
+
+    {{ if .Get "href" }}<a href="{{ .Get "href" }}">{{ end }}
+        <img src="{{ $img.Permalink }}"
+             {{ with $img.Title }}
+             alt="{{ . }}"
+             {{ end }}
+
+             {{ with .Get "width" }}width="{{ . }}"{{ end }}
+             {{ with .Get "height" }}height="{{ . }}"{{ end }}
+        />
+    {{ if .Get "href" }}</a>{{ end }}
+
+    {{ with $img.Title }}
+    <figcaption>
+        {{ . | markdownify }}
+    </figcaption>
+    {{ end }}
+
+</figure>

layouts/shortcodes/figure.html

@@ -1,26 +0,0 @@
-<figure>
-
-    {{ $img := $.Page.Resources.GetMatch (.Get "resrc") | resources.Fingerprint "sha512" }}
-
-    {{ if .Get "href" }}<a href="{{ .Get "href" }}">{{ end }}
-        <img src="{{ $img.Permalink }}"
-             {{ if or (.Get "alt") (.Get "caption") }}
-             alt="{{ with .Get "alt" -}}
-                  {{ . -}}
-                  {{ else -}}
-                  {{ .Get "caption" | markdownify -}}
-                  {{ end -}}"
-             {{ end }}
-
-             {{ with .Get "width" }} width="{{ . }}" {{ end }}
-             {{ with .Get "height" }} height="{{ . }}" {{ end }}
-        />
-    {{ if .Get "href" }}</a>{{ end }}
-
-    {{ with .Get "caption" }}
-    <figcaption>
-        {{ . | markdownify }}
-    </figcaption>
-    {{ end }}
-
-</figure>

layouts/shortcodes/figvideo.html

@@ -0,0 +1,18 @@
+<figure>
+
+    {{ $vid := $.Page.Resources.GetMatch (.Get "src") | resources.Fingerprint "sha512" }}
+
+    {{ if .Get "href" }}<a href="{{ .Get "href" }}">{{ end }}
+        <video controls>
+            <source src="{{ $vid.Permalink }}" alt="{{ $vid.Title }}">
+            {{ i18n "browser_no_video_support" }}
+        </video>
+    {{ if .Get "href" }}</a>{{ end }}
+
+    {{ with $vid.Title }}
+    <figcaption>
+        {{ . | markdownify }}
+    </figcaption>
+    {{ end }}
+
+</figure>

layouts/shortcodes/video.html

@@ -1,4 +0,0 @@
-<video controls>
-    <source src="{{ .Get "src" }}" alt="{{ .Get "title" }}">
-    {{ i18n "browser_no_video_support" }}
-</video>