xaringan Tip: Add A Logo to All of Your Slides
By Garrick Aden-Buie in Blog
October 16, 2019
- Posted on:
- October 16, 2019
- Length:
- 3 minute read, 435 words
- Categories:
- Blog
- Tags:
- R Tips xaringan xaringan Tip
Here’s a quick tip to help solve a common xaringan problem: adding a logo to all of your slides.
The slightly problematic and somewhat annoying way to solve this problem is to add a logo to a series of slides using remarkjs' background-image and layout syntax.
---
background-image: logo.png
background-position: top right
background-size: 110px 120px
layout: true
---
## This slide has a logo
---
## This one does too
But you can't add a new background image!
---
layout: false
## This one doesn't have a logo :(
It works… as long as you don’t change your slide format or if you don’t mind repeating those 4 lines every time you need to reset your layout.
A logo for all the slides #
Instead,
with a little bit of JavaScript and CSS,
we can automatically insert a logo on all the slides in the presentation.
Of course,
we might not want a logo an all the slides,
so we won’t add the logo to the .title-slide
or any slide with class: hide-logo
.
If you just want to jump straight to the solution, I’ve created a template repository on GitHub that you can use to bootstrap your next set of xaringan slides.
To set everything up manually takes just a few steps.
-
Download your logo and save it in your slides directory. I’ve used the xaringan hex logo: xaringan.png.
-
Download insert-logo.html into your slide directory, or copy the html described below into
insert-logo.html
. -
Add
insert-logo.html
to yourafter_body
includes in your slides'.Rmd
file.output: xaringan::moon_reader: includes: after_body: insert-logo.html
-
Edit the
.logo
class in the CSS ininsert-logo.html
to use your logo image, and adjust thewidth
,height
and position (top
,bottom
,left
, and/orright
) as needed. -
Use
class: hide-logo
to hide your logo on individual slides. (The title slide is automatically excluded.)--- class: inverse, hide-logo
-
Have fun looking 😎 during your presentation!
Inside insert-logo.html #
The insert-logo.html
file is a simple snippet of CSS and a tiny bit of JavaScript.
The CSS defines the .logo
class that positions and sizes the logo,
and the JavaScript inserts a <div>
with class = "logo"
into each slide.
<style>
.logo {
background-image: url(xaringan.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 1em;
right: 1em;
width: 110px;
height: 128px;
z-index: 0;
}
</style>
<script>
document
.querySelectorAll(
'.remark-slide-content' +
':not(.title-slide)' +
// add additional classes to exclude here, e.g.
// ':not(.inverse)' +
':not(.hide-logo)'
)
.forEach(el => {
el.innerHTML += '<div class="logo"></div>';
});
</script>
If you’d like to automatically keep the logo off certain slides,
like the inverse
slides,
you can add additional :not(.class-to-exclude)
to the CSS selector in the .querySelectorAll()
.