Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

background-image in YAML metadata is not embedded as base64 in self-contained reveal.js #5124

Open
tdussa opened this issue Dec 5, 2018 · 5 comments

Comments

@tdussa
Copy link

tdussa commented Dec 5, 2018

Hi,

I think I have run into a bug.

I am trying to create a stand-alone reveal.js presentation, and I would like to have a background image on all slides. Embedding of images, generally speaking, works fine: Images are converted and embedded in base64 inline form.

However, this is not the case for the background image I specify in the YAML metadata block. The background image tag is, in principle, evaluated, but the image is still loaded from the specified location instead of being embedded in the stand-alone file.

I am running version 2.4 on Manjaro:

pandoc 2.4
Compiled with pandoc-types 1.17.5.4, texmath 0.11.1.2, skylighting 0.7.4

Steps to reproduce:

  • Download reveal.js:
git clone https://github.com/hakimel/reveal.js.git
  • Get a sample image:
wget https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
  • Write a minimal input file:
cat > test.md <<EOF
---
title: The Moon
background-image: 330px-FullMoon2010.jpg
---
EOF
  • Run Pandoc:
pandoc --self-contained --standalone --to revealjs --output test.html test.md
  • Load test.html into a browser.
  • Remove the image file:
rm 330px-FullMoon2010.jpg
  • Load test.html into a new browser tab.

Expected behaviour: Show the title page with an image of the moon as background in both browser tabs.
Observed behaviour: The second browser tab has no background image. The HTML file tries to load the image from the (removed) file; the image is not embedded in the stand-alone HTML file.

Using parallaxBackgroundImage instead of background-image does not fix the problem.

Am I taking a wrong turn somewhere? Any pointers would be greatly appreciated if that is indeed intended behaviour. #3979 suggests that the above should work though.

@jgm
Copy link
Owner

jgm commented Dec 6, 2018

The problem here is that once the template has been resolved, the image file is not in an <img> tag -- which --self-contained would know how to handle -- but embedded inside a bit of JavaScript:

  <script>
...
      Reveal.initialize({
        // Push each slide change to the browser history
        history: true,
       // Parallax background image
       parallaxBackgroundImage: '330px-FullMoon2010.jpg', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
...
    </script>

To find this and replace it with a data URI, pandoc would have to parse and understand the JavaScript snippet. That's a bit beyond pandoc's pay grade, currently!

I suppose we could special-case this variable, though, in the HTML writer: if self-contained is set, we could replace it with a data URI before passing it to the template.

@tdussa
Copy link
Author

tdussa commented Dec 6, 2018

To find this and replace it with a data URI, pandoc would have to parse and understand the JavaScript snippet. That's a bit beyond pandoc's pay grade, currently!

Well, yes, I agree, that's a bit heavy to ask for. ;-)

I suppose we could special-case this variable, though, in the HTML writer: if self-contained is set, we could replace it with a data URI before passing it to the template.

That would, indeed, be excellent. Not being able to declare a general background is not quite a showstopper, but a fairly basic limitation IMHO. So a work-around seems like a very good idea. (Either that, or the docs need to be fixed so that they reflect this limitation.)

Thanks a lot!

@jgm
Copy link
Owner

jgm commented Mar 2, 2019

Hm, actually this is a bit tricky, because the HTML writer doesn't know if self-contained has been set.

@mcanouil
Copy link
Contributor

mcanouil commented Jul 20, 2023

Just checking if there is any plan to move this forward?
Since it is a long-standing issue, maybe there is something complicated I can't think of (possibly with all Pandoc updates, maybe the writer issue not to aware of "self-contained" is no longer true).

@jgm
Copy link
Owner

jgm commented Jul 20, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants