Adding images to headers of specific slides

[phil]

I would like to do something similar to what @Max Kuhn has done to some of his title slides here, namely adding an image in the top right header of a slide, as on slide 13 with the readr and dplyr hex logos:

I see that he had the following class defined in his css page:

.title-hex{
  height: 60px;
  align: middle;
  float: right;
}

But unfortunately the .Rmd file is not included in the Github repo and I'm not clear on how he incorporated that into the slide. Would anyone have an idea?

Thank you!

[Max]

Here's the CSS:

.title-hex{
  height: 60px;
  align: middle;
  float: right;
}

I put this in a css file mtheme_max.css, which is an edit of someone else's file. Then in your iml header:

---
title: "Applied Machine Learning - Resampling and Grid Search"
author: Max Kuhn (RStudio)
output:
  xaringan::moon_reader:
    css: ["mtheme_max.css", "fonts_mtheme_max.css"]    

If you put the png files in a directory called images, then you can have headers using:

# Resampling a 5-NN model `r I(hexes(c("parsnip", "purrr", "dplyr", "rsample")))`

and this function:

hexes <- function(x) {
  x <- rev(sort(x))
  markup <- function(pkg) glue::glue('<img src="images/{pkg}.png" class="title-hex">')
  res <- purrr::map_chr(x, markup)
  paste0(res, collapse = "")
}

The CSS probably needs to be more sophisticated; occasionally there are gaps between the images.

(edit) add more info on where to put the css

[phil]

Thank you so much, Max! It worked like a charm.