layouts/shortcodes/gallery-img.html

   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>