Figure

Load images progressively with blurry placeholders.

HTML attributes:

alt,

class,

src

Custom attributes:

attr,

attrlink,

caption,

link,

linktarget,

lqipsrc,

title

With progressive image placeholder:

{{< figure
  alt="Artistic map"
  src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
  lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
  title="Map of Bali in Watercolor"
  attr="Stamen Design"
  attrlink="https://maps.stamen.com/"
>}}

Artistic map — **Map of Bali in Watercolor**
Stamen Design

Above as a Snippet used in a Custom Layout:

{{ partial "components/figure.html" (dict "alt" "Artistic map" "src" "/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" "lqipsrc" "/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" "title" "Map of Bali in Watercolor" "attr" "Stamen Design" "attrlink" "https://maps.stamen.com/") }}

See Figures in Hugo for Hugo-specific implementation.