Jelajahi Sumber

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

Prevent layout shift (Lighthouse)
James Tatum 3 tahun lalu
induk
melakukan
0c287152ef
1 mengubah file dengan 2 tambahan dan 2 penghapusan
  1. 2 2
      wowchemy/layouts/partials/page_header.html

+ 2 - 2
wowchemy/layouts/partials/page_header.html

@@ -28,7 +28,7 @@
     {{- end -}}
     {{- end -}}
   {{- end -}}
   {{- end -}}
   {{ if $img }}
   {{ 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 }}
   {{ else }}
     <img src="{{ .Params.header.image }}" class="article-banner" alt="{{$alt}}">
     <img src="{{ .Params.header.image }}" class="article-banner" alt="{{$alt}}">
   {{ end }}
   {{ end }}
@@ -75,7 +75,7 @@
 {{/* Featured image */}}
 {{/* 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 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">
   <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 }}
     {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
   </div>
   </div>
 </div>
 </div>