Layouts

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.

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

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.

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.

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.

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.

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")

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]

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>