data-background doesn't embed base64 images in --self-contained reveal.js

[ntnsndr]

In pandoc-discuss, I noticed this post, which has no reply, which is the best description of a problem I've been having as well.

When converting to reveal.js in --self-contained mode, images in format embed as base64, but those in the "data-background" field do not. The remain as either relative addresses or URLs, and thus are not self-contained. Is this a bug? Or is there a workaround?

I'm using version 1.17.2, and I'm running this command:
INPUT_FILE_CONVERSION_COMMAND | pandoc --smart -s -f markdown -t revealjs --self-contained --variable revealjs-url=LOCAL_FILE -o OUTPUT_FILENAME

Thanks to all contributors to mighty pandoc. I'm greatly appreciative of what you do.

[jgm]

Please try with the dev version of pandoc (or at least the latest release, 1.19.2). There have been lots of changes since 1.17.2. You can get a binary of the dev version for testing from the pandoc-nightly repository. +++ Nathan Schneider [Oct 16 17 20:46 ]:

…

In pandoc-discuss, I noticed [1]this post, which has no reply, which is the best description of a problem I've been having as well. When converting to reveal.js in --self-contained mode, images in format embed as base64, but those in the "data-background" field do not. The remain as either relative addresses or URLs, and thus are not self-contained. Is this a bug? Or is there a workaround? I'm using version 1.17.2, and I'm running this command: INPUT_FILE_CONVERSION_COMMAND | pandoc --smart -s -f markdown -t revealjs --self-contained --variable revealjs-url=LOCAL_FILE -o OUTPUT_FILENAME Thanks to all contributors to mighty pandoc. I'm greatly appreciative of what you do. — You are receiving this because you are subscribed to this thread. Reply to this email directly, [2]view it on GitHub, or [3]mute the thread. References Visible links 1. https://groups.google.com/forum/#!topic/pandoc-discuss/7pxyRnkXWOg 2. #3979 3. https://github.com/notifications/unsubscribe-auth/AAAL5OU4XSvx-p0snKAe5U_jUXFZV-0rks5stCMxgaJpZM4P7isJ Hidden links: 5. file://localhost/var/folders/l0/2t_cldbj26j_vsd9_q2tsf400000gn/T//mutt.html

[ntnsndr]

Thanks for the prompt reply, and I'm sorry for the trouble there. I just tried on 1.19.2 and the nightly, and the problem persists on both.

[jgm]

Can you give a (preferably short) input we can use to reproduce this?

[jgm]

Never mind, I see how to do it.

[jgm]

As noted in the commit message,

In my test, I got a data uri for data-background. But it didn't
actually work in the browser (the background image didn't show).
Not sure whether this is a problem in reveal.js or a problem
in pandoc...

[ntnsndr]

Thanks for taking this up. Were you able to address this in the commit, or does it remain a mystery?

[jgm]

+++ Nathan Schneider [Oct 17 17 17:59 ]:

Thanks for taking this up. Were you able to address this in the commit, or does it remain a mystery?

Remains a mystery, I'd be happy for any clarification.

[jgm]

Mystery removed: you need data-background-image, not data-background.

This works:

# My slide {data-background-image="test/lalune.jpg"}

Hi there

[Jmuccigr]

Is this the kind of thing that could go into the User's Manual?

PS I also notice that an empty header with the data-background-image attribute will also work, in case you don't have a header on a slide.

[jgm]

If you want to propose an addition to the User's Manual, feel free, but use a separate issue or PR.

[Jmuccigr]

@jgm Thoughts on the manual PR?

[jgm]

+++ John Muccigrosso [Feb 07 18 15:41 ]:

***@***.*** Thoughts on the manual PR?

I haven't had time to review it. Skimming it, my main worry is that it's pretty long -- given how large the manual already is, I wonder if it could be made more compact, deferring most of the explanation to the reveal.js documentation? An example is nice, though.

[Jmuccigr]

I was wondering about that. Let me shorten it.

[Jmuccigr]

OK, @jgm, it's shortened and has passed the tests.

[gabrielodom]

I know this issue is old, but I'll leave this comment for anyone who is still looking for a solution.

I am writing a reveal.js presentation in Rmarkdown and publishing it to Rpubs. I originally had a very large figure as a fullscreen slide by using

## {background="figures/my_giant_picture.png"}

This worked when I knit the document and when I displayed it locally as a rendered .html page. However, when I published it to Rpubs, that slide was blank. I used @jgm's solution above (copied here), and everything is beautiful.

## {data-background-image="figures/my_giant_picture.png"}