mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 20:15:25 +00:00
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:
1 parent
b5963ac66c
commit
ebfb1d9fff
3 files changed
+5
-5
No files matched your search
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user