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

Prevent layout shift (Lighthouse)
HugoBlox · Sep 12, 2021 · 0c28715 · 0c28715
1 parent 509c887
commit 0c28715
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/wowchemy/layouts/partials/page_header.html b/wowchemy/layouts/partials/page_header.html
@@ -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 @@ <h1>{{ $title }}</h1>
 {{/* 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>