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

This commit is contained in:
Bogdan Stoica 2021-01-29 19:10:39 +02:00 committed by Cotes Chung
parent 7a87ab4d05
commit eacad65cbb
3 changed files with 8 additions and 5 deletions

View file

@ -44,8 +44,8 @@ layout: default
<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 }}

View file

@ -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.

View file

@ -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
---
```