Git/hugo-theme-wondermod
1
0
Fork 0
mirror of https://github.com/Wonderfall/hugo-WonderMod.git synced 2025-10-31 03:45:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add width and height attributes to cover images (#519)

Browse Source 
- Ensures that the browser can allocate the correct amount of space in the document while the image is loading.
- Reduces CLS #499
This commit is contained in:
Ian Grünig
2021-08-22 08:15:28 +02:00
committed by GitHub
parent 1214963760
commit dcbe6277bb
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
layouts/partials/cover.html
View File

@@ -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 }}