Better support for reveal.js functionality

[mattilyra]

I really like creating slide presentation using Jupyter Notebooks, but the workflow is currently fairly cumbersome. I often find myself wanting to control HTML <section> tag parameters like

• slide transitions (per individual slide)
• individual slide backgrounds
• background transitions
• different fragment types (http://slides.com/hakim/reveal-js/embed?transition=none#/transitions)
  • grow
  • shrink
  • fade in/out
  • highlight colour
• footer
  ...

It would be great if controls for these could be added to the slide toolbar so that one does not need to edit the HTML file manually each time after running nbconvert --to slides.

[buffetboy2001]

+1 Definitely agree. I assumed I could use the slide toolbar in some way to edit the JSON and control slide transitions, but I don't think it's possible. Please open up some of these options, if possible.

[bouzidanas]

#1861

Give that a try. You can set the data- attributes for slides, subslides (vertical slides), and fragments by means of the cells metadata.

Example:

You can edit the .ipynb file directly with any text editor (not notebook environment)

or

In the old Jupyter notebook browser environment, click View > Cell Toolbar > Edit Metadata . Then go to a cell (in notebook) thats going in a slide/subslide/fragment and click Edit Metadata in the cell's toolbar on the right. You will see a popup input with something like this:

{
  "id": "p9eicnYjOoBv",
  "slideshow": {
    "slide_type": "slide"
  }
}

Change that to something like this example:

{
  "id": "p9eicnYjOoBv",
  "slideshow": {
    "slide_type": "slide",
+   "data": {
+     "background_video": "your-video-URL-here.mp4",
+     "background_video_loop": "",
+     "background_video_muted": ""
+   }
  }
}

This should put data-background-video="your-video-URL-here.mp4", data-background-video-loop="", and data-background-video-muted="" inside the <section> tag that corresponds to this slide.

A few things to note.

1. That background_video sets data-background-video so if you want to add say data-transition="zoom", you would put "transition": "zoom" inside the Metadata instead.
2. Setting the Metadata attribute to an empty string "" is equivalent to adding a data- attribute without a value.

Give it a shot.

[UL-MaximilianLattka]

Sorry for bringing this up again, but is it possible as of now to provide reveal.js configuration parameters on the presentation-level like this?
https://revealjs.com/config/

[bouzidanas]

Sorry for bringing this up again, but is it possible as of now to provide reveal.js configuration parameters on the presentation-level like this? https://revealjs.com/config/

Im not sure I understand. You can edit the output presentation file and configure the same exact way as in the link. You also have access to some of the configuration parameters in the command line and I think the easiest way to configure a presentation in a rush or in a new environment is to use query parameters.

[UL-MaximilianLattka]

Are you suggesting that I manually edit the HTML artifact? I would've hoped that nbconvert would allow to pass these parameters over to reveal.js.

[bouzidanas]

I mean it does allow for command line options that change configuration parameters. I'm not sure it allows changing all of them, but I've set some of them myself.

[afeld]

See also: #1851 (comment)