Creating Slideshows - nprapps/lookatthis GitHub Wiki

A new slideshow post requires a copy spreadsheet. Copy the default spreadsheet and name it $SLUG COPY. Then, grab the key (found in the Google Docs URL after &key=). That key will go in the posts/$SLUG/ file in the variable COPY_GOOGLE_DOC_KEY.

Creating new slides for a slideshow

The default COPY document has several sheets. You will create new slides in the content sheet. Each slide is one row in this sheet. Each row includes:

  • id: a unique ID for the slide (see below for guidelines)
  • template: the name of the slide template
  • text1, text2, text3: fields for the various pieces of text your template requires (see below for guidelines)
  • media: images or video that your template will use (not required)
  • color: a background color for the slide (not required)

You may use <em> and <strong> in any of the text fields, when appropriate. You should avoid using <h1> or other context-specific tags.


Each slide requires a unique ID, defined in the id column of the content spreadsheet. Each ID should use good slug style: all lowercase, descriptive of the content and uses dashes between words. For example:

  • Bad: slide1, slide2, slide3

  • Good: names that describe the content on the page.

  • Bad: To The Border, toTheBorder, totheborder

  • Good: to-the-border

Slide templates

Each slideshow comes with five default templates.

  • slide: A default slide with no special styles.
  • titlecard: A slide for dividing sections of a post, includes title and subtitle.
  • start: A titlecard that includes a button to prompt users to begin the experience.
  • quote: A slide for including quotations with an image, i.e. Borderland Portraits.
  • fixed-image: A slide for images that must preserve aspect ratio, i.e. maps.
  • next-post: A slide that should be used at the end of a post to promote the share panel and the next post.

Text fields

template text_1 text_2 text_3
slide Text to go in the center of slide. Requires <p> tags. N/A N/A
titlecard Title Subtitle N/A
start Title Subtitle Text for begin button
quote Quotation Citation N/A
fixed-image Text to appear in upper-right corner N/A N/A
next-post The title of the next post Caption Link to next post

Creating a new template

New templates should be created when the content requires a slide with a different markup structure than any of the existing templates.

To create a new template, follow these steps:

  1. Go into the posts repo on your local machine, find the post you are working on, and navigate to the templates folder.
  2. In the slides folder, create a new .html file with the name of your template, i.e. essay.html
  3. Navigate back to the root of your post, and go to the less folder.
  4. In the slides folder, create a new .less file with the name of your template, i.e. essay.less
  5. Finally, in app.less, add an import line that imports your new .less file, i.e. @import "./slides/essay.less".

You can now use this template in the template column of your content spreadsheet.

Making style adjustments

If a slide needs style adjustments but not a new markup structure, use the id of the slide to make adjustments in CSS. Open the nudges.less file in your post's less directory to make these adjustments. For example:

#to-the-border {
    p {
        font-size: 20px;
⚠️ ** Fallback** ⚠️