nbconvert icon indicating copy to clipboard operation
nbconvert copied to clipboard

Better support for reveal.js functionality

Open mattilyra opened this issue 7 years ago • 6 comments

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.

mattilyra avatar Jun 27 '17 13:06 mattilyra

+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.

buffetboy2001 avatar Jan 02 '21 03:01 buffetboy2001

#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: 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. There is only so much testing I have time for.

bouzidanas avatar Sep 08 '22 03:09 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/

MP-MaximilianLattka avatar Oct 25 '23 11:10 MP-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/

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.

bouzidanas avatar Oct 28 '23 15:10 bouzidanas

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.

MP-MaximilianLattka avatar Oct 30 '23 09:10 MP-MaximilianLattka

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.

bouzidanas avatar Oct 30 '23 11:10 bouzidanas