Hugo: Dynamic Image Rendering with URL Replacement
16 October 2023
·
25 January 2024
1 minutes
16 October 2023 · 1 minutes
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.