How to link to an image in the content directory from a layout template?

Hello, I’m trying to do something that I thought would be really simple and basic, yet I cannot find a way around it.

I have the following directory structure:

├── books
│   ├── book1
│   │   ├── audio.webm
│   │   ├── cover.jpeg
│   │   └── book.pdf
│   ├──
│   └──

I prefer not to use page bundles because it would rename my markdown file to which I would prefer to avoid, and in any case it does not seem to help. Also, I don’t want to scatter my assets to various directories and I want to keep them grouped together.

In, I can link to resources without any problem by adding links to /books/book1/book.pdf and it works well. it generates a relative link to the file and this is all nice. But I would also like to specify the cover image to use in the front matter:

title: Book 1
cover: ./book1/cover.jpeg

[PDF File](/books/book1/book.pdf)

In the templates, I would like to access the cover image but I do not know how to generate a relative link to it.

In layouts/books/list.html I can put:

      <img src="{{ .Params.cover }}" style="float: right; width: 20rem;" alt="" />

And it happens to work just because the relative link comes from the same place. But in the single layout layouts/books/single.html it does not work. The relative link needs to have ../ added at the beginning…

How can I reference this file in the layouts?

Thank you.

Consolidating the assets in a page bundle is the idiomatic way to organize your content-related assets. The assets will then be available as page resources.

It does help, if you access the page resource with .Resources.Get.


└── books/
    ├── book1/
    │   ├── assets/
    │   │   ├── audio.webm
    │   │   ├── book.pdf
    │   │   └── cover.jpeg
    │   └──

front matter

title: Book 1
cover: assets/cover.jpeg  <-- relative to the page


{{ with .Resources.Get .Params.cover }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}