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/post_config.py 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.

IDs

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:

Go into the posts repo on your local machine, find the post you are working on, and navigate to the templates folder.
In the slides folder, create a new .html file with the name of your template, i.e. essay.html
Navigate back to the root of your post, and go to the less folder.
In the slides folder, create a new .less file with the name of your template, i.e. essay.less
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;
    }
}