Converting PowerPoints to Reveal.js Format

Introduction

Since switching to Quarto, I have also started using Reveal.js for most of my presentations. However, there are certain situations where I need to use PowerPoint due to venue restrictions. I also have a bunch of past conference and project presentations that I would like to display interactively on my site. So, how can I convert my .pptx files into reveal.js slides? Well, I have devised a workflow that does just this. I am not sure is the best way, but it works for me until someone tells me otherwise.

flowchart LR
    A[PPTX] --> |Convert| B(PDF)
    B --> |pdf_convert| C(JPGs)
    C -->  D{QMD revealjs}
    D --> |Render| F[HTML]
    
  

Coded Example

Now we can run through an example with the code included. Here, we are assuming you have a saved PowerPoint, powerpoint.pdf, that was exported from your PowerPoint of interest.

# Load in the `pdftools` package
library(pdftools)

# Run the `pdftools::pdf_convert` function
pdftools::pdf_convert(pdf = "./powerpoint.pdf",
                      format = "jpg",
                      pages = NULL,
                      dpi = 300)

Create a Quarto (.qmd) document saved in the directory where you want to create your HTML output. Then, specify your YAML header as you see fit. I have removed the menu with menu: false but kept the arrow slide controls with controls: true in the below example. I also like specifying history: false, which prevents each slide from being included in your browser history.

---
format: revealjs
menu: false
controls: true
history: false
embed-resources: true
output-file: "slide-conversion.html"
---

Within your blank .qmd document, insert a code chunk and paste in the following code chunk. This code will create a list of images from your working directory, then iterate over them to set each one as the background image of its own slide in your revealjs presentation. It is important to set the execution options to echo: false and output: asis to prevent the code chunk from being included in the slides and instead print out the for-loop’s output.

#| echo: false
#| output: asis

# Create a list of photos in your directory
photo_list <- list.files(path = ".", pattern = "\\.jpg$")

# Iterate over this list to output each as the background image of a new slide
for (i in 1:length(photo_list)){
  cat("## {background-image=\"./powerpoint_", i, ".jpg\" background-size=\"contain\"}\n", sep = "")
}

You will then need to render your .qmd document with this code chunk to produce a self-contained HTML file with your slides. Once your HTML document is created, it is simple to embed it as an iframe into your site. There are other ways to configure this when embed-resources: false is set in your YAML, but my slides are not too large so this technique has worked for me.

<iframe class="slide-deck" src="powerpoint.html"></iframe>

To ensure your slides are always displayed with the correct aspect ratio, I applied a .slide-deck class to my iframe, then specified this class in my site CSS like below.

.slide-deck {
  border: 3px solid #dee2e6;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 2em;
}

Final Thoughts

So there you have it, how I convert my PowerPoint slides to reveal.js using Quarto in R. If anyone has a simpler method for doing so, I would love to hear about it. Regardless, I hope this post is helpful for others interested in this process.