Error circular loop in a shortcode. Should I commit resources folder if I host the site using Netlify?

support
1

Should I commit resources folder if I host the site using Netlify? or is there other method to build the site without getting this error?

Error: Error building site: “myblog/content/post/first-us-trip/index.md:1:1”: timed out initializing value. This is most likely a circular loop in a shortcode

This folder resources suddenly appear and make copies of my images. So, if I add resources folder to .gitignore, I’m getting this error when deploying to Netlify.

Locally, if I increase timeout = 55555 to config.toml, Hugo can build the site.

How did I get into this error?

A few months ago I was a newbie setting up a blog and learned that direct linking images from a static folder causes my blog to load slowly. Then I found out a tips to make it slightly faster.

I added this file layouts/shortcodes/image.html so that I can have a structure like my-post-title-folder/index.md with all the images inside that folder, and render image using this shortcode {{< image src="image-filename.jpg" alt="Alt" position="center" >}}

Image.html source code

{{/* 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 q80" }}
{{ $smallw := default "800x q80" }}
{{ $mediumw := default "1200x q80" }}
{{ $largew := default "1500x q80" }}

{{/* 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 | safeURL }}" 
  {{ else }}
    src="{{ $src.RelPermalink | safeURL }}" 
  {{ end }}
  {{ with .Get "alt" }}alt="{{ . | plainify }}"{{ end }}
  {{ with .Get "style" }} style="{{ . | safeCSS }}"{{ end }}>
2

resources is a permanent cache for hugo image processing. If you remove it or delete / ignore it, hugo has to rebuild all images every time. This needs the time.

I don’t use netlify, for this anyone could help better.