From 2bd6efa95a174ac44e30a3af1e57e6f40d6e0e3a Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 26 Apr 2022 03:03:34 +0800
Subject: [PATCH] feat: support showing description of preview image

Also moved the image position to the metadata area
---
 _layouts/post.html       | 51 ++++++++++++++++++++++------------------
 _sass/addon/commons.scss |  2 +-
 _sass/layout/post.scss   |  3 +--
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index a1e4f48..b2f92d1 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -11,31 +11,9 @@ tail_includes:
 
 {% include lang.html %}
 
-{% if page.image.path %}
-  {% capture bg %}
-    {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
-  {% endcapture %}
-  <img src="{{ page.image.path }}" class="preview-img {{ bg | strip }}"
-      alt="{{ page.image.alt | default: "Preview Image" }}"
-
-      {% if page.image.width %}
-        width="{{ page.image.width }}"
-      {% elsif page.image.w %}
-        width="{{ page.image.w }}"
-      {% endif %}
-
-      {% if page.image.height %}
-        height="{{ page.image.height }}"
-      {% elsif page.image.h %}
-        height="{{ page.image.h }}"
-      {% endif %}>
-{% endif %}
-
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted">
-
-  <div>
     <!-- published date -->
     <span>
       {{ site.data.locales[lang].post.posted }}
@@ -49,7 +27,34 @@ tail_includes:
       {% include datetime.html date=page.last_modified_at tooltip=true %}
     </span>
     {% endif %}
-  </div>
+
+  {% if page.image.path %}
+    {% capture bg %}
+      {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+    {% endcapture %}
+
+    <div class="mt-3 mb-3">
+      <img src="{{ page.image.path }}" class="preview-img {{ bg | strip }}"
+        alt="{{ page.image.alt | default: "Preview Image" }}"
+
+      {% if page.image.width %}
+        width="{{ page.image.width }}"
+      {% elsif page.image.w %}
+        width="{{ page.image.w }}"
+      {% endif %}
+
+      {% if page.image.height %}
+        height="{{ page.image.height }}"
+      {% elsif page.image.h %}
+        height="{{ page.image.h }}"
+      {% endif %}>
+
+      {% if page.image.alt %}
+        <figcaption class="pt-2 pb-2">{{ page.image.alt }}</figcaption>
+      {% endif %}
+
+    </div>
+  {% endif %}
 
   <div class="d-flex justify-content-between">
     <!-- author -->
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 7fd4604..0b73d55 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -441,7 +441,7 @@ img[data-src] {
       margin-right: 2px;
     }
 
-    &:hover {
+    &:not([class]):hover {
       @extend %link-hover;
     }
   }
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index cb0d5f4..a409944 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -41,8 +41,7 @@ h1 + .post-meta {
 }
 
 img.preview-img {
-  margin-top: 3.75rem;
-  margin-bottom: 0;
+  margin: 0;
   border-radius: 6px;
 
   &.bg[data-loaded=true] {