Wrong linking for images from a branch bundle folder about hextra HOT 10 CLOSED

@imfing Hi. Maybe I got spoiled by expirience I got working with an old Hugo an Academic theme, when I used page bundles a lot.

For me it was not obvious to place images to /content/images and link them as /images/my-pic.png.

The organize-files section is missing this.

Page bundles should be a supported use case.
It's not recommended to put images under /content/images.

Sounds like it's a bug. I will address this issue later today.

from hextra.

@denist-huma sorry i misread your original issue, after careful reading, i think the issue was the misplacement of your page file and image file

I cannot get a local image to render, on my local server. Any web images works as expected.
These two variants show a broken image placeholder in Chrome. My image is in the same folder as the doc page.

docs/content/crd/databases/altas-mogodb.md
docs/content/crd/databases/diagram-atlas-db-user-management.png

according to Hugo leaf bundles, you need to place the page file and the image under the same directory altas-mogodb

-docs/content/crd/databases/altas-mogodb.md
-docs/content/crd/databases/diagram-atlas-db-user-management.png
+docs/content/crd/databases/altas-mogodb
+docs/content/crd/databases/altas-mogodb/index.md
+docs/content/crd/databases/altas-mogodb/diagram-atlas-db-user-management.png

and referencing the image from the altas-mogodb/index.md file would work

This Hugo code is dispaing as a text from my page.

{{ $image := .Resources.GetMatch "diagram-atlas-db-user-management.png" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

you can't use hugo code directly in the page as it's treated as Markdown

alternatively, in your site, you can create static directory and put your images over there. then you can reference them directly under the /, e.g. static/diagram-atlas-db-user-management.png, which will be reference-able via /diagram-atlas-db-user-management.png. See Static Files for more details

from hextra.

@denist-huma can you confirm if the above works for your use case?

from hextra.

@denist-huma
the above is a valid branch bundle, but it doesn't imply that branch-content1.md and image1.jpg will be under the same level after rendering. In fact, how Hugo works under the hood is to render branch-content1.md into branch-content1/index.html which will be a level below.
Thus, in the built output files, image1.jpg and _index will be under the same level since they both under the branch-bundle-1.

├── branch-bundle-1
│   ├── branch-content1.md
│   ├── branch-content2.md
│   ├── image1.jpg
│   ├── image2.png
│   └── _index.md

will output

├── branch-bundle-1
│   ├── branch-content1
│   ├── ─ index.html
│   ├── branch-content2
│   ├── ─ index.html
│   ├── image1.jpg
│   ├── image2.png
│   └──index.html

In order to reference image1.jpg from branch-content1.md, you need to do:

![](../image1.jpg)
or
![](/branch-bundle-1/image1.jpg)

from hextra.

Thanks for reporting. I'll take a look

from hextra.

@imfing Hi. Maybe I got spoiled by experience I got working with an old Hugo an Academic theme, when I used page bundles a lot.
For me it was not obvious to place images to /content/images and link them as /images/my-pic.png.

The organize-files section is missing this.

from hextra.

@denist-huma can you confirm if the above works for your use case?

@imfing thank you for writing such good explanation and pinging me. 👍
I've not tried again yet, I will try and reply!

from hextra.

@imfing I seem to isolated my case, it is related to the branch-bundles usage only. The leaf bundle is OK.

Maybe I just don't understand how use branch-bundles and leaf ones and have wrong expectations about Hugo in general.
To make it work in my setup I have to put an URL to a level down. That is not expected.

The image I got in the content/crd/databases/ got placed one level down relative to the public/crd/databases/altas-mogodb/index.html, so I got to add ../ prefix to the image path. Please see the gist https://gist.github.com/denist-huma/3853f2fd34ea744351704da95e5fcc47

$ hugo server --gc --logLevel debug --disableFastRender --renderToDisk

denis@L560:~/huma/compose-operator/docs$ tree content/crd/databases/
content/crd/databases/
├── altas-mogodb.md
├── diagram-atlas-db-user-management.png
├── _index.md
├── kubedb-mongodb.md
└── postgresql.md

0 directories, 5 files
denis@L560:~/huma/compose-operator/docs$ tree public/crd/databases
public/crd/databases
├── altas-mogodb
│   └── index.html
├── diagram-atlas-db-user-management.png
├── index.html
├── index.xml
├── kubedb-mongodb
│   └── index.html
└── postgresql
    └── index.html

3 directories, 6 files

UPD

You are write, a leaf looks good:

denis@L560:~/huma/compose-operator/docs$ tree content/crd/databases/
content/crd/databases/
├── altas-mogodb
│   ├── diagram-atlas-db-user-management.png
│   └── index.md
├── _index.md
├── kubedb-mongodb.md
└── postgresql.md

1 directory, 5 files
denis@L560:~/huma/compose-operator/docs$ tree public/crd/databases
public/crd/databases
├── altas-mogodb
│   ├── diagram-atlas-db-user-management.png
│   └── index.html
├── index.html
├── index.xml
├── kubedb-mongodb
│   └── index.html
└── postgresql
    └── index.html

3 directories, 6 files

from hextra.

I am confused, the https://gohugo.io/content-management/page-bundles/#branch-bundles doc says it is valid and should work. But I doesn't says the image1.jpg, image2.png would be rendered on a level below, and branch-content1.md will be branch-content1/index.html and link pointing to image will not work.

content/
├── branch-bundle-1
│   ├── branch-content1.md
│   ├── branch-content2.md
│   ├── image1.jpg
│   ├── image2.png
│   └── _index.md
└── branch-bundle-2
    ├── _index.md
    └── a-leaf-bundle
        └── index.md

from hextra.

@imfing Thank you once more for being so patient! 👍
You helped me to get used to Hugo in general.
May the Force be with you! 💯

from hextra.