From dcbe6277bbbf6780c4697b5180d2ace51ba4196d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ian=20Gr=C3=BCnig?= <ian.gruenig@gmail.com>
Date: Sun, 22 Aug 2021 08:15:28 +0200
Subject: [PATCH] Add width and height attributes to cover images (#519)

- Ensures that the browser can allocate the correct amount of space in the document while the image is loading.
- Reduces CLS #499
---
 assets/css/common/post-entry.css | 1 +
 layouts/partials/cover.html      | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/css/common/post-entry.css b/assets/css/common/post-entry.css
index ac2afcc9..2789f410 100644
--- a/assets/css/common/post-entry.css
+++ b/assets/css/common/post-entry.css
@@ -98,6 +98,7 @@
     border-radius: var(--radius);
     pointer-events: none;
     width: 100%;
+    height: auto;
 }
 
 .entry-cover a {
diff --git a/layouts/partials/cover.html b/layouts/partials/cover.html
index 3b61a055..e7e2df4f 100644
--- a/layouts/partials/cover.html
+++ b/layouts/partials/cover.html
@@ -15,8 +15,9 @@
                         {{- if (ge $cover.Width $size) -}}
                         {{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
                         {{ end }}
-                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}"
-            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" />
+                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}" 
+            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" 
+            width="{{ $cover.Width }}" height="{{ $cover.Height }}">
         {{- else }}{{/* Unprocessable image or responsive images disabled */}}
         <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}">
         {{- end }}