How to add body-footer containing several logos across all pages on Quarto website?

[michaelplynch]

Description

I am trying to create a Quarto website with a body footer (called footer.qmd) containing several logos as .jpg and .png files.. I am seeing two unexpected behaviours.

1. When I set body-footer as footer.qmd in_quarto.yml (as here: https://github.com/michaelplynch/test-website/blob/main/_quarto.yml) only some (it appears as every second) image in footer.qmd gets shown, as on the bottom of this page: https://michaelplynch.github.io/test-website/ .

2. For .qmd files in a sub folder (called 'People' in my MRE), footer.qmd is not rendered, instead, the title of the file 'footer.qmd' is printed in text (see here: https://michaelplynch.github.io/test-website/People/MichaelLynch.html). I can guess why this one is happening but it doesn't seem unreasonable to assume that the footer defined in _quarto.yml should apply across the website without having to copy the same file into every sub folder.

Are these bugs or am I misunderstanding how the body-footer is supposed to work? The documentation is a little light for this feature and I haven't been able to find any similar examples in the Quarto gallery to guide this.
Happy to take any feedback or insight as I dip into website design :)

Thanks,
Michael

I have created a MRE with associated GHA here: https://github.com/michaelplynch/test-website

[mcanouil]

See https://quarto.org/docs/websites/website-navigation.html#page-footer.
For example, the footer on https://quarto.org:

• https://github.com/quarto-dev/quarto-web/blob/main/_quarto.yml#L30-L52

[CharlesBordet]

I have the same 2nd issue described by @michaelplynch. The footer.qmd defined in _quarto.yml only applies to files at the root directory. For files in a sub filter, the filepath is written instead of rendering the file.

The documentation on body-footer is sparse indeed. It is not mentioned on the links mentioned in the previous reply by @mcanouil. I could only find a reference to it here: https://quarto.org/docs/websites/website-tools.html. Note that the documentation doesn't mention we can pass a filepath there. It states we should give it "Markdown", and there is no example showing we can pass a filepath. The bug might actually be that passing a filepath makes it to be rendered on pages at the root directory. However, I do think it would be great if we can actually pass a filepath.

I could find a workaround by including the entire content of the footer.qmd custom file directly inside the argument of body-footer. But realistically it is not an elegant solution. In my case the footer code is 40 lines of code and the _quarto.yml file doesn't feel like the right place to put that code. It looks like this:

website:
  body-footer: |
    ```{=html}
    <footer>
      my content
    </footer>
    ```

[mcanouil]

You don't need the raw block here, Quarto is adding it.
And it does support file path.

Note that body-footer is not the website footer (page-footer).

• quarto-cli/src/project/types/website/website-navigation-md.ts

  Lines 704 to 731 in 54c7493

  	function expandMarkdown(source: string, name: string, val: unknown): string[] {
  	if (Array.isArray(val)) {
  	return val.map((pathOrMarkdown) => {
  	return expandMarkdownFilePath(source, pathOrMarkdown);
  	});
  	} else if (typeof val == "string") {
  	return [expandMarkdownFilePath(source, val)];
  	} else {
  	throw Error(`Invalid value for ${name}:\n${val}`);
  	}
  	}
  	function expandMarkdownFilePath(source: string, path: string): string {
  	const absPath = isAbsolute(path) ? path : join(dirname(source), path);
  	if (safeExistsSync(absPath)) {
  	const fileContents = Deno.readTextFileSync(absPath);
  	// If we are reading raw HTML, provide raw block indicator
  	const ext = extname(absPath);
  	if (ext === ".html") {
  	return "```{=html}\n" + fileContents + "\n```";
  	} else {
  	return fileContents;
  	}
  	} else {
  	return path;
  	}
  	}

An alternative:

[mcanouil]

Another alternative is to modify the template.html (https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/html/pandoc/template.html) from https://quarto.org/docs/journals/templates.html#html-partials

[mcanouil]

I have the same 2nd issue described by @michaelplynch. The footer.qmd defined in _quarto.yml only applies to files at the root directory. For files in a sub filter, the filepath is written instead of rendering the file.

I missed that part of your comment @CharlesBordet.
You need to ensure the path starts with / to be absolute to the project root, otherwise it will only apply to root pages.

[CharlesBordet]

You don't need the raw block here, Quarto is adding it.

I think that the "raw block" you mention is the {=html} right? If I remove this part, the text appears as is:

---

When using the filepath, adding a / in front of it doesn't seem to produce the effect described.

Following your example, I created:

project:
  type: website

website:
  title: "Demo-footer"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: pages/mypage.qmd
        text: My Page
  body-footer: /_footer.html

format:
  html:
    theme:
      - cosmo

Which will give me:

The _footer.html file is at the root of the project directory.

Without the /, it works well for index.qmd, but not for pages/mypage.qmd (same issue as described above).

Am I correct in understanding that "absolute to the project root" means having a similar mechanism as using here::here() in R?

---

I understand that body-footer is not actually the website footer. In my case I'm using it because it felt apparently easier to be able to fully customize it.
Modifying the template.html is indeed the recommended way to pursue this goal.

I also notice that providing template: template.html works for all pages, subdirectory or not. That's an interesting workaround.

[mcanouil]

Actually, the raw block is added only when an HTML file is provided: the file content is read and enclosed in a raw HTML block, so I correct, you actually need it when writing markdown in the option.

Regarding leading /, if it does not work, it's likely an oversight where the option path resolution does not follow Quarto's convention on paths. I'll take a look.
Quarto's convention is path/relative/to/document.qmd and /path/relative/to/root/project.qmd, so yes, it's similar to here. Quarto tries to apply that convention everywhere, but there are some places that do not follow it because of how the various tools are integrated together and some oversights (some are tracked with issues).

Template and partials are the approach with the most flexibility because it allows you to get to the inside of the formats.
Note that the website/book layouts cannot be controlled as it's injected from TypeScript.

[mcanouil]

I confirm that body-footer does not detect / path as paths. (./file.html and file.html are detected as paths)

It appears margin-header/footer and body-header/footer do not follow the same code path.
resolveProjectPaths is used but it actually does not follow Quarto's convention so, when it sees /file.html, it looks for the file at the root of the file system, because it does not exist, it returns the string.
I'll dive more into this and open an issue.

[mcanouil]

The issue to track:

• body-header/footer and margin-header/footer do not resolve /-prefixed paths as project-relative #14057

[mcanouil]

For reference:

• margin-header, body-header, etc. should document they allow HTML #13270
• Accessibility suggestions: Footers, table of contents, and headers #1032
• Page Footer Support for Non HTML formats #1948