Image folder outside of project dir works for render but not preview?

[cod3licious]

Description

I would like to have a folder structure like this:

manuscript/
    _quarto.yml
    index.qmd
output_dir/
    index.html
images/
    img.png

In _quarto.yml I have set

project:
  type: book
  output-dir: ../output_dir

and in index.qmd my image paths are defined as ![Image](../images/img.png).

When I'm in the root dir and I run quarto render manuscript (in the terminal on macOS), the html gets created in the output folder as specified and all the images are shown without a problem since the relative paths work out - yay!

However, when I instead call quarto preview manuscript, then the images are not shown and in the terminal I get the error

GET: /index.html
  /images/img.png (404: Not Found)

even though when I look at the source of the preview page, there the relative path is preserved so it should in theory work out, but I guess quarto instead transforms the relative path to an absolute path and then of course that points to nothing?

It seems kind of absurd that render works but preview doesn't - is there any way to tell preview to stop trying to be smart and just use the relative paths as they are?

[I'm using quarto version 1.6.37.]

[mcanouil]

I'm afraid to say that the bug here is not that quarto preview does not work. The bug is that quarto render does.

By design, Quarto uses the _quarto.yml as root of the project which you can access with a leading /. So, ../ means nothing.

To summarise, your project structure is incompatible with Quarto's design of a project.

Would you mind share an actual reproducible example, likely as a Git repository we can clone? (This won't change the fact mention above and the team is very unlikely to ever change that design choice)

[mcanouil]

Quarto projects supports multiple formats, why not put all your formats inside one project?

You can even use profile for advanced combinations.

[cod3licious]

Is there some documentation on how to do this? So to get even closer to the real setup of what I want: I actually have the book in two versions, English and German. Additionally, I want some conditional formatting to render the book in a short and long version (I think I know how to do this by manually changing the _quarto.yml file to set the conditional formatting option and output directory accordingly, but if there was some way to do this automatically and compile both versions at the same time, even better.)

So this is the real structure:

manuscript_en/
    _quarto.yml
    index.qmd
manuscript_de/
    _quarto.yml
    index.qmd
output_dir_en_short/
    index.html
output_dir_en_long/
    index.html
output_dir_de_short/
    index.html
output_dir_de_long/
    index.html
images/
    img.png
slides/
    slides.tex

and maybe in the future also a new quarto slides folder. All using the same images.

What would be the recommended setup to do this? Ideally without creating 4 copies of the images in each output folder.

[mcanouil]

The documentation has a search option.

https://quarto.org/docs/projects/profiles.html

Multiple formats and profiles are discussed in several other discussions including discussion for multi languages books.

[cod3licious]

Thanks, the functionality of profiles seems really useful!

However, maybe I'm misunderstanding something here, but I think it doesn't solve my problem entirely. Since the German and English versions of the book don't have any overlapping content and need to be rendered into seperate folders with their own index.html, I wanted to keep the two versions in separate subfolders, i.e.,

manuscript/
    _quarto.yml
    _quarto-en.yml
    _quarto-de.yml
    en/
        index.qmd
    de/
        index.qmd

where rendering with the en profile includes as chapters the files from the en/ subfolder and de similarly from the de/ subfolder. However, when trying to render the project with one of the profiles, this results in the error ERROR: Book contents must include a home page (e.g. index.md). According to this discussion what I'm trying to do here with the subfolders is apparently not possible.

But then how would someone, for example, have a book and slides (which would probably also not have any overlapping content) in the same project folder to access the same images? The design decision to try to have everything in one project folder makes less and less sense to me....

[cod3licious]

The documentation even mentions a possible need for global resources like images, however, it seems like this only covers the case where absolute paths need to be transformed into relative paths, not where relative paths might be the way to go.

This suggests that when making its original design decision, the quarto team assumed that the quarto document is the center of a website and all other pages of a site would references images from inside the quarto folder. This seems to clash with reality, as I would assume that normally it's the other way around - someone already has a website and one component of this is a quarto book. In these cases, assets such as the favicon should reside in some global folder outside of the book folder so that all other pages of the website also have easy access to this.

I really hope this design decision is revised in future versions of quarto to more easily integrate the created documents with existing websites.

[cod3licious]

Ok, it wasn't clear to me that quarto preview also updates the html files in the specified output directory (i.e., the same ones that quarto render creates). By manually opening this html file in the browser and then refreshing it when needed instead of looking directly at the served page from preview (with auto-refresh), I see the content incl. images as they should be. Not quite as convenient since this requires manually refreshing the page, but good enough I guess.