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 %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% 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">
|
<img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">
|
||||||
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if page.header.caption %}
|
{% if page.header.caption %}
|
||||||
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
|
<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
|
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:
|
To include a caption or attribution for the image:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
|
|
Loading…
Reference in a new issue