diff --git a/exampleSite/content/blog/gallery-shortcodes/index.md b/exampleSite/content/blog/gallery-shortcodes/index.md index 52e7a847..9372a61b 100644 --- a/exampleSite/content/blog/gallery-shortcodes/index.md +++ b/exampleSite/content/blog/gallery-shortcodes/index.md @@ -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). +