Netlify issues compiling my site (loop in shortcodes)

support
1

For some days now my site is not compiling on Netlify. Running hugo and hugo server locally does not throw any errors and is building the site as expected.

Running hugo on Netlify works normal until Hugo is running. It then times out with the following error:

10:56:27 PM: Executing user command: hugo --gc --minify
10:56:27 PM: Building sites …
10:57:05 PM: Canceling deploy
10:57:11 PM: Total in 43741 ms
10:57:11 PM: Error: Error building site: "/opt/build/repo/content/post/2019/06/shut-up/index.md:1:1": timed out initializing value. This is most likely a circular loop in a shortcode
10:57:11 PM: Execution cancelled

The error hides in the scrolling part of the log above.

The .md file uses one single shortcode that is used in nearly all posts for article images:

{{< img src="gelaber" >}}V&ouml;gel sind diskussionsfreudiger als ihr (<a href="https://unsplash.com/photos/4AmyOdXZAQc">Photo von Wynand van Poortvliet</a>){{< /img >}}

There is a gelaber.jpg in the same folder as the .md file and no frontmatter markup.

My img shortcode looks like this (I left the comments in just in case they cause the issue:

{{/* 
	see 
	https://laurakalbag.com/processing-responsive-images-with-hugo/ 
	https://discourse.gohugo.io/t/easy-way-to-serve-responsive-images-with-hugo/16184
	https://www.adamwills.io/blog/responsive-images-hugo/
	https://gohugo.io/content-management/image-processing/
*/}}

{{/* 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 */}}

{{ $smallw := default "510x" }}
{{ $mediumw := default "690x" }}
{{ $largew := default "730x" }}

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

{{ .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 */}}

{{ $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) 690px, 100vw unless overridden in shortcode */}}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
	{{ with .Get "link"}}<a href="{{.}}">{{ end }}
	<img 
	  {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}sizes="(min-width: 35em) 720px, 100vw"{{ end }}
	  srcset='
	  {{ if ge $src.Width "510" }}
	    {{ with $small.RelPermalink }}, {{.}} 510w{{ end }}
	  {{ end }}
	  {{ if ge $src.Width "690" }}
	    {{ with $medium.RelPermalink }}, {{.}} 690w{{ end }}
	  {{ end }}
	  {{ if ge $src.Width "720" }}
	    {{ with $large.RelPermalink }}, {{.}} 720w {{ end }}
	  {{ end }}'
	  {{ if .Get $medium }}
	    src="{{ $medium.RelPermalink }}" 
	  {{ else }}
	    src="{{ $src.RelPermalink }}" 
	  {{ end }}
	  {{ with .Get "alt" }}alt='{{.}}'{{ end }}>
	{{ if .Get "link"}}</a>{{ end }}
	{{ with .Inner }}
		<figcaption>{{ . }}</figcaption>
	{{ end }}
</figure>

Who (Hugo or Netlify) is causing the error message about a possible loop? And what is causing the issue?

It’s weird that the issue comes up only on Netlify, so my idea is that the image can’t be found there due to some different file system types or used lookup methods?

The repo can be found on Github https://github.com/davidsneighbour/samui-samui.de

2

This is a quite common issue with a long bug report on Github.

Somewhere in Hugo is a relatively low timeout when dealing with things that just need more time :wink: In my case, the (probable) culprit were original images that were extremely large. I resized all original images to 2000 pixel maximum size AND added a higher timeout to my config.toml

# workaround for time out error on netlify
# "Error building site: $FILENAME: timed out initializing value. This is most likely a circular loop in a shortcode"
timeout = "30000"

This does the trick. I did not test if Netlify is working with my smaller original images only (without setting the timeout higher). I am lazy.

Last but not least, here my little bash line to resize images quickly (Linux, ImageMagick needs to be installed):

mogrify -resize 2000x -quality 75 content/post/2019/0*/*/*.jpg

this is resizing (stars are catchall placeholders and my content is sorted into year/month/title/ folders and quality 75 is more or less lossless in my shortsighted vision.

1 Like
3

Increasing the timeout helped me too. I’m deploying via Netlify and the builds started to fail after I added extensive image processing to shortcodes. I had to increase mine to 50000 but it works now.