| 1 | {{/* |
| 2 | Taken from https://www.brycewray.com/posts/2022/06/responsive-optimized-images-hugo/ |
| 3 | */}} |
| 4 | |
| 5 | {{- $respSizes := .Site.Params.imageSizes -}} |
| 6 | {{- $src := .Get "src" -}} |
| 7 | {{- $source := resources.Get $src -}} |
| 8 | {{- $alt := .Get "alt" -}} |
| 9 | {{- $divClass := "" -}} |
| 10 | {{/* |
| 11 | The styling in $imgClass, below, makes |
| 12 | an image fill the container horizontally |
| 13 | and adjust its height automatically |
| 14 | for that, and then fade in for the LQIP effect. |
| 15 | Feel free to adjust your CSS/SCSS as desired. |
| 16 | */}} |
| 17 | {{- $imgClass := "w-full h-auto animate-fade" -}} |
| 18 | {{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}} |
| 19 | {{/* |
| 20 | Now we'll create the 20-pixel-wide LQIP |
| 21 | and turn it into Base64-encoded data, which |
| 22 | is better for performance and caching. |
| 23 | */}} |
| 24 | {{- $LQIP_img := $source.Resize "20x jpg" -}} |
| 25 | {{- $LQIP_b64 := $LQIP_img.Content | base64Encode -}} |
| 26 | {{/* |
| 27 | $CFPstyle is for use in styling |
| 28 | the div's background, as you'll see shortly. |
| 29 | */}} |
| 30 | {{- $CFPstyle := printf "%s%s%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat;" -}} |
| 31 | {{/* |
| 32 | Then, we create a 640-pixel-wide JPG |
| 33 | of the image. This will serve as the |
| 34 | "fallback" image for that tiny percentage |
| 35 | of browsers that don't understand the |
| 36 | HTML `picture` tag. |
| 37 | */}} |
| 38 | {{- $actualImg := $source.Resize "640x jpg" -}} |
| 39 | <div class="image" style="{{ $CFPstyle | safeCSS }}"> |
| 40 | {{/* |
| 41 | Now we'll build the `picture` which modern |
| 42 | browsers use to decide which image, and |
| 43 | which format thereof, to show. Remember to |
| 44 | put `webp` first, since the browser will use |
| 45 | the first format it **can** use, and WebP files |
| 46 | usually are smaller. After WebP, the fallback |
| 47 | is the universally safe JPG format. |
| 48 | */}} |
| 49 | <picture> |
| 50 | <source |
| 51 | type="image/webp" |
| 52 | srcset=" |
| 53 | {{- with $respSizes -}} |
| 54 | {{- range $i, $e := $respSizes -}} |
| 55 | {{- if ge $source.Width . -}} |
| 56 | {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" $e " webp") ).RelPermalink }} {{ . }}w |
| 57 | {{- end -}} |
| 58 | {{- end -}} |
| 59 | {{- end -}}" |
| 60 | sizes="{{ $dataSzes }}" |
| 61 | /> |
| 62 | <source |
| 63 | type="image/jpeg" |
| 64 | srcset=" |
| 65 | {{- with $respSizes -}} |
| 66 | {{- range $i, $e := . -}} |
| 67 | {{- if ge $source.Width . -}} |
| 68 | {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" . " jpg") ).RelPermalink }} {{ . }}w |
| 69 | {{- end -}} |
| 70 | {{- end -}} |
| 71 | {{- end -}}" |
| 72 | sizes="{{ $dataSzes }}" |
| 73 | /> |
| 74 | <img class="{{ $imgClass }}" |
| 75 | src="{{ $actualImg.RelPermalink }}" |
| 76 | width="{{ $source.Width }}" |
| 77 | height="{{ $source.Height }}" |
| 78 | alt="{{ $alt }}" |
| 79 | loading="lazy" |
| 80 | /> |
| 81 | </picture> |
| 82 | </div> |