Add width and height to image to prevent layout shifts

5 years ago · 821e97627d
parent 4c0b098e53
commit 821e97627d
1 changed files with 2 additions and 1 deletions
--- 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>