Using Page Resources from non-index

support
1

I have a page bundle that has image resources per Page bundles | Hugo

When define and use an image from the _index.md it works fine.

---
title: Index Page (works)
weight: 999
resources:
  - name: add_gant
    src: "image.png"
---

       {{< img name="image" alt="Alt text" size="tiny" >}}

In the same directory I also have named pages (say page1.md) and I dont understand why those cant also use the images in the directory.

directory
-- _index.md
-- page1.md
-- image.png

---
title: Page1 (does not work)
weight: 999
resources:
  - name: add_gant
    src: "image.png"
---

       {{< img name="image" alt="Alt text" size="tiny" >}}
2

While I still the above should work, the workaround (or fix) is to just make non-index pages their own index in a subfolder with a duplicate image.

(if using a lot you should move to “global assets” folder)

directory
-- _index.md
-- image.png
-- Another_directory
  |-- index.md
  |-- duplicate_image.png
3

It should not. A branch bundle’s resources are not available to a page within the bundle.

content/
└── posts/
    ├── post-1/
    │   ├── b.jpg
    │   └── index.md  <-- leaf bundle
    ├── post-2/
    │   ├── c.jpg
    │   └── index.md  <-- leaf bundle
    ├── _index.md     <-- branch bundle
    └── a.jpg  <-- available to the branch bundle, not to other pages within the branch

If you use the same image in multiple places, and you reference the images using Markdown (not HTML as you show above), consider placing them in the assets directory. Then you can enable Hugo’s embedded link and image render hooks to properly resolve the image destinations.

This might be useful:
https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2

If you really, really want to make a branch bundle’s resources available to pages within the bundle, you can override Hugo’s embedded link and image render hooks as follows:

layouts/_default/_markup/render-image.html 
{{- $u := urls.Parse .Destination -}}
{{- $src := $u.String -}}
{{- if not $u.IsAbs -}}
  {{- $path := strings.TrimPrefix "./" $u.Path -}}
  {{- with or (.PageInner.Resources.Get $path) (.Page.Parent.Resources.Get $path) (resources.Get $path) -}}
    {{- $src = .RelPermalink -}}
    {{- with $u.RawQuery -}}
      {{- $src = printf "%s?%s" $src . -}}
    {{- end -}}
    {{- with $u.Fragment -}}
      {{- $src = printf "%s#%s" $src . -}}
    {{- end -}}
  {{- end -}}
{{- end -}}
<img src="{{ $src }}" alt="{{ .Text }}"
  {{- with .Title }} title="{{ . }}" {{- end -}}
  {{- range $k, $v := .Attributes -}}
    {{- if $v -}}
      {{- printf " %s=%q" $k ($v | transform.HTMLEscape) | safeHTMLAttr -}}
    {{- end -}}
  {{- end -}}
>
{{- /**/ -}}

Compare the above to the original image render hook.

layouts/_default/_markup/render-link.html 
{{- $u := urls.Parse .Destination -}}
{{- $href := $u.String -}}
{{- if strings.HasPrefix $u.String "#" -}}
  {{- $href = printf "%s#%s" .PageInner.RelPermalink $u.Fragment -}}
{{- else if and $href (not $u.IsAbs) -}}
  {{- $path := strings.TrimPrefix "./" $u.Path -}}
  {{- with or
    ($.PageInner.GetPage $path)
    ($.PageInner.Resources.Get $path)
    ($.Page.Parent.Resources.Get $path)
    (resources.Get $path)
  -}}
    {{- $href = .RelPermalink -}}
    {{- with $u.RawQuery -}}
      {{- $href = printf "%s?%s" $href . -}}
    {{- end -}}
    {{- with $u.Fragment -}}
      {{- $href = printf "%s#%s" $href . -}}
    {{- end -}}
  {{- end -}}
{{- end -}}
<a href="{{ $href }}" {{- with .Title }} title="{{ . }}" {{- end }}>{{ .Text }}</a>
{{- /**/ -}}

Compare the above to the original link render hook.