Overhaul figures
This commit is contained in:
Will Faught
@@ -1,70 +1,304 @@
|
||||
---
|
||||
title: "Gallery Shortcodes"
|
||||
date: "2023-01-01"
|
||||
description: "Demonstration of the `paige/gallery` and `paige/gallery/item` shortcodes."
|
||||
description: Demonstration of the gallery shortcode.
|
||||
title: Gallery Shortcode
|
||||
---
|
||||
|
||||
## `paige/gallery` shortcode
|
||||
See the images in the example site to understand how the below file patterns work.
|
||||
Resize the viewport as narrow and wide as you can to see the responsiveness.
|
||||
|
||||
### Grid display
|
||||
## Rows layout
|
||||
|
||||
{{< paige/gallery images="1*" caption="1 image" />}}
|
||||
{{< paige/gallery images="2*" caption="2 images" />}}
|
||||
{{< paige/gallery images="3*" caption="3 images" />}}
|
||||
{{< paige/gallery images="4*" caption="4 images" />}}
|
||||
{{< paige/gallery images="5*" caption="5 images" />}}
|
||||
{{< paige/gallery images="6*" caption="6 images" />}}
|
||||
{{< paige/gallery caption="All images" />}}
|
||||
Code:
|
||||
|
||||
### List display
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="1*.jpg" caption="1 image" /*/>}}
|
||||
```
|
||||
|
||||
{{< paige/gallery images="1*" caption="1 image" display="list" />}}
|
||||
{{< paige/gallery images="2*" caption="2 images" display="list" />}}
|
||||
{{< paige/gallery images="3*" caption="3 images" display="list" />}}
|
||||
{{< paige/gallery images="4*" caption="4 images" display="list" />}}
|
||||
{{< paige/gallery images="5*" caption="5 images" display="list" />}}
|
||||
{{< paige/gallery images="6*" caption="6 images" display="list" />}}
|
||||
{{< paige/gallery caption="All images" display="list" />}}
|
||||
Result:
|
||||
|
||||
## `paige/gallery/item` shortcode
|
||||
{{< paige/gallery images="1*.jpg" caption="1 image" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="2*.jpg" caption="2 images" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="2*.jpg" caption="2 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="3*.jpg" caption="3 images" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="3*.jpg" caption="3 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="4*.jpg" caption="4 images" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="4*.jpg" caption="4 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="5*.jpg" caption="5 images" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="5*.jpg" caption="5 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="6*.jpg" caption="6 images" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="6*.jpg" caption="6 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="*.jpg" caption="All images" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="*.jpg" caption="All images" type="grid" />}}
|
||||
|
||||
## Grid layout
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="1*.jpg" caption="1 image" type="grid" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="1*" caption="1 image" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="2*.jpg" caption="2 images" type="grid" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="2*" caption="2 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="3*.jpg" caption="3 images" type="grid" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="3*" caption="3 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="4*.jpg" caption="4 images" type="grid" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="4*" caption="4 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="5*.jpg" caption="5 images" type="grid" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="5*" caption="5 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="6*.jpg" caption="6 images" type="grid" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="6*" caption="6 images" type="grid" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="*.jpg" caption="All images" type="grid" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="*.jpg" caption="All images" type="grid" />}}
|
||||
|
||||
## Customization
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="1 image" */>}}
|
||||
{{</* paige/gallery image="*-1*.jpg" caption="Image 1" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="1 image" >}}
|
||||
{{< paige/gallery/item image="*-1*" caption="Image 1" >}}
|
||||
{{< paige/gallery image="*-1*.jpg" caption="Image 1" />}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="2 images" */>}}
|
||||
{{</* paige/gallery image="*-2*.jpg" caption="Image 1" /*/>}}
|
||||
{{</* paige/gallery image="*-3*.jpg" caption="Image 2" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="2 images" >}}
|
||||
{{< paige/gallery/item image="*-2*" caption="Image 1" >}}
|
||||
{{< paige/gallery/item image="*-3*" caption="Image 2" >}}
|
||||
{{< paige/gallery image="*-2*.jpg" caption="Image 1" />}}
|
||||
{{< paige/gallery image="*-3*.jpg" caption="Image 2" />}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="3 images" */>}}
|
||||
{{</* paige/gallery image="*-4*.jpg" caption="Image 1" /*/>}}
|
||||
{{</* paige/gallery image="*-5*.jpg" caption="Image 2" /*/>}}
|
||||
{{</* paige/gallery image="*-6*.jpg" caption="Image 3" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="3 images" >}}
|
||||
{{< paige/gallery/item image="*-4*" caption="Image 1" >}}
|
||||
{{< paige/gallery/item image="*-5*" caption="Image 2" >}}
|
||||
{{< paige/gallery/item image="*-6*" caption="Image 3" >}}
|
||||
{{< paige/gallery image="*-4*.jpg" caption="Image 1" />}}
|
||||
{{< paige/gallery image="*-5*.jpg" caption="Image 2" />}}
|
||||
{{< paige/gallery image="*-6*.jpg" caption="Image 3" />}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="4 images" */>}}
|
||||
{{</* paige/gallery image="*-7*.jpg" caption="Image 1" /*/>}}
|
||||
{{</* paige/gallery image="*-8*.jpg" caption="Image 2" /*/>}}
|
||||
{{</* paige/gallery image="*-9*.jpg" caption="Image 3" /*/>}}
|
||||
{{</* paige/gallery image="*-10.jpg*" caption="Image 4" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="4 images" >}}
|
||||
{{< paige/gallery/item image="*-7*" caption="Image 1" >}}
|
||||
{{< paige/gallery/item image="*-8*" caption="Image 2" >}}
|
||||
{{< paige/gallery/item image="*-9*" caption="Image 3" >}}
|
||||
{{< paige/gallery/item image="*-10*" caption="Image 4" >}}
|
||||
{{< paige/gallery image="*-7*.jpg" caption="Image 1" />}}
|
||||
{{< paige/gallery image="*-8*.jpg" caption="Image 2" />}}
|
||||
{{< paige/gallery image="*-9*.jpg" caption="Image 3" />}}
|
||||
{{< paige/gallery image="*-10.jpg*" caption="Image 4" />}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="5 images" */>}}
|
||||
{{</* paige/gallery image="*-11*.jpg" caption="Image 1" /*/>}}
|
||||
{{</* paige/gallery image="*-12*.jpg" caption="Image 2" /*/>}}
|
||||
{{</* paige/gallery image="*-13*.jpg" caption="Image 3" /*/>}}
|
||||
{{</* paige/gallery image="*-14*.jpg" caption="Image 4" /*/>}}
|
||||
{{</* paige/gallery image="*-15*.jpg" caption="Image 5" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="5 images" >}}
|
||||
{{< paige/gallery/item image="*-11*" caption="Image 1" >}}
|
||||
{{< paige/gallery/item image="*-12*" caption="Image 2" >}}
|
||||
{{< paige/gallery/item image="*-13*" caption="Image 3" >}}
|
||||
{{< paige/gallery/item image="*-14*" caption="Image 4" >}}
|
||||
{{< paige/gallery/item image="*-15*" caption="Image 5" >}}
|
||||
{{< paige/gallery image="*-11*.jpg" caption="Image 1" />}}
|
||||
{{< paige/gallery image="*-12*.jpg" caption="Image 2" />}}
|
||||
{{< paige/gallery image="*-13*.jpg" caption="Image 3" />}}
|
||||
{{< paige/gallery image="*-14*.jpg" caption="Image 4" />}}
|
||||
{{< paige/gallery image="*-15*.jpg" caption="Image 5" />}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="6 images" */>}}
|
||||
{{</* paige/gallery image="*-16*.jpg" caption="Image 1" /*/>}}
|
||||
{{</* paige/gallery image="*-17*.jpg" caption="Image 2" /*/>}}
|
||||
{{</* paige/gallery image="*-18*.jpg" caption="Image 3" /*/>}}
|
||||
{{</* paige/gallery image="*-19*.jpg" caption="Image 4" /*/>}}
|
||||
{{</* paige/gallery image="*-20*.jpg" caption="Image 5" /*/>}}
|
||||
{{</* paige/gallery image="*-21*.jpg" caption="Image 6" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="6 images" >}}
|
||||
{{< paige/gallery/item image="*-16*" caption="Image 1" >}}
|
||||
{{< paige/gallery/item image="*-17*" caption="Image 2" >}}
|
||||
{{< paige/gallery/item image="*-18*" caption="Image 3" >}}
|
||||
{{< paige/gallery/item image="*-19*" caption="Image 4" >}}
|
||||
{{< paige/gallery/item image="*-20*" caption="Image 5" >}}
|
||||
{{< paige/gallery/item image="*-21*" caption="Image 6" >}}
|
||||
{{< paige/gallery image="*-16*.jpg" caption="Image 1" />}}
|
||||
{{< paige/gallery image="*-17*.jpg" caption="Image 2" />}}
|
||||
{{< paige/gallery image="*-18*.jpg" caption="Image 3" />}}
|
||||
{{< paige/gallery image="*-19*.jpg" caption="Image 4" />}}
|
||||
{{< paige/gallery image="*-20*.jpg" caption="Image 5" />}}
|
||||
{{< paige/gallery image="*-21*.jpg" caption="Image 6" />}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
Photos by [Lanty](https://unsplash.com/@photos_by_lanty).
|
||||
<div class="text-center">Photos by <a href="https://unsplash.com/@photos_by_lanty">Lanty</a>.</div>
|
||||
|
||||
Reference in New Issue
Block a user