Use different logo (quarto param) on different slides revealjs

[JosephBARBIERDARNAL]

Description

Hi there!

I'm building a revealjs extension, with a _extension.yml like this:

title: Slide deck
author: WVC
version: 1.0.0
quarto-required: ">=1.5.0"
contributes:
  formats:
    revealjs:
      theme: [default, style.scss]
      menu:
        side: left
      slide-number: true
      date-format: long
      transition: slide
      background-transition: fade
      logo: logo.png

Would it be possible to, by default, use logo.png for the logo param, and be able to use a different logo (let's say logo2.png) on specific slides?

Let me know if anything's unclear here. Thanks!

[mcanouil]

Yes, but you have to figure out the logic yourself, so you need to understand how Reveal.js works.
You can read the Reveal.js documentation, use the developer/inspect mode of your browser to understand the structure, then make appropriate changes.

[JosephBARBIERDARNAL]

Ok thanks. Just wanted to be sure I wasn't missing something.

[JosephBARBIERDARNAL]

For anyone seeing this post, here is what I ended up doing.

In my main scss file

// Logo to the bottom-left
/* Default slide logo style */
img.slide-logo {
  display: block !important;
  position: fixed !important;
  bottom: 3% !important;
  left: 5% !important;
  background-image: url("../../../../../logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Swap to dark logo on dark background slides */
.has-dark-background img.slide-logo {
  background-image: url("../../../../../logo-white.png");
}

.reveal .slide-logo {
  max-height: 3rem !important;
  width: 200px !important;
}

revealjs adds the has-dark-background, so it's quite convenient when trying to detecting the background color from css.

And then in my template.yaml file:

logo: pseudo-logo.png, where pseudo-logo.png is an empty image. Without it, revealjs does not add the needed to div (img.slide-logo).