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:
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
{{< 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 #
It’s worth mentioning that this may be used to reference video assets as well.