Layouts

Slidify Workshop

Ramnath Vaidyanathan

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

Edit Home Comment

Journey of a Slide

Edit Home Comment

Slide

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

## Slide Title

Slide Contents

Edit Home Comment

Slide

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

## Slide Title

Slide Contents

Properties

Edit Home Comment

Slide

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

## Slide Title

Slide Contents

Title

Edit Home Comment

Slide

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

## Slide Title

Slide Contents

Content

Edit Home Comment

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"

Edit Home Comment

Layout

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

Edit Home Comment

Rendered

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

  </article>
</slide>

Edit Home Comment

Slide Title

Slide Contents

Edit Home Comment

Inheritance

Edit Home Comment

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>

One way is to create a new slide layout adding the custom footer after {{{ slide.content }}}, saving it to assets/layouts and using it as a custom layout.

However, this is not efficient for two reasons.

It is not DRY and repeats code unnecessarily.
When the default slide layout is modified, you need to manually modify the custom layout to ensure that layouts are in sync. This could happen when you decide to use a different HTML5 slide framework, which has a different markup for slides. This is where layout inheritance comes to play.

Note that while defining your custom slide layout, you are essentially replacing the {{{ slide.content }}} placeholder in the slide layout by {{{ slide.content }}} + footer. Slidify provides a mechanism, where layouts can inherit from a parent layout, thereby simplifying the template considerably and keeping thing DRY.

Adding a Footer

---
layout: slide
---    


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

Your Turn

Using Layouts

Basic

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

Intermediate

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

Every slide has a red line after the title.

Edit Home Comment

Custom Layouts

Edit Home Comment

Carousel

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

## Carousel


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

Image 1

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

Image 2

Edit Home Comment

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

Edit Home Comment

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

Edit Home Comment

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

Edit Home Comment

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>

Edit Home Comment

view

Image 1

Image 2

‹ ›

Edit Home Comment

Create Carousel

Your Turn

Basic

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

Intermediate

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

Edit Home Comment

Notes

Edit Home Comment

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

Edit Home Comment

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

Edit Home Comment

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.

Edit Home Comment