Image Short Code

Back

Images

Images are stored on an S3 bucket and uses a URL lookup pattern that pulls from a yaml file to get the name of the image.

Overview

Not all images have shortcodes in Hugo so they cannot be used in content pages.

name	description	shortcode
img	used on content pages	yes
img-right	used on content pages for justified right placement	yes
img-featured	used on card-news.html and card-stream.html, not a shortcode	no
img-flexible	used on guides content pages	yes
legacy-img	used in content from 2012-2019, do not use	yes
legacy-img-right	used in content from 2012-2019, do not use	yes
img-bw	not used	no

Guidance

Most of the time you'll be using img and img-right short codes for content pages. Using the align and inline fields for the img short code gives the most flexibility for displaying images within content.

Note

img-right can be replaced with img align="right" in most cases

img

field	values	function
src	"image-name"	the name of the image, can be found in the yaml file as the uid field
alt	"alt text goes here"	alt text for accessibility and screen readers
align	left, center, right	set the horizontal alignment for an image
inline	true	to get two images paired next to each other, use align="center" and inline="true"

img-right

field	values	function
src	"image-name"	the name of the image, can be found in the yaml file as the uid field
alt	"alt text goes here"	alt text for accessibility and screen readers

Examples

Basic Image

Simplest use of adding an image to content. This will add the image as a "paragraph" taking up the entire width of the page.

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

Example

Live page: Data.gov launches metrics tools.

Usage

• creates a new block in the content flow for the image

Align Right

Justifying an image to the right will allow text to wrap around the image.

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

Example

Live page: Building a culture of customer experience across government.

Use Cases

• author pics
• smaller images that compliment a block of content

Align Left

Justifying an image to the left will allow text to wrap around the image.

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

Example

Live page: Shedding Light on Underserved Users through Research.

Use Cases

• author pics
• smaller images that compliment a block of content

Align Center

Setting align="center" with inline="true" will allow two images to sit right next to each other.

{{< img src="UID" align="center" inline="true" alt="ALT_TEXT" >}}
{{< img src="UID" align="center" inline="true" alt="ALT_TEXT" >}}

Example

Live page: Determining the true value of a website: A GSA case study.

Use Cases

• pairs related images on same line

Image Right

Warning

The same functionality can be achieved with the img short code above

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

Example

Live page: Spring 2024 Community Summit.

Use Cases

Use for images that need to be aligned to the right of content.

• author images
• agency logos

Image Flexible

Used mostly on the guides content pages. Provides a small option that will use the 600px sized version instead of the full sized image to fit within the content.

{{< img-flexible src="UID" small="true">}}

Example


Live page: Design concepts guide: designed things.

Use Cases

Useful for selecting normal image size or smaller 600px version depending on content needs.

• guide content pages