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

Hey @sam.rogers

Welcome to the forums!

The error message nil pointer evaluating resource.Resource.Resize indicates that the $img variable is nil at the point where the Resize function is called. This would happen when the image resource cannot be found or loaded

Because it’s working locally, and not on Netlify, I’m thinking the reason may be an Image Path Issue, or possibly Case Sensitivity. Locally, the image might be found due to differences in the filesystem or working directory, but in the Netlify build environment, the path is different, and on Netlify it the file structure is case sensitive.

1 Like
3

Thanks @Andrew.H, you were right on the money with the case sensitivity. Turns out git doesn’t care about case on Windows (in this particular situation anyway), but obviously Netlify, like all good Linux systems, does!

Many thanks for your help. I’ll add that to my list to remember to check for next time :wink:

1 Like