Rockingcool/paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
4f04d912c12f52ee46660be2b4a82e397dee16cf
paige-hugo/exampleSite/content/blog/gallery-shortcode/index.md
Will Faught 57e7c4d510 Add more specific tags
2023-02-04 17:11:16 -08:00

7.3 KiB
Raw Blame History

categories, date, description, tags, title
categories date description tags title
paige
2023-01-05 Demonstration of the Paige gallery shortcode.
figures
gallery
images
shortcodes
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:

{{</* paige/gallery */>}}
    {{</* paige/gallery image="https://picsum.photos/400/300.webp" raw=true /*/>}}
{{</* /paige/gallery */>}}

Result:

{{< paige/gallery >}} {{< paige/gallery image="https://picsum.photos/400/300.webp" raw=true />}} {{< /paige/gallery >}}

Rows layout

Code:

{{</* paige/gallery images="1*.jpg" caption="1 image" /*/>}}

Result:

{{< paige/gallery images="1*.jpg" caption="1 image" />}}

Code:

{{</* paige/gallery images="2*.jpg" caption="2 images" /*/>}}

Result:

{{< paige/gallery images="2*.jpg" caption="2 images" />}}

Code:

{{</* paige/gallery images="3*.jpg" caption="3 images" /*/>}}

Result:

{{< paige/gallery images="3*.jpg" caption="3 images" />}}

Code:

{{</* paige/gallery images="4*.jpg" caption="4 images" /*/>}}

Result:

{{< paige/gallery images="4*.jpg" caption="4 images" />}}

Code:

{{</* paige/gallery images="5*.jpg" caption="5 images" /*/>}}

Result:

{{< paige/gallery images="5*.jpg" caption="5 images" />}}

Code:

{{</* paige/gallery images="6*.jpg" caption="6 images" /*/>}}

Result:

{{< paige/gallery images="6*.jpg" caption="6 images" />}}

Code:

{{</* paige/gallery images="*.jpg" caption="All images" /*/>}}

Result:

{{< paige/gallery images="*.jpg" caption="All images" />}}

Grid layout

Code:

{{</* paige/gallery images="1*.jpg" caption="1 image" type="grid" /*/>}}

Result:

{{< paige/gallery images="1*" caption="1 image" type="grid" />}}

Code:

{{</* paige/gallery images="2*.jpg" caption="2 images" type="grid" /*/>}}

Result:

{{< paige/gallery images="2*" caption="2 images" type="grid" />}}

Code:

{{</* paige/gallery images="3*.jpg" caption="3 images" type="grid" /*/>}}

Result:

{{< paige/gallery images="3*" caption="3 images" type="grid" />}}

Code:

{{</* paige/gallery images="4*.jpg" caption="4 images" type="grid" /*/>}}

Result:

{{< paige/gallery images="4*" caption="4 images" type="grid" />}}

Code:

{{</* paige/gallery images="5*.jpg" caption="5 images" type="grid" /*/>}}

Result:

{{< paige/gallery images="5*" caption="5 images" type="grid" />}}

Code:

{{</* paige/gallery images="6*.jpg" caption="6 images" type="grid" /*/>}}

Result:

{{< paige/gallery images="6*" caption="6 images" type="grid" />}}

Code:

{{</* paige/gallery images="*.jpg" caption="All images" type="grid" /*/>}}

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:

{{</* paige/gallery caption="1 image" */>}}
    {{</* paige/gallery image="*-1*.jpg" caption="Image 1" /*/>}}
{{</* /paige/gallery */>}}

Result:

{{< paige/gallery caption="1 image" >}} {{< paige/gallery image="-1.jpg" caption="Image 1" />}} {{< /paige/gallery >}}

Code:

{{</* 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 image="-2.jpg" caption="Image 1" />}} {{< paige/gallery image="-3.jpg" caption="Image 2" />}} {{< /paige/gallery >}}

Code:

{{</* 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 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:

{{</* 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 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:

{{</* 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 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:

{{</* 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 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.