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

support
1

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:

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

I prefer not to use page bundles because it would rename my markdown file to index.md 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 book1.md, 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.

2

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.

structure

content/
└── books/
    ├── book1/
    │   ├── assets/
    │   │   ├── audio.webm
    │   │   ├── book.pdf
    │   │   └── cover.jpeg
    │   └── index.md
    └── _index.md

front matter

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

layouts/books/list.html

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