Adding a Graphic

Adding a graphic to a Spectate project is essentially inserting a custom HTML file somewhere inside the story.

1. Open the Google Doc for the Spectate story. (It's highly recommended that you read about how the Google Docs to index.html pipeline works.)

2. Inside the body array (anywhere underneath the green text that says [+body]), paste a graphic object:

{.graphic}
  asset: YOUR_FILE.html
{}

Replace YOUR_FILE.html with the filename of your HTML file inside the src/ directory. If you want the graphic above the headline, paste the graphic object inside top (underneath the green text that says [+top]).

3. Run spectate download in the project directory.

4. In src/index.html, find the switch statement inside <div class="story"> (should be around line 45 for body and line 24 for top). Find the graphic case (<case n="'graphic'">). Add an <if> statement next to the existing ones. It should be of the form:

<if condition="item.value.asset === 'YOUR_FILE.html'">
  <include src="YOUR_FILE.html"></include>
</if>

5. Start the development server. The graphic should now show up on the page where you put it in the Google Doc.