From ebfb1d9fff5bd573bac93df9d6a7b31ddb634746 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Sat, 14 Mar 2020 01:05:18 +0000
Subject: [PATCH] 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
---
 layouts/partials/page_author_card.html | 4 ++--
 layouts/partials/page_header.html      | 2 +-
 layouts/partials/widgets/about.html    | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/page_author_card.html b/layouts/partials/page_author_card.html
index d04a17f0..29538979 100644
--- a/layouts/partials/page_author_card.html
+++ b/layouts/partials/page_author_card.html
@@ -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">
diff --git a/layouts/partials/page_header.html b/layouts/partials/page_header.html
index f0bc71c3..e0664be6 100644
--- a/layouts/partials/page_header.html
+++ b/layouts/partials/page_header.html
@@ -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>
diff --git a/layouts/partials/widgets/about.html b/layouts/partials/widgets/about.html
index b6967be9..5a8df2a6 100644
--- a/layouts/partials/widgets/about.html
+++ b/layouts/partials/widgets/about.html
@@ -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">