From 937a80bc178f3ba67a9ae78b351813628d7d2e10 Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Tue, 19 Oct 2021 13:57:39 -0500
Subject: [PATCH] Use <figure> for images and videos

---
 assets/css/bobastyle.css         |  5 +++++
 layouts/_default/summary.html    | 25 ++++++++++++++++---------
 layouts/shortcodes/figimage.html | 22 ++++++++++++++++++++++
 layouts/shortcodes/figure.html   | 26 --------------------------
 layouts/shortcodes/figvideo.html | 18 ++++++++++++++++++
 layouts/shortcodes/video.html    |  4 ----
 6 files changed, 61 insertions(+), 39 deletions(-)
 create mode 100644 layouts/shortcodes/figimage.html
 delete mode 100644 layouts/shortcodes/figure.html
 create mode 100644 layouts/shortcodes/figvideo.html
 delete mode 100644 layouts/shortcodes/video.html

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 1ee68e5..5044719 100644
--- a/assets/css/bobastyle.css
+++ b/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;
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index 119dbde..fd83cf1 100644
--- a/layouts/_default/summary.html
+++ b/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">
diff --git a/layouts/shortcodes/figimage.html b/layouts/shortcodes/figimage.html
new file mode 100644
index 0000000..49699d1
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
deleted file mode 100644
index a311ce9..0000000
--- a/layouts/shortcodes/figure.html
+++ /dev/null
@@ -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>
diff --git a/layouts/shortcodes/figvideo.html b/layouts/shortcodes/figvideo.html
new file mode 100644
index 0000000..6c7e041
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
deleted file mode 100644
index a3ddf0c..0000000
--- a/layouts/shortcodes/video.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<video controls>
-    <source src="{{ .Get "src" }}" alt="{{ .Get "title" }}">
-    {{ i18n "browser_no_video_support" }}
-</video>