Git/hugo-theme-wondermod
1
0
Fork 0
mirror of https://github.com/Wonderfall/hugo-WonderMod.git synced 2025-10-30 19:35:26 +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

1
assets/css/common/post-entry.css
View File

@@ -98,6 +98,7 @@
border-radius: var(--radius); border-radius: var(--radius);
pointer-events: none; pointer-events: none;
width: 100%; width: 100%;
height: auto;
} }
.entry-cover a { .entry-cover a {

3
layouts/partials/cover.html
View File

@@ -16,7 +16,8 @@
{{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}} {{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
{{ end }} {{ end }}
{{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}" {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}"
sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" /> sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}"
width="{{ $cover.Width }}" height="{{ $cover.Height }}">
{{- else }}{{/* Unprocessable image or responsive images disabled */}} {{- else }}{{/* Unprocessable image or responsive images disabled */}}
<img loading="lazy" src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}"> <img loading="lazy" src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}">
{{- end }} {{- end }}