Background image on title slide

[ThomasSiegmund]

Hi,

you can easily set a background image per slide, as stated in the documentation.

## Full size image background {data-background="background.jpeg"}

Is there a way to do the same for the title slide?

Thanks for a nice package

Thomas

[ThomasSiegmund]

Answering my own question here: You can modify the default template. It can be found in

revealjs/inst/rmarkdown/templates/revealjs_presentation/resources/default.html

Change line 126

$if(title)$
<section>
<h1 class="title">$title$</h1>

into

$if(title)$
<section data-background-image="img/myTitelBackground.png">
<h1 class="title">$title$</h1>

The modified template can be included via the yaml header:

output:
  revealjs::revealjs_presentation:
    template:modifiedTemplate.html

[ekstroem]

The solution outlined above exactly addresses what I want to do - I'm just having problems getting things to run. I have the following files as a test example:

The main file test.Rmd

---
title: "First page"
author: Claus
date: November 14, 2016
---

# Page 2

Image shouldn't be here

and an _output.yaml file

revealjs::revealjs_presentation:
  template:kutemplate.html
  theme: black # black sky
  highlight: zenburn
  center: true
  css: ku.css
  lib_dir: libs

and finally a template kutemplate.html which for now is identical to the default template found on github.

If I knit the test.Rmd file I get the following error message

Error in yaml::yaml.load(string, ...) : Scanner error: mapping values are not allowed in this context at line 3, column 8 Calls: ... yaml_load_file_utf8 -> yaml_load_utf8 -> -> .Call Execution halted

If I drop the _output.yaml file altogether and use this Rmarkdown file instead

---
title: "First page"
author: Claus
date: November 14, 2016
output:
  revealjs::revealjs_presentation:
    template:kutemplate.html
---

# Page 2

Image shouldn't be here

then I get

Error in eval(expr, envir, enclos) : object 'template' not found Calls: -> create_output_format -> eval -> eval Execution halted

All files are located in the same directory. Is it the hierarchy in my yaml that is giving me problems?

[ekstroem]

Ah. Found my error, so putting it here in case anyone else runs into this. A space is needed after template:

---
title: "First page"
author: Claus
date: November 14, 2016
output:
  revealjs::revealjs_presentation:
    template: kutemplate.html
---

[philiporlando]

I've created a new modifiedTemplate.html in the revealjs/inst/rmarkdown/templates/revealjs_presentation/resources/ directory, but I'm still getting the following error:

pandoc: Could not find data file templates/modifiedTemplate.html
Error: pandoc document conversion failed with error 97
Execution halted

Here's my yaml header:

---
title: "<h2>My Title<h2>"
author: "<br>My Name"
subtitle: <font size='6'>My Subtitle</font>
date: <font size = '10'>July 29, 2019</font>
output:
  revealjs::revealjs_presentation:
    template: modifiedTemplate.html
    theme: "night"
    transition: slide
    self_contained: false
    reveal_plugins: ["zoom"]
---

[pinduzera]

I've created a new modifiedTemplate.html in the revealjs/inst/rmarkdown/templates/revealjs_presentation/resources/ directory, but I'm still getting the following error:

pandoc: Could not find data file templates/modifiedTemplate.html
Error: pandoc document conversion failed with error 97
Execution halted

Here's my yaml header:

---
title: "<h2>My Title<h2>"
author: "<br>My Name"
subtitle: <font size='6'>My Subtitle</font>
date: <font size = '10'>July 29, 2019</font>
output:
  revealjs::revealjs_presentation:
    template: modifiedTemplate.html
    theme: "night"
    transition: slide
    self_contained: false
    reveal_plugins: ["zoom"]
---

the template should be in the .rmd root folder.

[ShKlinkenberg]

If the title page could just get an id or class out of the box, things wouldn't have to be so cumbersome.

[apreshill]

Hi there- try:

output: 
  revealjs::revealjs_presentation:
    title-slide-attributes:
      data-background-image: img/pink-paint.jpg
      data-background-size: cover

Documented here: https://pandoc.org/MANUAL.html#background-in-reveal.js-and-beamer

[ShKlinkenberg]

😳mind blown 🤯! Pretty awesome! Though an id on the title page would still be useful I think. But thanks a lot for pointing this out!

[ShKlinkenberg]

@apreshill did you test this? I'm not getting this to work. Have tried a bunch of variations, but nothing seems to work.

[cderv]

@apreshill I believe the syntax should be

output: 
  revealjs::revealjs_presentation:
title-slide-attributes:
  data-background-image: img/pink-paint.jpg
  data-background-size: cover

as these are Pandoc's variable and not argument to output format.

However, for a reason I don't know yet, title-slide-attributes: is not taken into account. Other documented Pandoc's options like parallaxBackgroundImage are working correctly

output: 
  revealjs::revealjs_presentation:
parallaxBackgroundImage : img/pink-paint.jpg

I am reopening this as this should be able to work.

[cderv]

However, for a reason I don't know yet, title-slide-attributes: is not taken into account.

In fact it was easy to find: Currently this R package is not using the default Pandoc template but use a custom one with slight modification. So title-slide-attributes is not taken into account.

We currently don't add the attributes to the template https://github.com/rstudio/revealjs/blob/d5dc8e9af52c3ec21be3baa06f7e0bb0cda2d479/inst/rmarkdown/templates/revealjs_presentation/resources/default.html#L504-L506

which is what is described in this issue in the first place: https://github.com/rstudio/revealjs/issues/32#issuecomment-226986532

This should be something like

$if(title)$
<section id="$idprefix$title-slide"$for(title-slide-attributes/pairs)$ $it.key$="$it.value$"$endfor$>
  <h1 class="title">$title$</h1>

Also, this is supported in Pandoc only since Pandoc 2.9+ where title-slide-attributes was introduced.

So this needs to be supported in order for it to work with the package.

[paolocrosetto]

Hi, was this fixed in a more recent version of the package? Thanks

[ShKlinkenberg]

Hi @paolocrosetto, I switched to using quarto. Quarto implements the latest version of revealjs and lets you specify a background image in the YAML header by setting the title slide attributes:

title-slide-attributes:
      data-background-image: /path/to/title_image.png

[xldrkp]

@apreshill Thanks for that, works great in quarto, too!