Skip to content

Adding projects (carousel and pages)

Jared C Cunha edited this page Mar 5, 2019 · 5 revisions

How to add projects

  1. Create a .jpg or .gif image for the project in lowercase, replacing spaces with hyphens. The image must be a 1200px by 12000px square. The image will be for the carousel. You will use this image below.
  2. Save the image to the images folders
  3. Create a page in the _project-drafts directory. The file name for the page should be NNNN_project-name.md. Here is now the naming convention works. Below is a template to use for a new file.
---
# Page template info (DO NOT EDIT)
layout: default
banner_file: banner--people-projects-lg.svg
banner_file_mobile: banner--people-projects-sm.svg
project_page: true

# Carousel (Edit this)
carousel_title: "[ENTER TITLE HERE IN QUOTES]"
carousel_summary: "[ENTER SUMMARY HERE IN QUOTES]"
carousel_image_name: [IMAGE NAME HERE]

# Project detail page (Edit this)
title: "[PAGE TITLE HERE IN QUOTES]"
agency: AGENCY NAME HERE
permalink: projects/[project-name]
project_url: [OPTIONAL ENTER URL ex. (http://usds.gov)]

# Impact statement (Edit this or remove section if not needed)
impact_statement:
  - figure: "407"
    unit: "k"
    description: |-
      people doing getting what they need

  - figure: "200"
    unit: "%"
    description: |-
      success rate [link](http://google.com)

---

[WRITE ABOUT PROJECT HERE IN MARKDOWN]
  1. When the project page is ready, move the file into the _projects directory.

Impact statements

Impact statements or quick statistics that appear in the right sidebar of a detail page. There are three parts to an impact statement:

  • figure: This is simply a number. Several acceptable variations: "50", ">50", "+50", "~50"
  • unit: This is a separate field because the font size is a little smaller. The unit should be something like "k," "%, " or "M." This field is optional. If you don't use, remove the entire line.
  • description: Should be a very short blurb that explains the number above. The description is formatted for markdown so that you may use markdown syntax for links, bold text, italics, etc. Please avoid multiple paragraphs.

Impact statements should be written in a way the reads like a sentence. For example, if an impact statement snippet reads like:

  - figure: "50"
    unit: "%"
    description: |-
      people Increase in people accessing their benefits

The impact state will appear in the sidebar as:

You may have multiple impact statements on a project page.

Impact statements are optional. If you do not want to have an impact statement on a page, just remove the entire block.

Useful snippets

Project detail page content markdown. Though markdown has a few limitations, you may use these snippets provide additional styling for content such as pull quotes and images.

Pull quotes

Pull quote with citation

<blockquote class="pullquote" markdown="1">
This is the text of the pull quote
 <footer>– citation for pull quotes</footer>
</blockquote>

Pull quote without citation

<blockquote class="pullquote" markdown="1">
This is the text of the pull quote
</blockquote>

Images

Images should be uploaded to the images folder. In the examples below, you'll need to remember the filename. DO NOT modify the ../images/ part of ![](../images/image-name.jpg)

Image with caption

![](../images/image-name.jpg)
*This is the caption*

Image without caption Image with caption

![](../images/image-name.jpg)