Making slidify presentations

Making slidify presentations

A sort-of tutorial

Presentation by James Curley & Matti Vuore / @jalapic / @vuorre

This presentation

You may or may not be interested to know that this presentation is written in R. Slidify is an R package that compiles R-Markdown scripts into html slideshows. The conversion from R-Markdown to html is done via "frameworks." reveal.js is one such framework.

Matti Vuore and I are trying to put together some sample templates of Slidify to make it easier for others in the Psych department (and the world) to learn.

The code for this presentation can be found here

Presentation Overview

Each slide will feature some things that can be done in slidify

If you want to recreate the slides you can copy the themes and template from the original code

We're learning too, we have not yet figured out the 'best' way to do things ... in fact some of our methods might look downright bad to accomplished HTML/CSS folks... we're trying though

Acknowledgements

Thanks for reveal.js to Hakim El Hattab

Thanks for slidify and tutorials to Ramnath Vaidyanathan

Thanks for slidify examples and inspiration to Zev Ross and Kyle Walker

Important Note

This presentation is still a work in progress. Not all slides are made and some details are missing. We shall continue to update though.

We're also mainly focussed here on the styles and layouts of different slides. We aren't discussing too much how to insert R code and R output into the slides just yet - even though that's maybe the major advantage of slidify.

Setting the default style

These are items contained in the YAML. We will describe what the YAML does in more detail later.

---
framework   : revealjs
revealjs    : {theme: moon, transition: none, center: "false"} 
highlighter : highlight.js
hitheme     : github 
widgets     : [mathjax]
mode        : selfcontained 
url         : {lib: ./libraries}
knit        : slidify::knit2slides
---

YAML

revealjs    : {theme: moon, transition: none, center: "false"} 

• theme:moon refers to a clean looking solarized dark background (the one that you're looking at)

• transition: none refers to the types of transition we'd like between the slides, you can find options by clicking the link. We've just gone for the straightforward, non-distracting basic transition.

• center: "false" makes sure that all headings are fixed to the top of the slide. The default is "true" which would center the the headings and text vertically within each slide

Setting the default style

Most of the slide style is set by editing the YAML. However, you can also add in some HTML style code underneath your YAML right at the top of your RMarkdown document. This will change the look of all slides in the presentation. Here, we are changing the colors, gap between headers and body text and font type used. (Admission - I'm not sure the 'body' one is working...)

<style>

.reveal h4 {
    color: #00BFFF;
    padding-bottom: 10px;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

.reveal h3 {
    color: #00BFFF;
    padding-bottom: 10px;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

.reveal h2 {
    color: #00BFFF;
    padding-bottom: 10px;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

.reveal p {
    font-family: 'Helvetica', 'Arial', sans-serif;
}

.reveal body {
    font-family: 'Helvetica', 'Arial', sans-serif;
}

</style>

Setting the default style

Another option is to use code similar to the previous slide and save it as a CSS file in the folder 'assets/css'. Each custom layout can then be referred back to in RMarkdown. An example would be:

.customstyle1 {

  margin-top: auto !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: black;
  width: 67%;
  height: 33%;
    background: #BDB76B;

}

CSS in assets/css

By refering to the CSS in assets/css with <div class="customstyle1"> we get the following result:

* in testing this it works locally but not after upload to github?

Changing the look of individual slides

Probably the quickest and easiest way to change individual features of individual slides is to add little bits of HTML to our RMarkdown code.

The next few slides provide some examples...

HTML

With a little bit of HTML, we can do all sorts of things.

HTML

Can apply multiple format changes to same piece of text:

I'll fade in, then out

I'll fade in, then go blue, then go green, then go red, then goodbye

Setting the order of appearing things

It's also possible to make things appear out of sequence on the screen:

This appears last

This appears first

This appears second

* if anyone has a better way of doing this let us know!

Using HTML to customize slides

You can customize the position, size and color of text quite simply using HTML

You can also make some text bold and other text italicize

Text can be strong or even emphasized though in browsers these look the same as bold and italicized, unless the CSS for each has been adapted.

Using HTML to customize slides

It might have escaped your notice but this text is marked

All of this is actually very somewhat easy by just adding some HTML tags

I have underlined several words in this sentence also.

Your probably noticed that these lines are smaller than the previous slide - yep, that's done by adding HTML tags too

Using HTML to customize slides

In fact, all regular HTML tags will work...

Not sure that there would ever be a need for this one

Modifying individual slides with CSS

As well as modifying the look of text using RMarkdown and HTML, it's also possible to change things up by adding in a bit of CSS on the fly. As you can see here, the text changes color and gets bolder after adding some CSS inline code.

Now I'm also writing inline CSS text but have added a shadow - why you'd want to is your business.

inline CSS works pretty well

with a bit of practice

This sentence has a left margin of 30px.

This sentence has a left margin of 100px.

This sentence has a right margin of 100px.

This sentence is left aligned and is purple

Changing line heights

This is line one.

Here is another line.

Here is yet another line.

Do you notice the intervals getting bigger?

Even bigger?

This is the biggest gap yet!

I'm a long way away from the others.

Changing line heights

This is a really long sentence and we can change the gap between the different lines by simplying adding in a 'line-height' HTML tag

This is a really long sentence and we can change the gap between the different lines by simplying adding in a 'line-height' HTML tag

Other text effects

Your continuous scroll text goes here ... I wonder if this is a good idea or not ?

Formatting text lists

• This list contains just the default formats

• The only extra thing written in RMarkdown are some line-break tags in HTML

• Notice that the starting point of each letter is different if the text wraps over multiple lines or not

Formatting text lists

* This list is a bit different

* Here we've wrapped every line in a 'p align = justify' piece of HTML

* Consequently it has justified the text making it tight from margin to margin but we've lost our bullets - they've been replaced by asteriks.

* You may also notice that the font is different to the body text - tried making them the same, but it's not working ?

Formatting text lists

You can also write an ordered list using the <ul> tag

• Notice that this list uses bullets
• And that everything in the list...
• starts at the same point

Nested text lists

I haven't found a good way of making line breaks in a nested list without using HTML tags just yet:

• Choice A
• Choice B
• Sub item 1
• Sub item 2
• Choice C

Formatting text lists

Sometimes you might want to change the types of bullet used:

• Circles
• are produced by changing
• the ul style using css

• Squares
• are produced by changing
• the ul style using css

A dividing line

Above this text is a line that is red and right underneath the header.

Although this is working, I'm not sure if this is the best way to do this as the <hr> tag is not supposed to be used in HTML5

Adding in an image

You can do this for each individual slide using HTML if you want to change positioning or size...

Images plus text in columns

This is some text that is going above the columns

Two Column Layout

This slide has two columns of unequal widths

Three Column Layout

This slide has three columns of equal widths - using a different html layout

(though not sure it's the best solution)

Three Column Layout

This slide has three columns of equal widths

Make a Panel of Images

Make a Panel of Images

Panel is on one side and the text on the other

Figure captions

Adding in a caption to an image is pretty easy too using the <figure> and <figcaption> HTML tags...

Figure captions

A more simple way may be to use <span class="footnote"> -

Roman Mosaic. Source: wikipedia.com

Embedding a youtube video

You may find that this does not work locally but will in a browser...

Video files

We've found that you can also use links to mp4 video files using the <video controls> HTML tag...

/video>

Video files

Saving the same mp4 video file to the assets/img folder also works using the <video controls> HTML tag...

/video>

Backgrounds

"soothe"

"alert"

"mint"

"blackout"

"whiteout"

"sunset"

And finally a custom one in /assets/css/custom.css.