---
title: "Example Presentation"
author: "James Bartlett"
format:
revealjs:
embed-resources: true
---4 Reproducible presentations
In this chapter, you will learn how to create presentations that you can share with a URL. Your presentation might be purely conceptual where you use words and images, or you might be presenting your research and you want to share reproducible analyses and figures. This is great for exposure as it’s better than your name and abstract in a programme, and it’s much easier to share a URL link to your presentation which people can repost compared to a PDF.
4.1 Example presentations and Quarto documentation
For an example of creating Quarto presentations, you can explore a papaja demonstration I co-presented for a previous data upskilling workshop. If there is a feature you like, you can see the source code on github to adapt to your needs.
Prof. Lisa DeBruine has a great website where she shares all her talks and you can see the underlying code in her github repository. Each folder contains all the files for one talk, so you can see the variation in how to achieve different features. Note: Lisa also adds some custom css features (styling for html pages) which we will not really be getting into in this workshop.
Your main source of information for this output is the Revealjs section of the Quarto guide.
4.2 Creating a Quarto presentation
The first step is thinking about where you want your presentation folder stored on your computer, where all the files will live. I have a folder within Documents called git_repos where I store all my git repositories away from OneDrive (see below).
Do not create github repositories within OneDrive
We have not reached the github step yet, but as you think about where you want your folder for the presentation, please do not use a folder within OneDrive. Sometimes it works, but most of the time it causes chaos as OneDrive is trying to track changes, github is trying to track changes, which ends in them fighting over file permissions.
For presentations, there are a couple of options for your starting point. Compared to books and websites in other chapters, there is not a standalone option for a presentation project to create a folder with the files inside. So, you have one of two options:
You just create a presentation by clicking
File > New File > Quarto Presentation.... Enter a title, author, and keep the default Reveal JS option. Click Create and you will have a blank .Qmd called Untitled1.qmd. You can then create a new folder for the presentation to live in as you save Untitled1.qmd with a proper file name.You first create an R Project by clicking
File > New Projectto create a new folder/directory. This creates the folder and an R Project (.RProj) file to help organise things, then you complete step 1 to add the Quarto presentation.
If you are not including any data, it will not make much difference which way you create the presentation. However, if you want to include an element of data analysis, it can be useful to use an R Project to help organise your working directory.
Once you have created your presentation .qmd file, you can Render it and see a bland looking .html page with your title and author. Congratulations, you have a presentation skeleton to work with!
4.3 Editing your Quarto presentation
When you create a presentation, I have found it can be temperamental in whether the default presentation file actually specifies it should be a presentation. So, your initial render was a very bland looking document. Edit the YAML section at the start of the file from the default title and author to add a few lines about the formatting:
If you click Render again, now it will look and behave as a presentation. This is down to the format: revealjs element as revealjs is the engine for rendering slides as a .html file.
The embed-resources part makes the .html files slightly larger and takes longer to render but it means you can open them independently. Without this, there will be a folder in your directory called “yourtitle_files” which it needs to add the formatting. If you just shared the .html file without the files folder, it would look weird. If you set embed-resources to true, all the formatting will be contained within the .html file and you can share it as a single file.
4.3.1 Adding sections and slides
The YAML section will control the title page but to add individual slides, you use level 1 and level 2 headers.
A level 1 header (one hash #) will create a section and a level 2 header (two hashes ##) will create a regular title. You can just use level 2 headers to create basic slides with a title, but periodic level 1 headers can be useful for organisation to create sections which are easier to navigate in the contents menu.
# This is a section
## This is a slide
Add your content here.
Try this
Try and switch between combinations of level 1 and level 2 headers to see how it looks when you render your presentation.
Alternatively, if you want to create a slide without a title, you can use three dashes to start a new slide:
# This is a section
## This is a slide
Add your content here.
---
This is a slide without a title. 4.3.2 Adding content
Once you have added your slides, you can add your content to them. This can include simple text, bullet points, code, and images. For the following demonstrations, if you want to play around with text to see how it looks, try using the Lorem ipsum typesetting passages:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4.3.2.1 Smaller text
It will take some practice and tweaking to learn how much you can fit on slides before you need to create a new slide. It’s probably a good hint to question how much content you are including if there is too much to fit, but you can specify smaller text with a tag on the header.
## This is a slide {.smaller}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq...
Try this
Try and compare the full typesetting extract with and without the {.smaller} tag.
4.3.2.2 Multiple columns of content
Like the smaller text tag, there is a class of tag called .columns which you can use to specify columns and their width on the slide. For example, if we wanted two equal columns both containing text, you could add:
:::: {.columns}
::: {.column width="50%"}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq...
:::
::: {.column width="50%"}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq...
:::
::::Within each column, you can include any regular content like text, bullet points, or images.
4.3.2.3 Individual images
If you do not want to run code to create an image or visualisation for your presentation, you can save an image to your
If you want a test image, you can download this lovely picture of a duck. Save the image in your presentation folder (or a subfolder called images if there are lots you want to keep tidy) and add one of the following two options:
or
```{r}
knitr::include_graphics("Duck.png")
```You can see a longer overview of image options in the Quarto features chapter, but knitr is a package RStudio uses for dynamic documents like RMarkdown and Quarto. It includes a handy function called include_graphics() which takes a file path as it’s first argument.
If there are several images you want to include on a slide and you want to carefully size or position them, there are some advanced features in the reveal documentation.
4.3.2.4 Code and output
As we are using Quarto within RStudio, you can add any code and output that would comfortable fit on a slide. This is a great feature if you are teaching about coding as you do not need to worry about adding screenshots of code and output. If you are presenting results from your research, it also means you can include reproducible analyses or visualisation.
By default, you will only see the output of code if you try and render a slide with this:
```{r}
summary(mtcars)
```But you can set echo=TRUE within the code chunk after the r to also show the underlying code if that is relevant to what you are presenting.
4.3.3 Changing the theme
The slides use a default theme without any further edits, but Quarto presentations come with a few built-in themes you can use. They are all pretty minimalist but you can explore which suit your needs best.
To edit the theme, you need to specify the theme in the YAML section at the start of the file, but be careful of indentation:
---
title: "Example Presentation"
author: "James Bartlett"
format:
revealjs:
embed-resources: true
theme: dark
---
Try this
There are 11 built-in themes, so try and change it to one of the other themes such as “simple” or “moon” to see what they look like.
How can I make more specific edits?
The one downside to using Quarto presentations is that it is more difficult to edit basic features like the font than if you were using MS PowerPoint. If you do want a specific look to your presentation, you will need to play around with adding a .css file for styling. You can learn more about this on the Reveal Themes page.
These are the key components to make your presentation. Until this point, these edits all exist on your own computer. But now it is time to track your code using github and make your presentation accessible online via github pages.
4.4 Creating a github repository
Once you have a working barebones version of your presentation ready to go, it’s time to associate your presentation folder with a github repository and start some version control. If you want another resource, you can see the github documentation online.
In future, you could actually start with this part. You can create a new repository/folder with git enabled, and then add your new presentation. However, we started by creating the presentation first, so we need to create a repository for an existing folder without a git component.
In the github desktop application, click add >> Create a New Repository and complete the details.
Seriously, do not create github repositories within OneDrive
As a reminder, please do not use a folder within OneDrive for your github repository.
Name: This will be the name of your repository on github, so call it something short but sensible.
Local path: Click Choose… and navigate to your presentation folder. You want the path to be the main folder your presentation lives in.
Select the folder, do not double click
One mistake I make every now and again is opening the folder you want to create a github repository for, rather than just selecting the folder. If you open the folder when selecting the local path, it will create a repository within your folder as a subdirectory. This means it will only apply version control to a level below your main folder and not track the files you want to track.
The other fields you can edit later, so click Create Repository when you are ready.
Your newly minted repository should be showing as the Current Repository. This exists on your computer, but it is still not available online. You need to click Publish repository, and that will push all of your files to github and be available online.
4.6 Commiting and pushing changes
At this point, you have everything you need for the presentation workflow. As you work on your presentation, you will go through the workflow of:
Open the RProj file (if you are using a project file) and edit your presentation in RStudio.
When you hit a milestone you want to record, in github desktop tick all file changes or specific files, and add a commit message (and longer description if necessary).
If you are continuing to work on the presentation, keeping editing and committing.
When you are ready to push changes to github and github pages, push your commits.
Before we have time to start working on your presentation, I will end on a couple of warnings and tips.
Caution
Remember just committing changes will do nothing to your github repository and presentation link. You need to push those committed changes for them to be available on github and used to build the presentation in github pages. It takes a few minutes to rebuild, so do not worry if you do not immediately see the changes.
Reverting changes
One of the main features I use way too infrequently is reverting changes when something goes wrong. The idea behind version control is you save your work at specific milestones, where you can add commit messages that describe key changes you make. If you make a change that breaks something since your last commit, you can revert the changes to a previous version. To do this, go to github desktop, click History, and you will see all your commit history. Identify the last commit you want to revert to, right click on it, and select Revert Changes in Commit.
4.7 Start working on your own presentation!
Start working on your own presentation in the remaining time we have together.
See the final chapter on Quarto features for inspiration / example code for the kind of features you can use.