Add paige/figure shortcode
This commit is contained in:
27
README.md
27
README.md
@@ -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.
|
||||
|
13
layouts/shortcodes/paige/figure.html
Normal file
13
layouts/shortcodes/paige/figure.html
Normal 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>
|
Reference in New Issue
Block a user