4

I'm trying to create a slideshow using rstudio's implementation of quarto, and I'd like to have a common icon in the top left of all non-title-slides in the show. (I'd also like it to be on the title slide, but that I've got figured out!)

On a single slide, I can use {background-image="logo.png" background-size=15% background-position="0% 0%"} and that works fine for that slide.

In the YAML,

data-background-image: ./logo.png
data-background-size: 15%
data-background-position: 0% 0%

does perfectly for the title slide. If I use

background-image: logo.png
background-size: 15%
background-position: 0% 0%

I get the right image on all slides, but it's taking up the entire slide, not respecting the size argument.

Any suggestions on how to handle this? Maybe the background isn't actually the right way to do this since it's just a logo, but this seemed like it might be easier than trying to change the properties of the "logo" in quarto, since I don't see any options to change the size of that either.

shafee
  • 15,566
  • 3
  • 19
  • 47
Matt
  • 126
  • 10

1 Answers1

4

Update: I have written a quarto filter extension reveal-header to add a header logo in top-left corner of all slides with header-logo option in yaml, which is probably an easier option than the approach described below.

Old Answer

If you want to add a logo for all slides (including the title slide) you can do this more easily by adding a logo via logo YAML key and tweaking the CSS property for that logo image.

---
title: "Untitled"
format: 
  revealjs:
    slide-number: true
    logo: placeholder.png
    css: logo.css
---

## Quarto

Quarto enables you to weave together content and executable code into a
finished presentation. To learn more about Quarto presentations see
<https://quarto.org/docs/presentations/>.

logo.css

.reveal .slide-logo {
  display: block;
  position: fixed;
  bottom: unset !important;
  right: unset !important;
  top: 5px;
  left: 12px;
  height: 100px !important;
  width: 100x !important;
  max-width: unset !important;
  max-height: unset !important;
}

title slide with logo

next slide with logo

change the height and width css property as you need.

shafee
  • 15,566
  • 3
  • 19
  • 47
  • Thank you! That does seem to be a lot nicer than what I was trying to do! – Matt Oct 13 '22 at 20:16
  • Hmm - I'm actually having some trouble with this. The height and width don't seem to be changing the image size, and it also seems to have the added side-effect that the slide numbers are also now moved up to the top of the slides... – Matt Oct 13 '22 at 20:25
  • `slide number` is placed by default at top righr corner. Its not a side effect of this solution. – shafee Oct 13 '22 at 20:35
  • Ah - thanks, I didn't realize that !important would be needed. I think that the default for the slide numbers had been bottom right when there was no logo at all, so maybe adding the logo and changing the location still changes them? I think there had been a slide-number location option somewhere, so that should be changeable... – Matt Oct 14 '22 at 13:17
  • 2
    Oh, in that case, yes, it should be changeable. If you want to keep the slide number in the bottom right corner, I think you need to find the class selector for the slide number and apply CSS rule on that – shafee Oct 14 '22 at 13:23