Add alt attribute to the post's preview image (cotes2020#271)

_layouts/post.html

@@ -44,8 +44,8 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
       <div class="post-content">
 
-        {% if page.image %}
-          <img src="{{ page.image }}" class="preview-img" alt="Preview Image">
+        {% if page.image.src %}
+          <img src="{{ page.image.src }}" class="preview-img" alt="{{ page.image.alt | default: "Preview Image" }}">
         {% endif %}
 
         {{ content }}

_posts/2019-08-08-text-and-typography.md

@@ -6,7 +6,8 @@ categories: [Blogging, Demo]
 tags: [typography]
 math: true
 mermaid: true
-image: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
+image:
+  src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
 ---
 
 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.

_posts/2019-08-08-write-a-new-post.md

@@ -84,11 +84,13 @@ Then you can use it like other markdown language: surround the graph code with `
 
 ### Preview image
 
-If you want to add an image to the top of the post contents, specify the url for the image by:
+If you want to add an image to the top of the post contents, specify the url and alt attribute for the image:
 
 ```yaml
 ---
-image: /path/to/image-file
+image:
+  src: /path/to/image/file
+  alt: image alternative text
 ---
 ```