Responsive images processing shortcode stopped working in 0.59.0

support
1

I’ve been using the shortcode below to resize each image in page bundle.
Each image is resized into multiple sizes by Hugo, and included in the srcset list for the img .

Shortcode:

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}

{{ $tinyw := default "500x" }}
{{ $smallw := default "800x" }}
{{ $mediumw := default "1200x" }}
{{ $largew := default "1500x" }}

{{/* resize the src image to the given sizes */}}

{{ .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ .Scratch.Set "small" ($src.Resize $smallw) }}
{{ .Scratch.Set "medium" ($src.Resize $mediumw) }}
{{ .Scratch.Set "large" ($src.Resize $largew) }}

{{/* add the processed images to the scratch */}}

{{ $tiny := .Scratch.Get "tiny" }}
{{ $small := .Scratch.Get "small" }}
{{ $medium := .Scratch.Get "medium" }}
{{ $large := .Scratch.Get "large" }}

{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}

<img 
  {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}sizes="(min-width: 35em) 1200px, 100vw"{{ end }}
  srcset='
  {{ if ge $src.Width "500" }}
    {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
  {{ end }}
  {{ if ge $src.Width "800" }}
    {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1200" }}
    {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1500" }}
    {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
  {{ end }}'
  {{ if .Get $medium }}
    src="{{ $medium.RelPermalink }}" 
  {{ else }}
    src="{{ $src.RelPermalink }}" 
  {{ end }}
  {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}
  {{ with .Get "class" }}class="{{.}}"{{ else }}class=""{{ end }}
  {{ with .Get "title" }}title="{{.}}"{{ else }}title=""{{ end }}
  >

This shortcode stopped working after I updated to hugo 0.59.0 extended.
Here is the error message I am getting:

> hugo server
Building sites … Total in 575 ms
Error: Error building site: "postpath\index.md:13:1": failed to render shortcode "img": failed to process shortcode: "path\layouts\shortcodes\img.html:43:8": execute of template failed: template: shortcodes/img.html:43:8: executing "shortcodes/img.html" at <.Get>: error calling Get: reflect: call of reflect.Value.Interface on zero Value

The error points to the lower part of the shortcode, see below. This part is for browsers that do not support the srcset attribute, the src is set to one of the middle-sized images:

  {{ if .Get $medium }}
    src="{{ $medium.RelPermalink }}" 
  {{ else }}
    src="{{ $src.RelPermalink }}" 
  {{ end }}

Is this a bug in hugo 0.59.0 or should I update my shortcode to something else?

Would greatly appreciate your help.

hugo env

Hugo Static Site Generator v0.59.0/extended windows/amd64 BuildDate: unknown
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.13.1"

Shortcode sources: source 1, source 2.

P.S.
If you have a better way to do the same thing with the shortcode, please share it.

2

Hi there,

Do you have your code in a repo somewhere we can have a look at and test?

3

I would rewrite that if/else as with/else.

1 Like
4

Here is a repo you can reproduce the error with.


I have deleted all unrelated posts and image files in this example repo.

5

Tried rewriting it as with/esle with no luck. I get the exact same error. Thanks for suggestion.

6

try

{{ if .Get (print $medium) }}
1 Like
7

It fixed it. Thank you.