Newbie question on ioslide


#1

Hi,

I am just beginning to use Rmarkdown/ioslide to create very simple html-based presentations. I have difficulties finding the answers to the following questions from the documentation:

  • how can I create a presentation without title slide?
  • what setting should I use so that the presentation actually use the entire available real-estate of my screen and not just ~50% in both height and width?

Thanks in advance


#2

Using the default .Rpres template, removing the first code block will eliminate the title slide.

# delete the first slide
My Presentation
========================================================
author:  My name
date: 15 August 2018
autosize: true

EDIT: discourse doesn't seem to want to render the markdown syntax for strikethroughs. Imagine the block over is crossed out.

Adjusting the width of the slide content can be done using css. The following css targets the revealJS (underlying framework) classes from the parent container to the slides. Place this css at the start of your .Rpres file.

<style>
.reveal .slides{
    width: 90% !important;  /* or other width */
}
</style>

95% was the max width where content stayed within the current slide and had enough padding on the sides. 90% seemed to be a good balance between white space and allowing enough room for content.

Hope that does it!


#3

Thanks for you reply. Your suggestions do not appear to apply to ioslide presentations, which I want to use.


#4

Sorry, that's my fault. I saw the word "presentations" thought you were using .Rpres files.

At the moment, I'm unable to find a solution for removing the title slide from the presentation. Css won't help in the instance as the idea is to prevent it from rendering altogether. Removing the title, author, and date arguments will create a blank slide. A solution might be buried in the r markdown presentation docs or in the pandoc user guide.

For increasing the height and width of the slides, use the following css (place at the top of your rmd file). I assumed you wanted the slides to expand to the full height and width of the screen. This css forces the slides to expand to 100vw (width) and 100vh (height). Note: these units allow for the resizing of content relative to the viewport or the content that's currently visible in the browser (alternatively, you can use %). I hard coded the margins to pull the content to the top left corner (the order of the values are top, right, bottom, left). It should work for all screens, but you might have adjust the top and left values. I added border-radius: 0; as the slides had rounded corners.

<style>

body > slides {
    padding: 0;
    margin: -35px 0 0 -270px;
}

slides > slide{
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

</style>

EDIT: One more note, the css should be placed after the YAML not at the top the rmd file.


#5

You should give xaringan a try too. Pretty easy to use with great support. Example 1 & Example 2