Skip to content

Commit

Permalink
Header alt tags (mmistakes#1138)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
austinseraphin authored and mmistakes committed Aug 4, 2017
1 parent cc29234 commit 1dcb44f
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 0 deletions.
4 changes: 4 additions & 0 deletions _includes/page__hero.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@ <h1 class="page__title" itemprop="headline">
{% 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>
Expand Down
8 changes: 8 additions & 0 deletions docs/_docs/10-layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 1dcb44f

Please sign in to comment.