Because no Markdown element corresponds to the complex HTML <figure> tag, we need this shortcode for self-contained images.

Hugo already provides a figure shortcode and Perplex overrides it. The original syntax remains valid with one exception. The Perplex shortcode allows to write a caption in Markdown between the starting and closing tag.

When there is no shortcode closing tag, we need to add a slash to the last angled bracket, to mark the shortcode as self-closing:

{{< figure src="image" />}}

Should we miss the self-closing slash, Hugo cannot warn us. It will treat the following Markdown as the expected caption and produce a probably very garbled result.

Syntax

You’ll find the syntax for Hugo’s built-in figure in the docs. The Perplex version offers the same set of named parameters. Because it tends to get very long and error-prone, Perplex offers an alternative syntax using Hugo’s page resources.

Class Attributes

Attribute(s)MobileTwo columns≥ Three columns
tiny12 float right12 float right12 float right
smallfull1 float right1 float right
small leftfull1 float left1 float left
mediumfullfull112 float right
largefullfull2 left
large rightfullfull2 float right
xlargefullfullfull

Layout

Tiny

Named parameter
Tiny figure on the right

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life. One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Small

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life. One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Medium

This size is the default for images with a landscape ratio.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life. One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

Large (default)

Extra large

Large