Custom Slide Layout

You can also create your own custom layout by creating an HTML template that uses Handlebars as the templating engine. Define the relative path to the template in the customLayout property in the front matter section of the slide.

All slide properties will be passed to the template, and you can use them in your custom layout by using the following syntax:

{{metadata.<property>}}

For the slide content, you can use the {{{content}}} property to render the content of the slide.

Custom layout example

custom-layout.html

<div>
  {{#if metadata.title}}<h1>{{metadata.title}}</h1>{{/if}}
  <div class="content">
    {{{content}}}
  </div>
</div>

Using a custom layout

To use a custom layout, you can specify the path to the layout file in the front matter section of the slide:

slide-with-custom-layout.md

---
customLayout: "custom-layout.html"
title: My custom layout
---

# This is my custom layout

Outcome of the custom layout

<div>
  <h1>My custom layout</h1>
  <div class="content">
    <h1>This is my custom layout</h1>
  </div>
</div>

Images, helpers and styles

The template can use these values and helpers next to the slide properties:

• Images: a relative src of an <img> resolves from the workspace root, so <img src="{{metadata.imageSrc}}" /> works with imageSrc: .demo/assets/me.jpg. A CSS url() is not resolved for you; use {{metadata.webViewUrl}} as the base URL of the workspace: background-image: url('{{metadata.webViewUrl}}/{{metadata.imageSrc}}');.
• eq: compare two values, for example to switch between variants of the layout: {{#if (eq metadata.position "left")}}photo-left{{/if}}.
• date: today’s date, or with a format {{date "d MMM yyyy"}}. To use the date property of the slide, call it inside the slide properties: {{#with metadata}}{{date "d MMM yyyy"}}{{/with}}. The format tokens are listed on the header and footer page.

.demo/layouts/about-me.hbs

<style>
  .about-me__photo {
    background-image: url('{{metadata.webViewUrl}}/{{metadata.imageSrc}}');
  }
</style>

<div class="about-me {{#if (eq metadata.position "left")}}about-me--left{{/if}}">
  <div class="about-me__photo"></div>
  <div class="about-me__info">
    <h1>{{metadata.name}}</h1>
    {{#if metadata.job}}<p>{{metadata.job}}</p>{{/if}}
    {{{content}}}
  </div>
</div>

Slide using the about-me layout

---
customLayout: .demo/layouts/about-me.hbs
name: Jane Doe
job: Developer Advocate
position: left
imageSrc: .demo/assets/jane.jpg
---

Keep the styles of the layout in your custom theme, and only put values from the front matter in a <style> block of the template.

Layout errors

When the layout file can’t be found, or its Handlebars template is invalid (for example an {{#if}} block without a closing {{/if}}), the slide shows an error with the path of the layout and the error message instead of the slide content. The same error is written to the Demo Time output channel (View > Output, then select Demo Time).

You don’t have to open the slide to find these errors: the Problems panel reports a missing or invalid layout on the customLayout line of the slide file. See problems in slide files.

This also applies to the slide header and footer templates.