Chase to main content
  1. Snippits & Exemplars/
  2. Congo Exemplars/
  3. Congo's Shortcodes/

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/)"
>}}

OR

![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
Man who invented Dynamite (hosted on dog.wolfspyre.io)

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