--- categories: [paige] date: "2023-01-05" description: Demonstration of the Paige gallery shortcode. tags: [figures, gallery, images, shortcodes] title: Gallery Shortcode --- 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. Code: ```go-text-template {{}} {{}} {{}} ``` Result: {{< paige/gallery >}} {{< paige/gallery image="https://picsum.photos/400/300.webp" raw=true />}} {{< /paige/gallery >}} --- ## Rows layout Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="1*.jpg" caption="1 image" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="2*.jpg" caption="2 images" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="3*.jpg" caption="3 images" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="4*.jpg" caption="4 images" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="5*.jpg" caption="5 images" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="6*.jpg" caption="6 images" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="*.jpg" caption="All images" />}} ## Grid layout Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="1*" caption="1 image" type="grid" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="2*" caption="2 images" type="grid" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="3*" caption="3 images" type="grid" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="4*" caption="4 images" type="grid" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="5*" caption="5 images" type="grid" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="6*" caption="6 images" type="grid" />}} --- Code: ```go-text-template {{}} ``` Result: {{< paige/gallery images="*.jpg" caption="All images" type="grid" />}} ## Customization {{< paige/gallery caption="X image" >}} {{< paige/gallery image="*-1*.jpg" height="10rem" />}} {{< paige/gallery image="*-1*.jpg" height="10rem" />}} {{< paige/gallery image="*-1*.jpg" height="10rem" />}} {{< paige/gallery image="*-1*.jpg" height="10rem" />}} {{< /paige/gallery >}} --- Code: ```go-text-template {{}} {{}} {{}} ``` Result: {{< paige/gallery caption="1 image" >}} {{< paige/gallery image="*-1*.jpg" caption="Image 1" />}} {{< /paige/gallery >}} --- Code: ```go-text-template {{}} {{}} {{}} {{}} ``` Result: {{< paige/gallery caption="2 images" >}} {{< paige/gallery image="*-2*.jpg" caption="Image 1" />}} {{< paige/gallery image="*-3*.jpg" caption="Image 2" />}} {{< /paige/gallery >}} --- Code: ```go-text-template {{}} {{}} {{}} {{}} {{}} ``` Result: {{< 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 >}} --- Code: ```go-text-template {{}} {{}} {{}} {{}} {{}} {{}} ``` Result: {{< 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 >}} --- Code: ```go-text-template {{}} {{}} {{}} {{}} {{}} {{}} {{}} ``` Result: {{< 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 >}} --- Code: ```go-text-template {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} ``` Result: {{< 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 >}}
Photos by Lanty.