xaringan Tip: Add A Logo to All of Your Slides

Garrick Aden-Buie

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

The xaringan logo appears on all the slides!

📺 Demo 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 your after_body includes in your slides’ .Rmd file.

  output:
  xaringan::moon_reader:
    includes:
      after_body: insert-logo.html

  • Edit the .logo class in the CSS in insert-logo.html to use your logo image, and adjust the width, height and position (top, bottom, left, and/or right) as needed.

  • Use class: hide-logo to hide your logo on individual slides. (The title slide is automatically excluded.)

   ---
   
   # This slide has a logo
   
   ---
   class: inverse, hide-logo
   
   # This slide doesn't have a logo!
   
   And it's an inverse slide, too.
  • 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().