Shortcode works locally but not on Netlify

support
,
1

Hi all,

I’m wondering if anyone can shed some light as to why my build is failing on Netlify but not locally?
I have an example repo (which incidentally works on Netlify :face_holding_back_tears:) here.

What I’m trying to do is create a shortcode that does some simple image processing (resizing) for markdown images. Shortcode is as follows:

<!-- Get src param from shortcode -->
{{ $src := $.Get "src"}}

<!-- Get alt param from shortcode -->
{{ $alt := $.Get "alt"}}

<!-- Get image -->
{{$img := resources.Get $src}}

<!-- Resize image as a test it's working -->
{{- $orig := $img.Resize "1200x"}}
{{- $small := $img.Resize "500x webp"}}
{{- $medium := $img.Resize "780x"}}
{{- $large := $img.Resize "1000x webp" }}
{{- $xlarge := $img.Resize "1200x webp" }}

<picture>  
    <source 
      type="image/webp"
      srcset="
      {{ $small.RelPermalink }} 500w,
      {{ $medium.RelPermalink }} 780w,
      {{ $large.RelPermalink }} 1000w,
      {{ $xlarge.RelPermalink }} 1200w" 
      sizes="50vw">
    <img 
      srcset="{{ $small.RelPermalink }} 500w,
      {{ $medium.RelPermalink }} 780w,
      {{ $large.RelPermalink }} 1000w,
      {{ $xlarge.RelPermalink }} 1200w" 
      src="{{ $orig.RelPermalink }}" 
      alt="{{ $alt }}">
  </picture>

And example use with the image in the assets/img folder:

{{< image src="img/blog.jpg" >}}

Now this works fine locally, and resizes images wonderfully, but when I deploy to Netlify I get the following error:
shortcodes/image.html:11:17: executing "shortcodes/image.html" at <$img.Resize>: nil pointer evaluating resource.Resource.Resize

I initially thought this was an error due to Hugo version difference between local and Netlify, however I’ve tried different versions of Hugo on Netlify (including what I run locally) but with no luck.
Any other suggestions of reasons why this build is failing? I have cross posted on the Netlify forums.

2

The error points out that there is no such image resource.

It’s recommend to check if the image exist before processing it.

{{$img := resources.Get $src}}
{{ with $img }}
  {{/* process images */}}
{{ else }}
  {{ errorf "image not found: %s" $src }}
{{ end }}

The error was probably caused by those two lines, since I didn’t see those images present in assets folder.

1 Like
3

Make sure that you define a Hugo version in your netlify.toml or the version that is used is something along the lines of 0.54. It might not know the features you want to use.

[context.production.environment]
HUGO_VERSION = "0.125.4"
1 Like
4

Thanks. I tried several different Hugo versions on Netlify (and my local machines) with no luck.

5

Thanks for this. I will add that defensive code in to avoid this in future.

Turns out there was one particular image causing a problem because git on Windows didn’t care about a change in case when I renamed the file, but Netlify, like all good Linux systems, thought that was a deal-breaker.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.