fix: add width and height to header/featured image (#2463)

Prevent layout shift (Lighthouse)
This commit is contained in:
James Tatum authored and GitHub committed 2021-09-12 23:58:40 +01:00
1 parent 509c887370
commit 0c287152ef
1 file changed
+2 -2
+2 -2
View File
@@ -28,7 +28,7 @@
{{- end -}}
{{- end -}}
{{ if $img }}
<img src="{{$img.RelPermalink}}" class="article-banner" alt="{{$alt}}">
<img src="{{$img.RelPermalink}}" width="{{$img.Width}}" height="{{$img.Height}}" class="article-banner" alt="{{$alt}}">
{{ else }}
<img src="{{ .Params.header.image }}" class="article-banner" alt="{{$alt}}">
{{ end }}
@@ -75,7 +75,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="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" 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>