Header alt tags (#1138)
* Added support for an alt tag for the header image This allows using page.header.image_description as the alt tag. It will still default to site.title if unset. * Added documentation
This commit is contained in:
parent
47a05f3f00
commit
cb8cb6f41e
2 changed files with 12 additions and 0 deletions
|
@ -45,7 +45,11 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% if page.header.image_description %}
|
||||
<img src="{{ img_path }}" alt="{{ page.header.image_description }}" class="page__hero-image">
|
||||
{% else %}
|
||||
<img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if page.header.caption %}
|
||||
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
|
||||
|
|
|
@ -273,6 +273,14 @@ header:
|
|||
image: http://some-site.com/assets/images/image.jpg
|
||||
```
|
||||
|
||||
To provide a custom alt tag for screen readers:
|
||||
|
||||
```yaml
|
||||
header:
|
||||
image: /assets/images/unsplash-image-1.jpg
|
||||
image_description: "A description of the image"
|
||||
```
|
||||
|
||||
To include a caption or attribution for the image:
|
||||
|
||||
```yaml
|
||||
|
|
Loading…
Reference in a new issue