Clean up gallery page

2023-03-14 23:34:34 -07:00
parent 0eab07cd85
commit 7df1f6e91d
1 changed files with 192 additions and 243 deletions
--- a/exampleSite/content/shortcodes/gallery/index.md
+++ b/exampleSite/content/shortcodes/gallery/index.md
@@ -11,191 +11,22 @@ Paige provides a `paige/gallery` shortcode for displaying a list of images.

 <!--more-->

-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.
-
-## Rows layout
+## Align parameter

 Code:

 ```go-text-template
-{{</* paige/gallery images="1*.jpg" /*/>}}
+{{</* paige/gallery align="start" */>}}
+{{</* paige/image height="20rem" src="2-2.jpg" */>}}
+{{</* paige/image height="10rem" src="2-3.jpg" */>}}
+{{</* /paige/gallery /*/>}}
 ```

 Result:

-{{< paige/gallery images="1*.jpg" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="2*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="2*.jpg" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="3*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="3*.jpg" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="4*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="4*.jpg" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="5*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="5*.jpg" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="6*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="6*.jpg" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="*.jpg" />}}
-
-## Grid layout
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="1*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="1*" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="2*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="2*" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="3*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="3*" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="4*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="4*" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="5*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="5*" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="6*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="6*" />}}
-
---
-
-Code:
-
-```go-text-template
-{{</* paige/gallery images="*.jpg" /*/>}}
-```
-
-Result:
-
-{{< paige/gallery images="*.jpg" />}}
-
-## Customization
-
-Code:
-
-```go-text-template
-{{</* paige/gallery */>}}
-    {{</* paige/image src="*-1*.jpg" /*/>}}
-{{</* /paige/gallery */>}}
-```
-
-Result:
-
-{{< paige/gallery >}}
-    {{< paige/image src="*-1*.jpg" >}}
+{{< paige/gallery align="start" >}}
+{{< paige/image height="20rem" src="2-2.jpg" >}}
+{{< paige/image height="10rem" src="2-3.jpg" >}}
 {{< /paige/gallery >}}

 ---
@@ -203,17 +34,17 @@ Result:
 Code:

 ```go-text-template
-{{</* paige/gallery */>}}
-    {{</* paige/image src="*-2*.jpg" /*/>}}
-    {{</* paige/image src="*-3*.jpg" /*/>}}
-{{</* /paige/gallery */>}}
+{{</* paige/gallery align="center" */>}}
+{{</* paige/image height="20rem" src="2-2.jpg" */>}}
+{{</* paige/image height="10rem" src="2-3.jpg" */>}}
+{{</* /paige/gallery /*/>}}
 ```

 Result:

-{{< paige/gallery >}}
-    {{< paige/image src="*-2*.jpg" >}}
-    {{< paige/image src="*-3*.jpg" >}}
+{{< paige/gallery align="center" >}}
+{{< paige/image height="20rem" src="2-2.jpg" >}}
+{{< paige/image height="10rem" src="2-3.jpg" >}}
 {{< /paige/gallery >}}

 ---
@@ -221,92 +52,210 @@ Result:
 Code:

 ```go-text-template
-{{</* paige/gallery */>}}
-    {{</* paige/image src="*-4*.jpg" /*/>}}
-    {{</* paige/image src="*-5*.jpg" /*/>}}
-    {{</* paige/image src="*-6*.jpg" /*/>}}
-{{</* /paige/gallery */>}}
+{{</* paige/gallery align="end" */>}}
+{{</* paige/image height="20rem" src="2-2.jpg" */>}}
+{{</* paige/image height="10rem" src="2-3.jpg" */>}}
+{{</* /paige/gallery /*/>}}
 ```

 Result:

-{{< paige/gallery >}}
-    {{< paige/image src="*-4*.jpg" >}}
-    {{< paige/image src="*-5*.jpg" >}}
-    {{< paige/image src="*-6*.jpg" >}}
+{{< paige/gallery align="end" >}}
+{{< paige/image height="20rem" src="2-2.jpg" >}}
+{{< paige/image height="10rem" src="2-3.jpg" >}}
 {{< /paige/gallery >}}

+## Height parameter
+
+Code:
+
+```go-text-template
+{{</* paige/gallery height="10rem" images="2-*.jpg" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery height="10rem" images="2-*.jpg" />}}
+
 ---

 Code:

 ```go-text-template
-{{</* paige/gallery */>}}
-    {{</* paige/image src="*-7*.jpg" /*/>}}
-    {{</* paige/image src="*-8*.jpg" /*/>}}
-    {{</* paige/image src="*-9*.jpg" /*/>}}
-    {{</* paige/image src="*-10.jpg*" /*/>}}
-{{</* /paige/gallery */>}}
+{{</* paige/gallery height="20rem" images="2-*.jpg" /*/>}}
 ```

 Result:

-{{< paige/gallery >}}
-    {{< paige/image src="*-7*.jpg" >}}
-    {{< paige/image src="*-8*.jpg" >}}
-    {{< paige/image src="*-9*.jpg" >}}
-    {{< paige/image src="*-10.jpg*" >}}
-{{< /paige/gallery >}}
+{{< paige/gallery height="20rem" images="2-*.jpg" />}}
+
+## Images parameter
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-2.jpg" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-2.jpg" />}}

 ---

 Code:

 ```go-text-template
-{{</* paige/gallery */>}}
-    {{</* paige/image src="*-11*.jpg" /*/>}}
-    {{</* paige/image src="*-12*.jpg" /*/>}}
-    {{</* paige/image src="*-13*.jpg" /*/>}}
-    {{</* paige/image src="*-14*.jpg" /*/>}}
-    {{</* paige/image src="*-15*.jpg" /*/>}}
-{{</* /paige/gallery */>}}
+{{</* paige/gallery images="2-*.jpg" /*/>}}
 ```

 Result:

-{{< paige/gallery >}}
-    {{< paige/image src="*-11*.jpg" >}}
-    {{< paige/image src="*-12*.jpg" >}}
-    {{< paige/image src="*-13*.jpg" >}}
-    {{< paige/image src="*-14*.jpg" >}}
-    {{< paige/image src="*-15*.jpg" >}}
-{{< /paige/gallery >}}
+{{< paige/gallery images="2-*.jpg" />}}
+
+## Justify parameter
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" justify="start" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" justify="start" />}}

 ---

 Code:

 ```go-text-template
-{{</* paige/gallery */>}}
-    {{</* paige/image src="*-16*.jpg" /*/>}}
-    {{</* paige/image src="*-17*.jpg" /*/>}}
-    {{</* paige/image src="*-18*.jpg" /*/>}}
-    {{</* paige/image src="*-19*.jpg" /*/>}}
-    {{</* paige/image src="*-20*.jpg" /*/>}}
-    {{</* paige/image src="*-21*.jpg" /*/>}}
-{{</* /paige/gallery */>}}
+{{</* paige/gallery images="2-*.jpg" justify="center" /*/>}}
 ```

 Result:

-{{< paige/gallery >}}
-    {{< paige/image src="*-16*.jpg" >}}
-    {{< paige/image src="*-17*.jpg" >}}
-    {{< paige/image src="*-18*.jpg" >}}
-    {{< paige/image src="*-19*.jpg" >}}
-    {{< paige/image src="*-20*.jpg" >}}
-    {{< paige/image src="*-21*.jpg" >}}
-{{< /paige/gallery >}}
+{{< paige/gallery images="2-*.jpg" justify="center" />}}
+
+---
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" justify="end" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" justify="end" />}}
+
+## Maxheight parameter
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" maxheight="10rem" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" maxheight="10rem" />}}
+
+---
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" maxheight="20rem" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" maxheight="20rem" />}}
+
+## Maxwidth parameter
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" maxwidth="10rem" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" maxwidth="10rem" />}}
+
+---
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" maxwidth="20rem" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" maxwidth="20rem" />}}
+
+## Method and options parameters
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" />}}
+
+## Type
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="*.jpg" type="grid" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="*.jpg" type="grid" />}}
+
+---
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="*.jpg" maxheight="10rem" type="rows" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="*.jpg" maxheight="10rem" type="rows" />}}
+
+## Width parameter
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" width="10rem" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" width="10rem" />}}
+
+---
+
+Code:
+
+```go-text-template
+{{</* paige/gallery images="2-*.jpg" width="20rem" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="2-*.jpg" width="20rem" />}}

 ## Figure

@@ -315,16 +264,16 @@ Code:
 ```go-text-template
 {{</* paige/gallery */>}}
 {{</* paige/figure caption="Image 1" /*/>}}
-{{</* paige/image src="*-1*.jpg" /*/>}}
+{{</* paige/image src="1-1.jpg" /*/>}}
 {{</* /paige/figure */>}}
 {{</* paige/figure caption="Image 2" /*/>}}
-{{</* paige/image src="*-2*.jpg" /*/>}}
+{{</* paige/image src="2-2.jpg" /*/>}}
 {{</* /paige/figure */>}}
 {{</* paige/figure caption="Image 3" /*/>}}
-{{</* paige/image src="*-3*.jpg" /*/>}}
+{{</* paige/image src="2-3.jpg" /*/>}}
 {{</* /paige/figure */>}}
 {{</* paige/figure caption="Image 4" /*/>}}
-{{</* paige/image src="*-4*.jpg" /*/>}}
+{{</* paige/image src="3-4.jpg" /*/>}}
 {{</* /paige/figure */>}}
 {{</* /paige/gallery */>}}
 ```
@@ -333,16 +282,16 @@ Result:

 {{< paige/gallery >}}
 {{< paige/figure caption="Image 1" >}}
-{{< paige/image src="*-1*.jpg" >}}
+{{< paige/image src="1-1.jpg" >}}
 {{< /paige/figure >}}
 {{< paige/figure caption="Image 2" >}}
-{{< paige/image src="*-2*.jpg" >}}
+{{< paige/image src="2-2.jpg" >}}
 {{< /paige/figure >}}
 {{< paige/figure caption="Image 3" >}}
-{{< paige/image src="*-3*.jpg" >}}
+{{< paige/image src="2-3.jpg" >}}
 {{< /paige/figure >}}
 {{< paige/figure caption="Image 4" >}}
-{{< paige/image src="*-4*.jpg" >}}
+{{< paige/image src="3-4.jpg" >}}
 {{< /paige/figure >}}
 {{< /paige/gallery >}}