How to Use "Includes" for Rendering Images at Different Directory Levels?

[HarunCelikOtto]

Description

Hello,

I am writing for a larger project and I want to keep my writing as modular as possible, so the Includes feature is super handy! As stated on the Quarto docs page, relative references are resolved based on the main file, so if the files are not at the same directory level, rendering images becomes an issue.

If I don't want all of the files to be at the same directory level, what is the recommended way to use {{ < includes > }} by still being able to render images in included files.

Hopefully the following illustrates what I'm asking. Assuming that my project directory looks something like this;

Book Project Structure

├── _quarto.yml
├── book-chapters
│   ├── chapter-one
│   │   ├── ch1-sect-1.qmd
│   │   └── ch1-sect-2.qmd
│   └── chapter-two
│       ├── ch2-sect-1.qmd
│       └── ch2-sect-2.qmd
├── conclusion
│   └── conclude.qmd
├── images
│   ├── chapter-one-imgs
│   │   └── methods.png
│   ├── common-imgs
│   │   └── cover.png
│   └── intro-imgs
│       └── author.png
├── intro-dir
│   ├── index.qmd
│   └── intro.qmd
├── references.bib
└── references.qmd

Each qmd file in the book-chapters directory has the following relative reference to the ../../images/.. directory for adding images. If I wanted the conclusion/conclude.qmd file to {{<include>}} any of those qmd files, the images would not render due to incorrect relative referencing.

Example Contents of conclude.qmd

---
title: Conclusion
---

Here I intend to have sections of previous writing copied using the `{{< includes >>}}` option.

# Main Idea from Chapter One
{{< include ../chapter-one/ch1-sect-1 >}}

# Main Idea from Chapter Two
{{< include ../chapter-two/ch2-sect-1 >}}

Aside from restructuring the whole project, are there any ways to accurately locate images for {{<includes>}} without using absolute paths? Possibly an argument for _quarto.yml which references the images folder like an environmental variable?

[mcanouil]

"Absolute paths" in Quarto are absolute to the root of the project.
So use absolute paths, then all your includes will work properly no matter where they are.

[HarunCelikOtto]

So in this case, simply using 'images/..' in the chapter 'qmd' files should work?

[mcanouil]

No you need to start with / or it's going to be relative to the file calling the image.

[HarunCelikOtto]

Thank you, this is a lot simpler than I thought it would be 😄