JakeHillion/hugo-PaperMod
1
0
Fork 0
Code Issues Pull Requests 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions
Show Stats 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 {

5
layouts/partials/cover.html
View File

@ -15,8 +15,9 @@
{{- if (ge $cover.Width $size) -}} {{- if (ge $cover.Width $size) -}}
{{ 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 }}