feat: support showing description of preview image

Also moved the image position to the metadata area

Author: cotes2020

_layouts/post.html

@@ -11,31 +11,9 @@
 
 {% 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 @@ <h1 data-toc-skip>{{ page.title }}</h1>
       {% 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 -->

_sass/addon/commons.scss

@@ -441,7 +441,7 @@ img[data-src] {
       margin-right: 2px;
     }
 
-    &:hover {
+    &:not([class]):hover {
       @extend %link-hover;
     }
   }

_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] {