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
.
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
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.
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 |
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 thetemplates
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.
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;
}
}