Image processing with Forestry.io /content/uploads/ folder

[percula]

Hi, I’m trying to add image processing to my Hugo (v0.96) site. I’m using Forestry as a CMS and they have these suggestions to enable Hugo image processing, but no matter what I try I can’t get it to work. I’ve tried all the suggestions from other questions on this forum and had no luck.

Sample project here: GitHub - percula/blog_sample

See /themes/PaperMod/layouts/partials/cover.html. Here’s a relevant sample from that file:

{{- with .Params.cover.image }}
        {{ printf "%s" . }}
        {{ printf (strings.TrimPrefix "/uploads/" . ) }}
        {{- $cover := ($.Site.GetPage "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
        {{ printf "%#v" $cover }}

I’ve added a few print statements to the project. It appears that it is unable to find the “uploads” page, since if I do {{ printf "%#v" ($.Site.GetPage "uploads").Resources }} it prints <nil>. The forestry docs suggest doing ($.Site.GetPage "section" "uploads") but that didn’t make a difference.

I’ve got a file /content/uploads/index.md with:

---
headless: true
---

So I’m at a loss. Any help is very, very, much appreciated

[jmooring]

You have a context problem in themes/PaperMod/layouts/partials/cover.html.

$.Site in this context is not a thing.

Either rework your partial calls in:

• themes/PaperMod/layouts/_default/list.html
• themes/PaperMod/layouts/_default/single.html

Or access with:

$.cxt.Site...

Or use the site function. For example:

site.Title

Instead of modifying files in the theme directory, override them in the project’s layout directory. That way you can update the theme without losing your modifications.

Finally, the common abbreviation for “context” is ctx instead of cxt.

[percula]

Thanks so much for the help! You fixed my image processing problem and more . I have a lot to learn about Hugo, coming from the Android/Flutter development side of things, but I’m very impressed so far.

[jmooring]

You’re welcome. I’m glad we were able to help.

And thank you for providing access to a sample project. Doing so makes problem identification and resolution much easier.

[percula]

I have one follow-up question. I export json that my app can consume and display natively. It works great but is it possible to use image processing within the json output? See layouts/_default/item.json.json:

{{ $cover := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" .Params.cover.image ) }}
{{ printf "%#v" $cover }}
{
  "title": "{{ .Title }}",
  "author": "{{ .Params.author }}",
  "image": {
    "url" : "{{ $cover.Resize "360x" }}",
    "caption" : "{{ .Params.cover.caption }}",
    "alt" : "{{ .Params.cover.alt }}"
  },
  "date" : "{{ .Params.date }}",
  "permalink" : "{{ .Permalink }}",
  "content" : {{ .Plain | jsonify }}
}

When I run hugo I get an error <$cover.Resize>: nil pointer evaluating resource.Resource.Resize at line 7.

I added a print statement to see if the cover resource was nil, but it doesn’t appear to be. The print statement spits out &resources.resourceAdapter{commonResource:resources.commonResource{}, resourceTransformations:(*resources.resourceTransformations)(0x14000846b40), resourceAdapterInner:(*resources.resourceAdapterInner)(0x14000857940)}

Again, thank you so much for your help . I’ve updated the sample repo with this change.

[jmooring]

layouts/_default/item.json.json is a Content View Template, called by the .Render method from both of the following:

• layouts/_default/single.json.json
• layouts/_default/list.json.json

And in your site config…

outputs:
  home:
    - HTML
    - JSON
  page:
    - HTML
    - JSON
  section:
    - HTML
    - JSON

That means you are generating JSON pages for the home page, the “posts” section page, the seach page, etc. And none of those pages have .Params.foo.

You need to wrap access to those values in a with statement. For example:

{{ with .Params.foo }}
  ...
{{ end }}