Clean up gallery page

exampleSite/content/shortcodes/gallery/index.md

@@ -11,302 +11,251 @@ 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" />}}
+{{< paige/gallery align="start" >}}
+{{< paige/image height="20rem" src="2-2.jpg" >}}
+{{< paige/image height="10rem" src="2-3.jpg" >}}
+{{< /paige/gallery >}}
 
 ---
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="2*.jpg" /*/>}}
+{{</* 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 images="2*.jpg" />}}
+{{< paige/gallery align="center" >}}
+{{< paige/image height="20rem" src="2-2.jpg" >}}
+{{< paige/image height="10rem" src="2-3.jpg" >}}
+{{< /paige/gallery >}}
 
 ---
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="3*.jpg" /*/>}}
+{{</* 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 images="3*.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 images="4*.jpg" /*/>}}
+{{</* paige/gallery height="10rem" images="2-*.jpg" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="4*.jpg" />}}
+{{< paige/gallery height="10rem" images="2-*.jpg" />}}
 
 ---
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="5*.jpg" /*/>}}
+{{</* paige/gallery height="20rem" images="2-*.jpg" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="5*.jpg" />}}
+{{< paige/gallery height="20rem" images="2-*.jpg" />}}
 
----
+## Images parameter
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="6*.jpg" /*/>}}
+{{</* paige/gallery images="2-2.jpg" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="6*.jpg" />}}
+{{< paige/gallery images="2-2.jpg" />}}
 
 ---
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="*.jpg" /*/>}}
+{{</* paige/gallery images="2-*.jpg" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="*.jpg" />}}
+{{< paige/gallery images="2-*.jpg" />}}
 
-## Grid layout
+## Justify parameter
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="1*.jpg" /*/>}}
+{{</* paige/gallery images="2-*.jpg" justify="start" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="1*" />}}
+{{< paige/gallery images="2-*.jpg" justify="start" />}}
 
 ---
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="2*.jpg" /*/>}}
+{{</* paige/gallery images="2-*.jpg" justify="center" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="2*" />}}
+{{< paige/gallery images="2-*.jpg" justify="center" />}}
 
 ---
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="3*.jpg" /*/>}}
+{{</* paige/gallery images="2-*.jpg" justify="end" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="3*" />}}
+{{< paige/gallery images="2-*.jpg" justify="end" />}}
 
----
+## Maxheight parameter
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="4*.jpg" /*/>}}
+{{</* paige/gallery images="2-*.jpg" maxheight="10rem" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="4*" />}}
+{{< paige/gallery images="2-*.jpg" maxheight="10rem" />}}
 
 ---
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="5*.jpg" /*/>}}
+{{</* paige/gallery images="2-*.jpg" maxheight="20rem" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="5*" />}}
+{{< paige/gallery images="2-*.jpg" maxheight="20rem" />}}
 
----
+## Maxwidth parameter
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery images="6*.jpg" /*/>}}
+{{</* paige/gallery images="2-*.jpg" maxwidth="10rem" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery images="6*" />}}
+{{< paige/gallery images="2-*.jpg" maxwidth="10rem" />}}
 
 ---
 
 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 */>}}
+{{</* paige/gallery images="2-*.jpg" maxwidth="20rem" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery >}}
-    {{< paige/image src="*-1*.jpg" >}}
-{{< /paige/gallery >}}
+{{< paige/gallery images="2-*.jpg" maxwidth="20rem" />}}
 
----
+## Method and options parameters
 
 Code:
 
 ```go-text-template
-{{</* paige/gallery */>}}
-    {{</* paige/image src="*-2*.jpg" /*/>}}
-    {{</* paige/image src="*-3*.jpg" /*/>}}
-{{</* /paige/gallery */>}}
+{{</* paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery >}}
-    {{< paige/image src="*-2*.jpg" >}}
-    {{< paige/image src="*-3*.jpg" >}}
-{{< /paige/gallery >}}
+{{< paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" />}}
 
----
+## Type
 
 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 images="*.jpg" type="grid" /*/>}}
 ```
 
 Result:
 
-{{< paige/gallery >}}
-    {{< paige/image src="*-4*.jpg" >}}
-    {{< paige/image src="*-5*.jpg" >}}
-    {{< paige/image src="*-6*.jpg" >}}
-{{< /paige/gallery >}}
+{{< paige/gallery images="*.jpg" type="grid" />}}
 
 ---
 
 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 images="*.jpg" maxheight="10rem" type="rows" /*/>}}
 ```
 
 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 images="*.jpg" maxheight="10rem" type="rows" />}}
 
----
+## Width parameter
 
 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" width="10rem" /*/>}}
 ```
 
 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" width="10rem" />}}
 
 ---
 
 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" width="20rem" /*/>}}
 ```
 
 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" 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 >}}