Gallery shortcode using page resources not working with Netlify

1

Hi guys!

My gallery.html shortcode works well locally, but some(?) pages using the shortcode do not render on Netlify—yet without an error message. The .Content part of these pages is missing entirely.

Have you any ideas?

Thank you very much!

{{ with $.Get "title" }}<h2>{{ . }}</h2>{{ end }}
<div class="gallery">
  {{ range $image := (.Page.Resources.ByType "image").Match (printf "%s*" (.Get "src")) }}
  {{ $image := .Fill "450x300" }}
  <figure><img src="{{ $image.RelPermalink }}" alt="{{ $image.Name }}" />{{ with .Params.caption }}<figcaption>{{ . }}</figcaption>{{ end }}</figure>
  {{ end }}
</div>
{{ with .Inner }}{{ . }}{{ end }}
2

Have you set a recent Hugo version in your Netlify setup?

1 Like
3

Thanks you, bep.

Yes, I have. This is in netlify.toml:

[build]
  command = "hugo"
  publish = "public"

[context.production.environment]
  HUGO_VERSION = "0.40.3"

[context.deploy-preview.environment]
  HUGO_VERSION = "0.40.3"

Shortcode usage is:

{{< gallery src="gallery01-" title="My gallery" />}}

or

{{< gallery src="gallery01-" title="My gallery" >}}<p>Text</p>{{< /gallery >}}

As soon as I delete the gallery/-ies the .Content part is rendered.

4

This is the problem with posting snippets: I don’t see any “.Content” in your example above, so I’m obviously missing out on something.

In general, I can say that resources/image processing ala what you do above works great on Netlify. We use it exstensively for the themes and the docs site.

5

Thank you!

The project is not public, yet. Otherwise I would have pointed to the repository.

We have tested everything for hours and finally had to (temporarily?) move away from Netlify. The local build works without any issues (and the gallery shortcode like a charm).

6

I ran into issues with image processing as well, tho I don’t know if yours are related.
The hugo binaries in my case are in the repo under bin/ from the starter template I used.
Everything worked fine after I replaced those with the newest version of Hugo and updated my npm dependencies.

7

Thanks, brasilikum.

We updated all depencencies and are now using

  "devDependencies": {
    "autoprefixer": "latest",
    …
  }

Is that what you mean?

Our single.html template file looks just like this

{{ define "main" }}
{{ .Content }}
{{ end }}

Also, we tried to remove all TOML front matter.

Moreover, we triggered the deploy using Clear build cache. No success.

8

I encourage you to look through you build script to figure out what version of Hugo is used in production. Maybe insert a hugo version; before Hugo build.

9

Thanks!

Now, the same error occured in a project that does not use NPM, Gulp or anything else—just Hugo.

Deploy log says:

Installing Hugo 0.40.3
Executing user command: hugo version ; hugo
Hugo Static Site Generator v0.40.3 linux/amd64 BuildDate: 2018-05-09T07:46:33Z
…
Build script success

Moreover, we en- and disabled post processing.

10

I ran into this exact problem today, too. Netlify would not build the .Content for a post that uses a shortcode for images – though it worked fine locally.

Tried using the verbose build command (hugo -v) on Netlify, which gave me a clue to what was going on:

WARNING: Timed out creating content for page “blog/that-darn-post/index.md” (.Content will be empty). This is most likely a circular shortcode content loop that should be fixed. If this is just a shortcode calling a slow remote service, try to set “timeout=20000” (or higher, value is in milliseconds) in config.toml

So I did just that, and now it works perfectly. I have a lot of resizing going on in my shortcode, and suspect the Netlify-build times out because the server can’t do all the image processing fast enough. (Wild guess.)

Hope it helps you too, @Grob!

1 Like
11

Excellent! Everything is working again. Thank you very much, @CarlRustung.

I did not get the warning you posted above, although we also tried the verbose flag.

Thanks again!