Page bundles - image not found from single.html

support
1

I have a page bundle under content/post/post-name with an image under content/post/post-name/images/the-image.png.

My single.html calls a partial to help optimize the images and create a srcset. However, when the partial executes, the page.Resources.Get can’t seem to find the image from the page bundle.

From single.html:

      {{ with .Params.image }}
        <div class="flex justify-center">
          {{ partial "utilities/image.html" (dict "src" . "class" "w-xl px-6 xl:px-12") }}
        </div>
      {{ end }}

The .Params.image does contain the string I expect. It works if I have the image under assets/images but not in the page bundle.

Front matter from the page (content/post/post-name/index.md):

---
title: "A test post with an image header"
image: "images/the-image.png"
---

I thought I’d ask here before creating a bug, in case I am doing something incorrectly.

Thanks for your help!

2

I would say you ran in that warning for global page function when adding that to single.html of the theme.

The image.html partial doesn’t get a page context and the page function does not always return what you expect.

You may solve that by passing the page in context (or page containing the image) as additional argument to the partial patial "utilities/image.html (dict "src" .src page PAGE_IN_CONTEXT ...)

PAGE_IN_CONTEXT might be $, . or some other which depends on the implementation of the calling partial/layout…

You could start with $ and see which errors vanish (some do)…

In case you cannot find all you will have to share your repo - or at least a reproductible example

3

Oof. That makes sense, and also kinda sucks. The image.html partial is from the theme, and used all over in the theme libraries. Probably I’ll have to create a new partial with a parameter for the page context, while trying to suppress horrific memories of passing struct pointers around in C.

1 Like
4

Forget about what I posted before… this line is not working:

{{ with page.Resources.Get .src }}{{ $resource = . }}{{ end }}

You could try $.Page.Resources.Get .src but that might not work either. I would add this:

{{ $page := page }}
{{ if .page }}{{ $page = .page }}{{ end }}
{{ with $page.Resources.Get .src }}{{ $resource = . }}{{ end }}

This makes the “page” and optional parameter in the dict. The partial call, including the optional parameter, looks like this:

    {{ with .Params.image }}
        <div class="flex justify-center">
          {{ partial "utilities/image.html" (dict "page" $.Page "src" . "class" "w-xl px-6 xl:px-12") }}
        </div>
    {{ end }}

In my experience ‘$.Page’ is more reliable then ‘page’ anyway (due to caching).

1 Like
5

Unfortunately adding this now causes the following error:

ERROR render of "redefinedbehavior/content/post/markdown-syntax.md" failed: ".../Library/Caches/hugo_cache/modules/filecache/modules/pkg/mod/github.com/writeonlycode/hugo-up-business@v0.0.0-20250624225817-0489c5f8d5ff/layouts/baseof.html:100:9": execute of template failed: template: single.html:100:9: executing "single.html" at <partial "shared/header" .>: error calling partial: "redefinedbehavior/layouts/_partials/shared/header.html:5:9": execute of template failed: template: _partials/shared/header.html:5:9: executing "_partials/shared/header.html" at <partial "utilities/image.html" (dict "src" "images/logo-redefined-behavior.png" "class" "size-6 xl:size-8")>: error calling partial: "redefinedbehavior/layouts/_partials/utilities/image.html:13:15": execute of template failed: template: _partials/utilities/image.html:13:15: executing "_partials/utilities/image.html" at <$page.resources.Get>: can't evaluate field resources in type *hugolib.pageState
6

capitalize Resources its a Method.

or if this line should target a global resource in assets. omit the $page.

7

Yeah, tried that a few different ways, but nothing seemed to work. I’m just moving my image out of the page bundle into the assets area.

Thanks all.

8

I still use the static directory to store my images. with a subdir for clarity. e.g. site/static/images and reference in the page as images: [/images/bl-jefferson.png] for metadata. Or , as part of the page or template like this: {{< figure src=“/images/cowboy_joke.jpg” width=“75%” title=“Makes you laugh” link=“/images/cowboy_joke.jpg”>}} I don’t know if this is going away as the code is changed. It does work on the latest release .148

9

I wanted to use page bundles to organize images that are related to the page without having to have a shadow directory in the …/assets or …/static structure. I preferred …/assets over …/static so that the partial I use can generate responsive srcset assets.