From 3652f4cd2842f416eb50eae16c20617e3e1471b3 Mon Sep 17 00:00:00 2001
From: Mohammad Faani Tabrizi <mohammad_tabrizi@comcast.com>
Date: Fri, 28 Jan 2022 17:37:15 -0500
Subject: [PATCH] added style for figcaption

---
 assets/css/common/post-single.css          | 9 ++++++++-
 layouts/_default/_markup/render-image.html | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 79ccbec..a53c635 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -231,11 +231,18 @@
     max-width: 100%;
 }
 
-.post-content img {
+.post-content {
     border-radius: 4px;
     margin: 1rem 0;
 }
 
+/*  Had to make this change so the images have a smaller bottom margin. 
+    This would allow me to position the caption closer to the image*/
+img {
+    border-radius: 4px;
+    margin: 1rem 0 0.1rem 0;
+}
+
 .post-content img[src*="#center"] {
     margin: 1rem auto;
 }
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 1acb87d..fafd734 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1 +1,8 @@
-<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
+{{ if .Title }}
+  <figure>
+    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
+    <figcaption style ="margin: auto; font-style: italic; font-size: x-small; color: rgb(168, 151, 151); text-align: center; width: 80%; padding: 10px;">{{ .Title }}</figcaption>
+  </figure>
+{{ else }}
+  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
+{{ end }}
\ No newline at end of file