background-image not embedded when embed-resource: true

[mcanouil]

it appears that the background-image is never embedded in the html file for some reason.
If the background image is set with {background-image="assets/background.jpg"}, it is embedded.

The following setup in the yaml, will result in slides without background.
While, it's working fine when the generated html is at the same level as the qmd file it comes from.

format:
  revealjs:
    self-contained: true
    background-image: background.jpg
    output-file: docs/index.html

The image path is not replaced by a the base64 version of the image.
From the HTML file generated:

      // Parallax background image
       parallaxBackgroundImage: 'background.jpg',

Example: https://github.com/mcanouil/quarto-issues/tree/main/quarto-cli%23980
Version: 0.9.449
Originally from: #951

[jjallaire]

Note that this is issue in Pandoc. It should work as-expected in Quarto once the issue is resolved there: jgm/pandoc#5124

[mcanouil]

Are you expecting this 4-years old issue to be resolved in a near future?
(I am guessing a post render script can replace the path by the base64 image, if in the future, I need this setting on a daily basis, I'll write that filter)

[cderv]

@dragonstyle we are doing our own embedding now instead of relying on Pandoc, right ?

I wonder if we could leverage that to solve this. 🤔

[dragonstyle]

Pandoc is still ultimately handling the ingestion of embedded resources here: src/core/pandoc/self-contained.ts - so I think we do need the upstream....

[mcanouil]

FYI, jgm/pandoc#5124 (comment):

No, the situation is much the same.

If we changed --embed-resources so that it operated on the AST before sending it to the writer, then this would be handled well. However, in general --embed-resources has to handle things that are only in the template, or CSS, so this would not be a complete solution. One can envision having two functions, one that is run on the AST before the writer (this would put resources in the media bag and rewrite paths), and another that is run on the final HTML.

[KerrisBay]

There is temporary solution to the background file not being embedded.

First, switch of embedding by setting embed-resources: false and self-contained: false in YAML.
Next, render the document, and manually move the background image to .../libs/revealjs/dist/theme inside the working folder.
Now, you may embed the resources in YAML and obtain a single html file for the very next render.
Unfortunately, if rendered again, the background image is lost. :-)
Hope it helps.

[mcanouil]

First, switch of embedding by setting embed-resources: false and self-contained: false in YAML.

Don't use self-contained it's the deprecated / old name for nearly two years now.
The correct current option is embed-resources.
Setting both is bad.