Add width and height attributes to cover images (#519)
- 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:
		
							parent
							
								
									1214963760
								
							
						
					
					
						commit
						dcbe6277bb
					
				|  | @ -98,6 +98,7 @@ | |||
|     border-radius: var(--radius); | ||||
|     pointer-events: none; | ||||
|     width: 100%; | ||||
|     height: auto; | ||||
| } | ||||
| 
 | ||||
| .entry-cover a { | ||||
|  |  | |||
|  | @ -16,7 +16,8 @@ | |||
|                         {{ 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 }}" /> | ||||
|             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 }} | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue
	
	 Ian Grünig
						Ian Grünig