Figure

Renders an image inside a <figure> element with optional caption, link, and styling. Builds on Hugo’s built-in figure shortcode with Bootstrap classes for the theme’s look and feel.

A mountain landscape — A sample figure with a caption

Parameters

Parameter	Description
`src`	Image URL. Required.
`alt`	Alternative text. Falls back to `caption` (with markdown stripped) when omitted.
`caption`	Caption text rendered below the image. Supports markdown.
`title`	Optional title rendered above the caption.
`attr`	Attribution text rendered after the caption. Supports markdown.
`attrlink`	URL wrapping the `attr` text.
`link`	URL wrapping the image.
`target`	`target` attribute for the `link` anchor (e.g. `_blank`).
`rel`	`rel` attribute for the `link` anchor.
`class`	CSS classes applied to the `<figure>` element. Defaults to `col-xs-24`.
`imgClass`	CSS classes applied to the `<img>` element. Defaults to `img-responsive`.
`width`	`width` attribute on the `<img>` element.
`height`	`height` attribute on the `<img>` element.
`view_full_size`	When truthy, renders a “View full size” link that opens the source image in a new tab. The link is only visible on extra small screens (`xs` breakpoint).

Examples

Basic usage

{{< figure src="https://picsum.photos/id/1018/800/450" alt="A mountain landscape" >}}

With caption and title

{{< figure
  src="https://picsum.photos/id/1018/800/450"
  title="Mountain"
  caption="A sample figure with a caption"
  attr="Lorem Picsum"
  attrlink="https://picsum.photos/"
>}}

View full size link

For images that are hard to read at small screen widths (e.g. complex diagrams with fine-grain text), set view_full_size="true" to render a “View full size” link below the image. The link points to the image source and opens it in a new tab. It is only visible at the xs breakpoint — resize your browser window to see it.

{{< figure
  src="https://picsum.photos/id/1018/800/450"
  caption="Complex diagram"
  view_full_size="true"
>}}