Layouts

Interactive Docs, UseR 2014

Ramnath Vaidyanathan

A layout is a mustache template that specifies the markup to render a slide

Journey of a Slide

Slide

--- {class: class1, bg: yellow, id: id1}

## Slide Title

Slide Contents

Slide

--- {class: class1, bg: yellow, id: id1}

## Slide Title

Slide Contents

Properties

Slide

--- {class: class1, bg: yellow, id: id1}

## Slide Title

Slide Contents

Title

Slide

--- {class: class1, bg: yellow, id: id1}

## Slide Title

Slide Contents

Content

Payload

$html
[1] "<h2>Slide Title</h2>\n\n<p>Slide Contents</p>\n"

$header
[1] "<h2>Slide Title</h2>"

$level
[1] "2"

$title
[1] "Slide Title"

$content
[1] "<p>Slide Contents</p>\n"

$class
[1] "class1"

$bg
[1] "yellow"

$id
[1] "id1"

Layout

<slide class="{{ slide.class }}" id="{{ slide.id }}" 
    style="background:{{{ slide.bg }}};">
  <hgroup>
    {{{ slide.header}}}
  </hgroup>
  <article>
    {{{ slide.content }}}
  </article>
</slide>

Rendered

<slide class="class1" id="id1" style="background:yellow;">
  <hgroup>
    <h2>Slide Title</h2>
  </hgroup>
  <article>
    <p>Slide Contents</p>

  </article>
</slide>

Slide Title

Slide Contents

Custom Layouts

Carousel

--- {tpl: carousel, class: span12}

## Carousel


*** {class: active, img: "../01/assets/img/split.svg"}

Image 1

*** {img: "../01/assets/img/apply.svg"}

Image 2

Carousel


 --- {tpl: carousel, class: span12}

 ## Carousel


 *** {class: active, img: "../01/assets/img/split.svg"}

 Image 1

 *** {img: "../01/assets/img/apply.svg"}

 Image 2

Properties

Carousel


 --- {tpl: carousel, class: span12}

 ## Carousel


 *** {class: active, img: "../01/assets/img/split.svg"}

 Image 1

 *** {img: "../01/assets/img/apply.svg"}

 Image 2

Title

Carousel


 --- {tpl: carousel, class: span12}

 ## Carousel


 *** {class: active, img: "../01/assets/img/split.svg"}

 Image 1

 *** {img: "../01/assets/img/apply.svg"}

 Image 2

Blocks

layout

 ---
 layout: slide
 ---

 {{{ slide.content }}}
 <div id="{{slide.id}}-carousel" class="carousel slide {{slide.class}}">
   <!-- Indicators -->
   <ol class="carousel-indicators">
     {{# slide.blocks }}
     <li data-target="#{{slide.id}}-carousel" data-slide-to="{{num}}" class="{{class}}"></li>
     {{/ slide.blocks }}
   </ol>
   <!-- Wrapper for slides -->
   <div class="carousel-inner">
     {{# slide.blocks }}
     <div class="item {{class}}">
       <img src="{{img}}" alt="{{alt}}">
       <div class="carousel-caption">{{{ content }}}</div>
     </div>
     {{/ slide.blocks }}
   </div>
   <!-- Controls -->
   <a class="left carousel-control" href="#{{slide.id}}-carousel" data-slide="prev">&lsaquo;</a>
   <a class="right carousel-control" href="#{{slide.id}}-carousel" data-slide="next">&rsaquo;</a>
 </div>

view

Create Carousel

Your Turn

Basic

  1. Open the file demo/layouts/carousel/index.Rmd.
  2. Run slidify("index.Rmd").
  3. Open index.html.

Intermediate

  1. Add a second slide displaying a carousel of 4 images.
  2. Modify the carousel layout.

Notes

Properties

Slide properties are key-value pairs that are passed to the layout. You can specify class, id and bg and style the slide, either by using built in classes, or specifying additional css.

--- {class: [class1, class2], id: id}

You can also use symbolic css style prefixes for frequently used properties. For instance, a dot indicates class, a hash refers to id and an ampersand identifies a layout.

--- .class1 .class2 #id

Properties

Variable Description
slide.title The title of the slide with no markup
slide.header The title of the slide with markup
slide.level The title header level (h1 - h6)
slide.content The contents of the slide sans header
slide.html The contents of the slide with header
slide.num The number of the slide
slide.id The id assigned to the slide
slide.class The class assigned to the slide
slide.bg The background assigned to the slide
slide.myblock The slide block named myblock
slide.blocks The slide blocks which are not named
slide.rendered The rendered slide

Blocks

Blocks are slides nested within a slide, identified by three stars. Just like a slide, they can contain properties, title and content.

There are two types of blocks - named and unnamed. A block can be named by specifying the property {name: block1} (or using the symbolic shortcut {=block1}).

A block with the name block1 can be accessed in a slide layout as slide.block1. The title and content of this block can be accessed as slide.block1.title and slide.block1.content. Unnamed blocks are aggregated into the namespace slide.blocks.

Inheritance

Adding a Footer

<slide class="{{ slide.class }}">
  <hgroup>
    {{{ slide.header }}}
  </hgroup>
  <article>
    {{{ slide.content }}}  



  </article>
</slide>

Adding a Footer

<slide class="{{ slide.class }}">
  <hgroup>
    {{{ slide.header }}}
  </hgroup>
  <article>
    {{{ slide.content }}}  
   <footer class = 'logo'>
      <img src = 'path/to/logo'></img>
   </footer>
  </article>
</slide>

Adding a Footer

---
layout: slide
---    


    {{{ slide.content }}}  
   <footer class = 'logo'>
      <img src = 'path/to/logo'></img>
   </footer>

Your Turn

Using Layouts

Basic

  1. Open the file demo/layouts/index.Rmd.
  2. Modify the logo property to point to a logo of your choice.
  3. Run slidify("index.Rmd").
  4. Open index.html.

Intermediate

Modify the default slide layout at demo/layouts/assets/layouts/slide.html such that

  1. Every slide has a red line after the title.

Add DeckJS Extension

Introduction

This is a demo in response to the following question on SO

How I can include the use of the extension deck.automation.js when I create a document Rmarkdown-slidify-deck.js in RStudio? It is to show a presentation on a screen with statistical content without interaction from anyone, and when finished will start automatically.

Step 1: Initialize Deck

Initialize the slide deck using author("mydeck") and modify index.Rmd to

---
title       : Add DeckJS Extension
author      : Ramnath Vaidyanathan
framework   : deckjs
mode        : selfcontained
---

Run slidify("index.Rmd") to create a basic deck. Setting mode: selfcontained in the YAML front matter will ensure that the libraries folder is copied locally.

We will now download the plugin and incorporate it into libraries. If for some reason, you are unable to download it, you can work with a pre-rendered copy in demos/layouts/deckext.

Step 2: Download Extension

Download the extension automatic and add it to libraries/frameworks/deck/extensions. You can do it manually, or run the following R code from your slide directory.

require(downloader)
download(
  'https://github.com/rchampourlier/deck.automatic.js/archive/master.zip', 
  'automatic.zip'
)
unzip('automatic.zip')
slidify:::copy_dir(
  "deck.automatic.js-master/automatic", 
  "libraries/frameworks/deckjs/extensions/automatic"
)
unlink("automatic.zip")
unlink("deck.automatic.js-master")

Step 3: Modify Config.yml

Modify config.yml in libraries/frameworks/deckjs/config.yml so that automatic is added to the list of extensions.

deckjs:
  theme: swiss
  transition: horizontal-slide
  extensions: [goto, hash, menu, navigation, scale, status, automatic]

Step 4: Add Snippet

Modify libraries/frameworks/deckjs/partials/snippet.html by replacing the section at the end of snippet.html that initializes the deck, to the following. You can configure the settings for automatic in this snippet.

<!-- Initialize the deck -->
<script>
$(function() {
  // required only if the automatic extension is enabled.
  $.extend(true, $.deck.defaults, {
  automatic: {
    startRunning: true,    // true or false
    cycle: false,           // true or false
    slideDuration: 1000 // duration in milliseconds
  }})
  $.deck('.slide');
});
</script>

Step 5: Add Play/Pause (Optional)

If you wish to add play/pause control as described in the documentation for automatic, you will need to modify libraries/frameworks/deckjs/layouts/deck.html, by replacing the <body> with the following

<!-- Begin slides -->

{{{ page.content }}}
<div class='deck-automatic-link' title="Play/Pause">Play/Pause</div>

Step 6: Custom Duration

If you want to add custom slide durations, you will need to modify libraries/frameworks/deckjs/layouts/slide.html to

<section class="slide {{ slide.class }}" id="{{ slide.id }}" data-duration="{{ slide.duration}}">
  {{{ slide.header }}}
  {{{ slide.content }}}
</section>

To set the duration, you will need to add the duration property on the same line as the slide separator as YAML.

--- {duration: 5000}