47 lines
1.5 KiB
Markdown
47 lines
1.5 KiB
Markdown
+++
|
|
title = "Figure"
|
|
description = "Load images progressively with blurry placeholders."
|
|
categories = ["experience"]
|
|
tags = ["performance", "images", "graphics"]
|
|
html_attributes = ["class", "alt", "src"]
|
|
custom_attributes = ["lqipsrc", "caption", "link", "linktarget", "attr", "attrlink", "title"]
|
|
snippets_used = ["external"]
|
|
notes = [
|
|
"review 'lazy-loading' if this page is modified"
|
|
]
|
|
[[copyright]]
|
|
owner = "Josh Habdas"
|
|
date = "2019"
|
|
license = "agpl-3.0-or-later"
|
|
+++
|
|
|
|
With progressive image placeholder:
|
|
|
|
```html
|
|
{{</* 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/"
|
|
*/>}}
|
|
```
|
|
|
|
{{< figure
|
|
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/"
|
|
>}}
|
|
|
|
Above as a [Snippet](/feature/snippets/) used in a [Custom Layout](/feature/custom-layouts/):
|
|
|
|
```go-html-template
|
|
{{ 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 {{< external href="https://gohugo.io/content-management/shortcodes/#figure" text="Figures in Hugo" />}} for Hugo-specific implementation.
|