feat: support alt-text for featured images

An optional `alt_text` parameter can be added when specifying a featured `image` in a page's front matter.

Alt text is used to describe the image when the page is read via a screen reader.

This commit also changes profile photo alt text from "avatar" to the person's name in alignment with major CMS and social sites.

Close #1592
This commit is contained in:
George Cushen committed 2020-03-14 01:05:25 +00:00
1 parent b5963ac66c
commit ebfb1d9fff
3 files changed
+5 -5

No files matched your search

+2 -2
View File
@@ -13,10 +13,10 @@
{{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
<div class="media author-card content-widget-hr">
{{ if and site.Params.avatar.gravatar .Params.email }}
<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 .Params.email }}?s=200')" alt="Avatar">
<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 .Params.email }}?s=200')" alt="{{.Params.name}}">
{{ else if $avatar }}
{{ $avatar_image := $avatar.Fill "270x270 Center" }}
<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="{{.Params.name}}">
{{ end }}
<div class="media-body">
+1 -1
View File
@@ -66,7 +66,7 @@
{{/* Featured image */}}
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
<div style="position: relative">
<img src="{{ $image.RelPermalink }}" alt="" class="featured-image">
<img src="{{ $image.RelPermalink }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
{{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
</div>
</div>
+2 -2
View File
@@ -23,10 +23,10 @@
<div id="profile">
{{ if site.Params.avatar.gravatar }}
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=270')" alt="Avatar">
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=270')" alt="{{$person.name}}">
{{ else if $avatar }}
{{ $avatar_image := $avatar.Fill "270x270 Center" }}
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="{{$person.name}}">
{{ end }}
<div class="portrait-title">