R Language RMarkdown and knitr presentation Adding a footer to an ioslides presentation
Example
Adding a footer is not natively possible. Luckily, we can make use of jQuery and CSS to add a footer to the slides of an ioslides presentation rendered with knitr. First of all we have to include the jQuery plugin. This is done by the line
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Now we can use jQuery to alter the DOM (document object model) of our presentation. In other words: we alter the HTML structure of the document.
As soon as the presentation is loaded ($(document).ready(function() { ... })), we select all slides, that do not have the class attributes .title-slide, .backdrop, or .segue and add the tag <footer></footer> right before each slide is 'closed' (so before </slide>). The attribute label carries the content that will be displayed later on.
All we have to do now is to layout our footer with CSS:
After each <footer> (footer::after):
- display the content of the attribute
label - use font size 12
- position the footer (20 pixels from the bottom of the slide and 60 pxs from the left)
(the other properties can be ignored but might have to be modified if the presentation uses a different style template).
---
title: "Adding a footer to presentaion slides"
author: "Martin Schmelzer"
date: "26 Juli 2016"
output: ioslides_presentation
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('slide:not(.title-slide, .backdrop, .segue)').append('<footer label=\"My amazing footer!\"></footer>');
})
</script>
<style>
footer:after {
content: attr(label);
font-size: 12pt;
position: absolute;
bottom: 20px;
left: 60px;
line-height: 1.9;
}
</style>
## Slide 1
This is slide 1.
## Slide 2
This is slide 2
# Test
## Slide 3
And slide 3.
The result will look like this:
