How to make floating image in IPython Reveal.JS presentation?

Question

I'd like to use the IPython Notebook with the RISE / Reveal.JS extension for a presentation.

Is there a way to have a (floating) image (with a caption) on the right side next to my bullet points on the left?

Answer 1

You can use the nbextension Split Cells.

The documentation is rather limited as you can see, but it is very easy to use.

Basically, you create 2 markdown cells, one with your bullet points and one below with your image and caption, then you run Shift-s on both of them so that they both become half cells.

Once you launch your presentation, the first cell becomes the left-hand side of the slide and the second one the right-hand side of the slide.

As an example, here is a slide from a presentation I created recently. On the left side, I have a header, but of course, you can have bullet points or whatever you want. I made the caption below the image very small on purpose as it is the source of the image, but you can customize the image and caption size and style however you want with html since markdown accepts raw html.

If you are not very familiar with html and in case it can help as a template, here is the html I have in my second cell (so the right hand side of the slide):

<figure style="display: table; margin: 0 auto">
  <center>
    <img src="img/vc_nw.png" width="850vmin" style="padding: 4vmin 0 0 0">
  </center>
  <div align="right" style="color: #978282; line-height: 0; font-size: 2vmin">
    <em>
      from <a href="http://geek-and-poke.com/">Geek&Poke</a>
    </em>
  </div>
</figure>

Note: I use vmin instead of px, em, etc. to have proper scaling on screens of different sizes.