From 821e97627d9b8fd9f6925da2a298009722bd522e Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Mon, 7 Jun 2021 15:12:17 +0200
Subject: [PATCH] Add width and height to image to prevent layout shifts

---
 themes/maik-blog/layouts/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/themes/maik-blog/layouts/index.html b/themes/maik-blog/layouts/index.html
index c9ea348..4c82496 100644
--- a/themes/maik-blog/layouts/index.html
+++ b/themes/maik-blog/layouts/index.html
@@ -2,8 +2,9 @@
 <main role="main" style="">
     <div>
         {{- if .Site.Params.Portrait.Path }}
+        {{- $img := imageConfig (printf "static/%s" .Site.Params.Portrait.Path) }}
         <img src="{{ .Site.Params.Portrait.Path }}" class="circle" alt="{{ .Site.Params.Portrait.Alt }}"
-            style="max-width:{{ .Site.Params.Portrait.Size }}" />
+            width="{{ $img.Width }}" height="{{ $img.Height }}" style="max-width:{{ .Site.Params.Portrait.Size }}" />
         {{- end }}
 
         <h1>{{ .Site.Title }}</h1>