Add alt attribute to the post's preview image (#271)
This commit is contained in:
parent
7a87ab4d05
commit
eacad65cbb
3 changed files with 8 additions and 5 deletions
|
@ -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 }}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
---
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in a new issue