background images not found when using output_dir

[aronatkins]

Similar to #39.

Given a presentation:

---
output:
  revealjs::revealjs_presentation:
    theme: dark
---

## Important {data-background="rstudio.png"}

This is the first slide.

When rendering:

rmarkdown::render("index.Rmd", output_dir="destination")

an destination/index.html file is created, the rstudio.png is referenced but not found (because the reference cannot resolve).

<section id="important" class="slide level2" data-background="rstudio.png">
<h2>Important</h2>
<p>This is the first slide.</p>
</section>
    </div>
  </div>

Things are not improved by rendering self_contained=TRUE.

Also related is that rmarkdown::find_external_resources does not find rstudio.png. Adding this file as a render_files entry does not help, either.

[cderv]

As seen in #39, currently self_contained: true does not create self_contained slides when using background images or similar.

This is an issue with pandoc itself I believe. Tested with Quarto

---
title: "Untitled"
format: 
  revealjs:
    self-contained: true
---

# Important {data-background="background.jpg"}

This is the first slide.

it will style have this html part

<section id="important" class="slide level1 present" data-background="background.jpg" style="top: 240.5px; display: block;" data-background-image="background.jpg">
<h1 data-background="background.jpg">Important</h1>
<!-- (...) -->
</section>

The background image is processed by reveal.js itself, so I don't know if encoding it would work. This is a Pandoc thing.

About output_dir when self_contained: false, we indeed have an issue.

revealjs_presentation has no explicit post processor to copy those resources and modify the HTML file, as it is done in html_document_base() for certain resource. The latter is used in the former, but I don't think it knows what to do with special reveal.js attributes. It only handles <img> tags it seems.

The fact that find_external_resources does not find them could be also source of the problem (it is used to copy file in intermediate dir).

Anyway I need to dig further in how rmarkdown works for those file in order to see what should be done with revealjs. But we will certainly need special handling of external resources passed as attributes for reveal.js to work with.

[atusy]

I think only the solution is base64 encoding outside Pandoc or by filters.

---
title: "Untitled"
output: 
  revealjs::revealjs_presentation:
    self-contained: true
---

# Important {data-background-image="`r xfun::base64_uri(system.file("img", "Rlogo.png", package = "png"))`"}

This is the first slide.

[cderv]

Yep regarding the self-contained mode, if that works with reveal.js then it is a solution we could use I guess. I had that in mind, but did not try it yet. Thanks! I still think that it could be an issue in Pandoc and --self-contained

Regarding not self-contained, I think we can do differently and not encode the image but detect and move as the other resources.

[cderv]

I think I solved the mystery in #39

The attributes to use is data-background-image so that Pandoc picks it up to be base64 encoded.
See #39 (comment) for details.

data-background is not process by Pandoc directly. I think it is on purpose as it does not really if it will be a color (data-background-color) or an image data-background-image.

I believe it is worth using the long form.

[cderv]

To be complete, here is an example

---
title: "Untitled"
output: 
  revealjs::revealjs_presentation:
    self_contained: true
---

# Important {data-background-image="`r system.file("img", "Rlogo.png", package = "png")`"}

This is the first slide.

This works with revealjs < 4.1.0 because there is an issue with last version introduced in 4.1.1 (tracked in #137)