Skip to content

Hugo shortcodes

Jump to bottom
James Mejia edited this page Apr 18, 2023 · 51 revisions

Hugo Shortcodes vs. Partials

Shortcodes are for displaying content on a page and can be dropped in on any page as needed. Partials are for displaying content in a template and would show up on every instance of that page.

So, if you wanted to show a specific author bio on a single event, you would create and use an Author shortcode.

If you wanted to display an author bio for EVERY event, you would create an Author partial and add that to the Event template.

Shortcodes are for use in content. Partials are for use in templates.
See Hugo's built-in shortcodes

Digital.gov shortcodes

Images

{{< img src="UID" alt="ALT_TEXT" >}}

  • example: {{< img src="peace-corps-customer-satisfaction" alt="A bar graph showing User Satisfaction: Task Completion vs. Content Comprehension" >}}

Images, Right Aligned

{{< img-right src="UID" alt="ALT_TEXT" >}}

  • example: {{< img-right src="peace-corps-customer-satisfaction" alt="A bar graph showing User Satisfaction: Task Completion vs. Content Comprehension" >}}

Facebook video

{{< fb-video "FULL_VIDEO_LINK" >}}

  • example: {{< fb-video "https://www.facebook.com/nih.nccih/videos/1405263649496849/" >}}

YouTube embed

{{< youtube EMBED_STRING >}}

  • example: {{< youtube iLD4Bu6I2I8 >}}

Instagram

{{< instagram PHOTO_ID HIDECAPTION* >}}

  • example: {{< instagram BWNjjyYFxVx >}}
  • example with hidden caption: {{< instagram BWNjjyYFxVx hidecaption >}}

Tweet

  • {{< tweet USER TWEET_ID >}}
  • example: {{< tweet user="Digital_Gov" id="1484206760823042055" >}}

Internal link

  • {{< ref "DESTINATION" >}}
  • by filename: {{< ref "communities.md" >}}
  • by anchor: {{< ref "communities.md#social" >}}
  • by relative url: {{< ref "author/nirmala-ramprasad" >}}
    • This is useful if the linked file is a generated file (like an author page) with no .md file to reference

External link

No shortcode required

Use standard markdown: [LINK_TEXT](LINK_URL)

Legacy image

  • {{< legacy-img src="IMAGE_PATH" alt="ALT_TEXT" >}}
  • example: {{< legacy-img src="/2015/09/600-x-147-howto-icons-left-text.jpg" alt="Icons from FCPCCS toolkit" >}}

Legacy image right

  • {{< legacy-img-right src="IMAGE_PATH" alt="ALT_TEXT" >}}
  • {{< legacy-img-right src="2016/07/250-x-444-FEMA-app-Heat-Advisory-pg-1-for-Washington-DC-area-July-25th-2016.jpg" alt="Screen capture of the FEMA app's Heat Advisory for the Washington, DC area on July 25, 2016." >}}

Legacy file

  • {{< legacy-file "FILE_PATH" >}}
  • example: {{< legacy-file "2014/07/metadata-in-drupal-epa.pdf" >}}

iFrame Embed

Embed an iframe from C-SPAN into the document. Provide the src url and title attributes.

{{< cspan-iframe src="https://www.c-span.org/video/standalone/?512480-1/confirmation-hearing-gsa-administration-intelligence-agencies-nominees" title="Confirmation Hearing for GSA Administration and Intelligence Agencies Nominees" >}}
iframe-shortcode-screenshot

Accordion

For the accordion shortcode, use USWDS icons to pass in the name of the icon. You must use the name of the icon from the list otherwise it will not display.

  • {{< accordion kicker="Last update" title="April 1, 2020" icon="unfold_more" >}} inner text of what you want to collapse {{< /accordion >}} accordion expanded

Button

  • Ex. {{< button href="https://usdigitalregistry.digitalgov.gov/admin" text="Register and Manage Accounts" >}}

Note

Note Shortcode — the following are all the iterations of the "note" shortcode and how to use them.

Note — {{< note >}} text goes here... {{< /note >}}

A note can also include a button: {{< note button-text="submit">}} text goes here... {{< /note >}}

And has several subtypes with their own icons.

Activity — {{< note "activity" >}} Activity text goes here... {{< /note >}}

Action — {{< note "action" >}} Action text goes here... {{< /note >}}

Alert — {{< note "alert" >}} Alert text goes here... {{< /note >}}

Comment — {{< note "comment" >}} > Comment goes here as a blockquote

additional text goes here... {{< /note >}}

When using an img-right with a note, the code should be on the same line to render properly.

{{< note "comment" >}}{{< img-right src="anil-chaudry-veterans-day-2021-600" >}}

Card Quote

  • Ex. {{< card-quote text="Individual commitment to a group effort—that is what makes a team work, a company work, a society work, a civilization work." cite="Vince Lombardi, National Football League (NFL) coach" >}}

Asset Image

asset-image shortcode {{< asset-img path="/img/digitalgov-logo-black.svg" alt="" width="220" >}}

Screen Shot 2020-06-17 at 2 40 12 PM

asset-image shortcode dark {{< asset-img path="/img/digitalgov-logo-white.png" alt="" width="220" bg="dark" >}}

Screen Shot 2022-07-14 at 3 28 54 PM

Box

box shortcode:

{{< box >}} Box with no color {{< /box >}}

Screen Shot 2020-06-18 at 2 03 35 PM

{{< box color="base" >}} Box with base {{< /box >}}

Screen Shot 2020-06-18 at 1 52 25 PM

{{< box color="base-light" >}} Box with base-light {{< /box >}}

Screen Shot 2020-06-18 at 2 02 59 PM

{{< box color="base-dark" >}} Box with base-dark {{< /box >}}

Screen Shot 2020-06-18 at 1 52 09 PM

Footnote

{{< footnote >}} Some footnote text {{< /footnote >}}

Author bio

{{< authors-bio "authors-id" >}} eg - {{< authors-bio "kelley-holden" >}}
This will display the Author Display Name as a level H3 heading along with their agency if one exists. The bio is displayed in a <p> (paragraph) element.

If the Author does not have a bio then this component will not display.

The component does not include a heading such as 'About the Author' or 'About the Speaker' so it is up to you to add this as appropriate. When adding the heading use an H2 level to maintain the correct document outline for accessibility. Example:

## About the Speaker
{{< author-bio "dan-williams" >}}
Screen Shot 2021-03-18 at 12 15 04 PM

## _About the Author_
{{< author-bio "julia-elman" >}}

Screen Shot 2021-03-18 at 8 51 35 PM

Checklist

Use a checklist for creating a list of checkbox items that is not a web based checklist but for print.

  1. Use the {{ < checklist >}} shortcode when you want to have a printable checklist
  2. Use an H2 (**) before the {{ < checklist >}}, the {{ < checklist >}} will generate a top gray border
  3. Nest {{< checkbox >}} shortcodes within the {{< checklist >}} to create a list of checkbox items
  4. Use {{< checkbox-sublist-item >}} will create a bullet point sublist item
  5. Follow the same nesting structure as below, don't indent {{< checkbox-sublist-item >}} in the {{< checkbox-sublist >}} shortcode, else it will break
  ## Header goes here
  {{< checklist >}} 

    {{< checkbox >}}Dress professionally (business casual).{{< /checkbox >}} 
    {{< checkbox >}}Speak slowly and clearly.{{< /checkbox >}} 
    {{< checkbox >}}Keep your camera on. This allows people to see you, including those who lip read.{{< /checkbox >}} 
    {{< checkbox >}}Announce the slide number instead of saying &#34;Next slide.&#34;"{{< /checkbox >}} 
    {{< checkbox >}}To meet [Section 508](https://www.section508.gov/manage/laws-and-policies) requirements for accessibility, provide “audio descriptions” as follows:" {{< /checkbox >}}

    {{< checklist-sublist >}}
    {{< checkbox-sublist-item >}} Use large text. {{< /checkbox-sublist-item >}}
    {{< checkbox-sublist-item >}}Say your name each time you begin to speak, or announce the new speaker when there is a speaker change{{< /checkbox-sublist-item >}}
    {{< checkbox-sublist-item >}}Describe all images on the slides{{< /checkbox-sublist-item >}}
    {{< checkbox-sublist-item >}}Speak to the text on the slides including any links referenced on the slides{{< /checkbox-sublist-item >}} 
    {{< checkbox-sublist-item >}}Describe the information that is important for understanding the content{{< /checkbox-sublist-item >}} 
    {{< checkbox-sublist-item >}}Try not to read your slides word-for-word{{< /checkbox-sublist-item >}}
    {{< /checklist-sublist >}}

  {{< /checklist >}}

Do-Don't Table

When needing to provide a list of do's and don't, use the do-dont-table:

Screen Shot 2023-03-21 at 9 19 25 AM

When setting up a do-dont-table, you need to make sure you have the correct formatting.

  1. Start with a a do-dont-table
  2. Add a caption to do-dont-table that describes the table contents
  3. Create an opening and closing {{< row >}}
  4. Nest do-row and dont-row inside
  5. Place text, markdown and shortcodes between the {{ do-row }} & {{ dont-row }}
{{< do-dont-table caption="This is a table" >}}
  {{< row >}}
    {{< do-row >}} [Multilingual](https://digital.gov/communities/multilingual/)
    {{< /do-row >}}
    {{< dont-row >}} Don't follow these bad
    practices{{< /dont-row >}}
  {{< /row >}}

  {{< row >}}
    {{< do-row >}} open &#34;the door&#34; for those who need a hand{{< /do-row >}}
    {{< dont-row >}} Don't follow these bad practices{{< /dont-row >}}
  {{< /row >}}

  {{< row >}}
    {{< do-row >}} read `the directions` before using{{< /do-row >}}
    {{< dont-row >}}
      forget {{< highlight >}}to wash your hands{{< /highlight >}} for 20 seconds
    {{< /dont-row >}}
  {{< /row >}}
{{< /do-dont-table >}}

🎉Questions? Email digitalgov@gsa.gov

Clone this wiki locally