Hugo: Dynamic Image Rendering with URL Replacement

16 October 2023 · 25 January 2024
1 minutes

If you want to use Hugo to dynamically render images with URL replacement and lazy loading, here is the code.

{{ $card__show_image := .Params.show_image }}
{{ $cardImageURL := "" }}
{{ if and (eq $card__show_image "true") (.Params.images) }}
  {{ with .Params.images }}
    {{ range $image := . | first 1 }}
      {{ $cardImageURL = replaceRE "(=w|s)(2400|1600)" "$1360" $image }}
    {{ end }}
  {{ end }}
  <img src="{{ $cardImageURL | absURL }}" alt="{{ .LinkTitle }}" decoding="async" loading="lazy">
{{ end }}

I’m using this code on my blog to render images with lazy loading and responsive image sizes on different part of my blog, like cards, cover images etc.

X Facebook LinkedIn WhatsApp Email Copy Link