Add paige/figure shortcode

This commit is contained in:
Will Faught
2022-12-24 18:42:28 -08:00
parent b1495c89c0
commit 7652ade1bb
2 changed files with 40 additions and 0 deletions

View File

@@ -449,6 +449,33 @@ title: Search
---
```
## Figures
The `paige/figure` shortcode provides a figure with a centered image and an optional centered caption.
The image and caption can optionally be displayed inline instead of centered.
The image has optional alt, title, width, and height attributes,
and can optionally be wrapped in an anchor. Only the image source parameter is required.
These are the named parameters with positions, listed in the order of their positions:
```go
{{< paige/figure
src="https://imgs.xkcd.com/comics/sandwich.png"
link="https://xkcd.com/149"
caption="My caption"
alt="My alt"
title="My title" >}}
```
These are the rest of the named parameters:
```go
{{< paige/figure
height=500
inline=false
width=500 >}}
```
## Customization
If `partials/paige-head-last.html` exists in the site, it is included at the end of the head tag.

View File

@@ -0,0 +1,13 @@
<figure {{ if eq (.Get `inline`) true }} class="figure"{{ else }} class="align-items-center d-flex flex-column"{{ end }}>
{{ $link := .Get 1 | default (.Get `link`) }}
{{ with $link }}
<a href="{{ . }}">
{{ end }}
<img{{ with (.Get 3 | default (.Get `alt`)) }} alt="{{ . }}"{{ end }} class="figure-img img-fluid"{{ with .Get `height` }} height="{{ . }}"{{ end }} src="{{ .Get 0 | default (.Get `src`) }}"{{ with (.Get 4 | default (.Get `title`)) }} title="{{ . }}"{{ end }}{{ with .Get `width` }} width="{{ . }}"{{ end }}>
{{ if $link }}
</a>
{{ end }}
{{ with (.Get 2 | default (.Get `caption`)) }}
<figcaption class="figure-caption">{{ . }}</figcaption>
{{ end }}
</figure>