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:
austinseraphin 2017-08-04 12:06:20 -04:00 committed by Michael Rose
parent 47a05f3f00
commit cb8cb6f41e
2 changed files with 12 additions and 0 deletions

View file

@ -44,9 +44,13 @@
<p><a href="{{ cta_path }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p> <p><a href="{{ cta_path }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
{% endif %} {% endif %}
</div> </div>
{% else %}
{% if page.header.image_description %}
<img src="{{ img_path }}" alt="{{ page.header.image_description }}" class="page__hero-image">
{% else %} {% 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>
{% endif %} {% endif %}

View file

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