Hugo: Dynamic Image Rendering with URL Replacement

Hugo: Dynamic Image Rendering with URL Replacement
Hugo / Go / HTML

Hugo: Dynamic Image Rendering with URL Replacement

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="{{ .

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.

comments powered by Disqus