↓Skip to main content
  1. Snippits/
  2. Blowfish Exemplars/
  3. Blowfish Shortcodes/

Figure

<time datetime="2023-06-25 00:00:00 &#43;0000 UTC">June 25 2023</time><span class="px-2 text-primary-500">&middot;</span><time datetime="2024-02-20 16:00:25 -0600 CST">Updated: February 20 2024</time><span class="px-2 text-primary-500">&middot;</span><span>302 words</span><span class="px-2 text-primary-500">&middot;</span><span title="Reading time">2 mins</span>
Blowfish Shortcodes Figure
Hoof & Paw
The ART in Heart
Hoof & Paw
Crystalini Partum a Canis Stercore
Table of Contents
blowfish shortcodes - This article is part of a series.
🐡 Shortcodes
figure:
add images to your content

Blowfish 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.

Blowfish 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="abstract.jpg"
  alt="Abstract purple artwork"
  caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
>}}

OR

![Abstract purple artwork](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.

blowfish shortcodes - This article is part of a series.