From 0c287152ef7b06893d9dc2f4feba15fc9b5032d4 Mon Sep 17 00:00:00 2001
From: James Tatum <jtatum@gmail.com>
Date: Sun, 12 Sep 2021 15:58:40 -0700
Subject: [PATCH] fix: add width and height to header/featured image (#2463)

Prevent layout shift (Lighthouse)
---
 wowchemy/layouts/partials/page_header.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/wowchemy/layouts/partials/page_header.html b/wowchemy/layouts/partials/page_header.html
index 2652cfba..5e3dd0dd 100644
--- 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 @@
 {{/* 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>