embed-resources breaks title-slide-attributes in revealjs

[jakubkovac]

Bug description

Not sure if this is a quarto bug or revealjs bug. Using both title-slide-attributes and embed-resources/self-contained breaks the visuals of the presentation, shows title on all the slides and the first 2 slides get combined.

Steps to reproduce

Changin embed-resources from false to true breaks both the visuals and also the 2 slides are combined into one.

---
title: "Test Presentation"
format: 
  revealjs:
    embed-resources: false
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100, https://placeholder.pics/svg/100,https://placeholder.pics/svg/100, https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, 100px, 100px, cover
      data-background-position: "2% 98%, 50% 98%, 98% 98%, center"
editor: source
---

## Second slide
something something

Expected behavior

embed-resources: true should not break other things.

Actual behavior

No response

Your environment

• IDE: VSCode 1.83.1
• Windows 10

Quarto check output

Quarto 1.4.418
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.8: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.4: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.418
      Path: C:\Users\jakub.kovac\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2023.05
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\jakub.kovac\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2023

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/Users/jakub.kovac/AppData/Local/Programs/R/R-4.3.1
      LibPaths:
        - C:/Users/jakub.kovac/AppData/Local/Programs/R/R-4.3.1/library
      knitr: 1.44
      rmarkdown: 2.25

[>] Checking Knitr engine render......OK

[mcanouil]

Possibly related to:

• background-image not embedded when embed-resource: true  #980 (background-image in YAML metadata is not embedded as base64 in self-contained reveal.js jgm/pandoc#5124)

[cderv]

Yes definitely related. thanks !

[maxim-h]

Sorry if this only adds to the confusion. But I recently encounter this problem while revisiting a presentation I've made last year.

The issue seems to be the same.

title-slide-attributes:
        data-background-image: imgs/image.svg
        data-background-size: contain
        data-background-opacity: "0.5"

Is ignored if embed-resources: true. Also with some inline images like ![](imgs/logo.svg){.center} the .center css style is ignored only when embed-resources: true

The weird part is that I could swear that as of 2023.05.23 it actually worked as expected and didn't cause any problems. So considering the age of the Pandoc issue it's hard to pin it only on it. Perhaps quarto used Pandoc with some other options back then?

The solution to my problem was to convert all SVG images to PNG. Then it all works fine.

My quarto version is 1.5.56.

Addendum:

I've checked now with quarto v1.4.80 (latest before I made the original presentation). It doesn't have this problem. All SVGs are rendered correctly even with embed-resources:true.

Also with 1.4.557 (latest release in 1.4) the SVGs are already broken, but in different ways from 1.5.56:

• Title slide is now just glued to the top of the 1st slide (without background).
• One of the SVGs appears in random places (top of every slide and others).
• If I use SVG as logo, then in other place, where I use the same SVG in the body, it's replaced by the same SVG from above☝️
• All these problems still seem to be related to title slide background and logo. If both are replaced by PNG, then all other SVGs are render correctly.

So I guess I'll just be sticking with 1.4.80 for now.

[cderv]

@maxim-h Can you share a minimal example of your document that works with 1.4.557 and don't work with 1.5 ? thank you

[maxim-h]

Sure, @cderv .

Although I wouldn't say that 1.4.557 "works". 1.4.80 works for me.

So, something like that:

---
title: "My great presentation"
logo: imgs/renv.svg
format:
  revealjs:
    title-slide-attributes:
        data-background-image: imgs/renv.svg
        data-background-size: contain
        data-background-opacity: "0.5"
    theme:
      dark
css: style/styles.css
---

# First slide

- inline SVG ![](imgs/drake.svg){.center}
- Other stuff
- Reuse logo SVG ![](imgs/renv.svg){.center}

The style/styles.css defines just the .center:

.center{
  margin: 0!important;
  height: 40px;
  width: 40px;
}

I'm not sure If I should send you the HTML outputs. They're about 4Mb.

But visually:

1.4.80 creates 2 slides like I want it to:

1.4.557 creates only 1 slide that looks like this:

1.5.56 creates only 1 slide that looks like this:

Let me know if you want all the files with the HTML output.