Moving from Wordpress to Hugo: some concerns

support
8

Hey nipa, I’m Henk - the creator of the Hyas Hugo starter.

Hyas comes with an image shortcode with lazysizes and blur up plugin. This is how it works :point_down:

Install lazysizes as an npm plugin:

npm install lazysizes --save

The shortcode lets Hugo do the hard work (on build):

{{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) -}}
{{ $lqip := $image.Resize $.Site.Params.lqipWidth -}}

{{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}}

{{ $widths := $.Site.Params.landscapePhotoWidths -}}
{{ if gt $image.Height $image.Width -}}
  {{ $widths = $.Site.Params.portraitPhotoWidths -}}
{{ end -}}

{{ range $widths -}}
  {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
  {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
  {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
{{ end -}}
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}

<figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
  <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
  <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}></noscript>
  {{ with .Get "caption" }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end }}
</figure>

And takes a number of params:

quality = 85
bgColor = "#fff"
landscapePhotoWidths = [900, 700, 500]
portraitPhotoWidths = [1500, 1000, 750]
lqipWidth = "20x"

Add some styling for responsiveness+

Use the image shortcode in your content:

{{< img src="image-in-page-bundle.jpg" alt="Text description image" caption="Caption, optional" class="wide" >}}

Hope this helps get you started!

2 Likes