diff --git a/exampleSite/content/shortcodes/gallery/index.md b/exampleSite/content/shortcodes/gallery/index.md index 58092807..010c44fa 100644 --- a/exampleSite/content/shortcodes/gallery/index.md +++ b/exampleSite/content/shortcodes/gallery/index.md @@ -11,302 +11,251 @@ Paige provides a `paige/gallery` shortcode for displaying a list of images. -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 -{{}} +{{}} +{{}} +{{}} +{{}} ``` 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 -{{}} +{{}} +{{}} +{{}} +{{}} ``` 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 -{{}} +{{}} +{{}} +{{}} +{{}} ``` 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 -{{}} +{{}} ``` Result: -{{< paige/gallery images="4*.jpg" />}} +{{< paige/gallery height="10rem" images="2-*.jpg" />}} --- Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="5*.jpg" />}} +{{< paige/gallery height="20rem" images="2-*.jpg" />}} ---- +## Images parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="6*.jpg" />}} +{{< paige/gallery images="2-2.jpg" />}} --- Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="*.jpg" />}} +{{< paige/gallery images="2-*.jpg" />}} -## Grid layout +## Justify parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="1*" />}} +{{< paige/gallery images="2-*.jpg" justify="start" />}} --- Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="2*" />}} +{{< paige/gallery images="2-*.jpg" justify="center" />}} --- Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="3*" />}} +{{< paige/gallery images="2-*.jpg" justify="end" />}} ---- +## Maxheight parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="4*" />}} +{{< paige/gallery images="2-*.jpg" maxheight="10rem" />}} --- Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="5*" />}} +{{< paige/gallery images="2-*.jpg" maxheight="20rem" />}} ---- +## Maxwidth parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/gallery images="6*" />}} +{{< paige/gallery images="2-*.jpg" maxwidth="10rem" />}} --- Code: ```go-text-template -{{}} -``` - -Result: - -{{< paige/gallery images="*.jpg" />}} - -## Customization - -Code: - -```go-text-template -{{}} - {{}} -{{}} +{{}} ``` 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 -{{}} - {{}} - {{}} -{{}} +{{}} ``` 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 -{{}} - {{}} - {{}} - {{}} -{{}} +{{}} ``` 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 -{{}} - {{}} - {{}} - {{}} - {{}} -{{}} +{{}} ``` 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 -{{}} - {{}} - {{}} - {{}} - {{}} - {{}} -{{}} +{{}} ``` 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 -{{}} - {{}} - {{}} - {{}} - {{}} - {{}} - {{}} -{{}} +{{}} ``` 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 {{}} {{}} -{{}} +{{}} {{}} {{}} -{{}} +{{}} {{}} {{}} -{{}} +{{}} {{}} {{}} -{{}} +{{}} {{}} {{}} ``` @@ -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 >}}