Adding an image to the title page of ioslides presentation

Question

Is it possible to add an image to the title page of ioslides presentation? I would like to add a big logo after the instead of xyz.

---
title: "Empowering Data-Driven Decisions at <br> xyz"
author: Omayma Said
date: Jan 11, 2017
output: ioslides_presentation
---

Answer 1

Yes. There is a standard option to include a small logo included in the ioslides bookdown documentation as well as some code to make a custom size image using css. This css can go in a separate document or it can at the start of your document after the YAML header which is typically easier when you only have a few lines to add.

Here is an example of putting the css in the document using code snippets from the bookdown documentation.

---
output:
  ioslides_presentation:
    logo: logo.png
---

<script>

    .gdbar img {
        width: 300px !important;
        height: 150px !important;
        margin: 8px 8px;
    }

    .gdbar {
        width: 400px !important;
        height: 170px !important;
    }

    slides > slide:not(.nobackground):before {
        width: 150px;
        height: 75px;
        background-size: 150px 75px;
    }

</script>

# Transition slide

## First slide

Answer 2

Yes, it is possible with the help of css.

First step is to add the css in the output of the markdown:

---
title: "Your <br> Title"
author: "Author Name"
date: "<div class = 'slide-date'>`r format(Sys.Date(),format='%B %Y')` <div>"
output:
  ioslides_presentation:
    css: styles.css
---

The next step is to add the image in your styles.css file

slides>slide.title-slide {
    background-image: url('title_image.png');
    background-size: 100% 100%;
}

Happy Coding!