gadenbuie / xaringanExtra

:ferris_wheel: A playground of enhancements and extensions for xaringan slides.
https://pkg.garrickadenbuie.com/xaringanExtra
Other
448 stars 36 forks source link

Multiple logos, on different slides? #68

Open giabaio opened 3 years ago

giabaio commented 3 years ago

Hi all, Just a quick (hopefully!) question, mostly out of my ignorance of css... Is it possible to use use_logo repeatedly to change the logo? So, to be clearer, I have a set of slides I'm preparing when many speakers will talk - each from different institutions. So what I'd like to do is to be able to add the specific logo only in the slides that are relevant for a given speaker.

I think if I use multiple chunks pointing to different images, then the last one will take over and be included even when it shouldn't (on top of the "correct" one)? I suppose I could define a class for each speaker and the add all the "other" classes to the call to use_logo, but I was wondering whether there's a neater option?

Thanks! Gianluca

gadenbuie commented 3 years ago

Hi @giabaio ... unforunately use_logo() is designed around inserting one logo into all of the slides.

But the good news is that you can use plain CSS to accomplish something very similar:

image

Add this block to your slides (near the top) or add the CSS to a separate CSS file that you load in the css option of moon_reader in the YAML header:

```{css, echo=FALSE}
.with-logo::before {
    content: '';
    width: 110px;
    height: 126px;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background-size: contain;
    background-repeat: no-repeat;
}
.logo-dplyr::before {
    background-image: url(https://github.com/rstudio/hex-stickers/raw/master/PNG/dplyr.png);
}
.logo-purrr::before {
    background-image: url(https://github.com/rstudio/hex-stickers/raw/master/PNG/purrr.png);
}
.logo-plumber::before {
    background-image: url(https://github.com/rstudio/hex-stickers/raw/master/PNG/plumber.png);
}

Change the names of the `.logo-` classes and the URLs of the images. Then, for each slide that needs a logo, add the `with-logo` class and the specific logo class, e.g. `logo-dplyr`.

Here's the complete source code for the example similar to the screenshot above.

title: Slides with Multiple Logos output: xaringan::moon_reader: lib_dir: libs seal: false nature: highlightStyle: github highlightLines: true countIncrementalSlides: false

class: center middle with-logo logo-dplyr

dplyr


class: center middle with-logo logo-purrr

purrr


class: center middle with-logo logo-plumber

plumber

.with-logo::before {
    content: '';
    width: 110px;
    height: 126px;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background-size: contain;
    background-repeat: no-repeat;
}
.logo-dplyr::before {
    background-image: url(https://github.com/rstudio/hex-stickers/raw/master/PNG/dplyr.png);
}
.logo-purrr::before {
    background-image: url(https://github.com/rstudio/hex-stickers/raw/master/PNG/purrr.png);
}
.logo-plumber::before {
    background-image: url(https://github.com/rstudio/hex-stickers/raw/master/PNG/plumber.png);
}
giabaio commented 3 years ago

Thank you @gadenbuie ! Seems to be working fine. Awesome.

Only thing is you just need to add the class: xxx bit to every single slide, but other than that works perfectly. Thanks!