Figure

🦍 Shortcodes
figure:: add images to your content

Congo includes a figure shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.

When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions.
If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.

The figure shortcode accepts six parameters:

Parameter	Description
`src`	Required. The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a page resource bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory.
`alt`	Alternative text description for the image.
`caption`	Markdown for the image caption, which will be displayed below the image.
`class`	Additional CSS classes to apply to the image.
`href`	URL that the image should be linked to.
`default`	Special parameter to revert to default Hugo `figure` behaviour. Simply provide `default=true` and then use normal Hugo shortcode syntax.

Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:

![Alt text](image.jpg "Image caption")

Example #

{{< figure
  src="img/abstract.jpg"
  alt="Abstract purple artwork"
  caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
>}}

![Abstract purple artwork](img/abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")

Abstract purple artwork — Photo by Jr Korpa on Unsplash

{{< figure
  src="https://dog.wolfspyre.io/wplimgs/ManWhoInventedDynamite.jpg"
  alt="Man who invented Dynamite" caption="Man who invented Dynamite (hosted on dog.wolfspyre.io)"
>}}

Example external asset reference #

Man who invented Dynamite (hosted on dog.wolfspyre.io)

It’s worth mentioning that this may be used to reference video assets as well.