Gallery Shortcode

Demonstration of the Paige gallery shortcode.

September 18, 2023

2 minutes

Paige provides a paige/gallery shortcode for displaying a list of images.

Align parameter #

Code:

{{< paige/gallery align="start" >}}
{{< paige/image height="20rem" src="01-2.jpg" >}}
{{< paige/image height="10rem" src="02-2.jpg" >}}
{{< /paige/gallery >}}

Result:

Code:

{{< paige/gallery align="center" >}}
{{< paige/image height="20rem" src="01-2.jpg" >}}
{{< paige/image height="10rem" src="02-2.jpg" >}}
{{< /paige/gallery >}}

Result:

Code:

{{< paige/gallery align="end" >}}
{{< paige/image height="20rem" src="01-2.jpg" >}}
{{< paige/image height="10rem" src="02-2.jpg" >}}
{{< /paige/gallery >}}

Result:

Breakpoints parameter #

Code:

{{< paige/gallery breakpoints=true images="large/*.jpg" />}}

Result:

Class parameter #

Code:

{{< paige/gallery class="rounded-5" images="*-2.jpg" />}}

Result:

Densities parameter #

Code:

{{< paige/gallery densities="1x 2x 3x" images="*-2.jpg" />}}

Result:

Fetchpriority parameter #

Code:

{{< paige/gallery fetchpriority="high" images="*-2.jpg" />}}

Result:

Code:

{{< paige/gallery fetchpriority="low" images="*-2.jpg" />}}

Result:

Height parameter #

Code:

{{< paige/gallery height="10rem" images="*-2.jpg" />}}

Result:

Code:

{{< paige/gallery height="20rem" images="*-2.jpg" />}}

Result:

Images parameter #

Code:

{{< paige/gallery images="1-2.jpg" />}}

Result:

Code:

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

Result:

Justify parameter #

Code:

{{< paige/gallery images="*-2.jpg" justify="start" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" justify="center" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" justify="end" />}}

Result:

Linked parameter #

Code:

{{< paige/gallery images="*-2.jpg" linked="unprocessed" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" linked="default" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" linked="r180" />}}

Result:

Loading parameter #

Code:

{{< paige/gallery images="*-2.jpg" loading="eager" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" loading="lazy" />}}

Result:

Maxheight parameter #

Code:

{{< paige/gallery images="*-2.jpg" maxheight="10rem" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" maxheight="20rem" />}}

Result:

Maxwidth parameter #

Code:

{{< paige/gallery images="*-2.jpg" maxwidth="10rem" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" maxwidth="20rem" />}}

Result:

Process parameter #

Code:

{{< paige/gallery images="*-2.jpg" process="default" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" process="300x300 center crop lanczos picture r180 webp" />}}

Result:

Style parameter #

Code:

{{< paige/gallery images="*-2.jpg" style="filter: grayscale(100%)" />}}

Result:

Type #

Code:

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

Result:

Code:

{{< paige/gallery images="*.jpg" maxheight="10rem" type="rows" />}}

Result:

Width parameter #

Code:

{{< paige/gallery images="*-2.jpg" width="10rem" />}}

Result:

Code:

{{< paige/gallery images="*-2.jpg" width="20rem" />}}

Result:

Figure #

Code:

{{< paige/figure caption="Gallery" >}}
{{< paige/gallery >}}
{{< paige/figure caption="Image 1" >}}
{{< paige/image src="01-2.jpg" >}}
{{< /paige/figure >}}
{{< paige/figure caption="Image 2" >}}
{{< paige/image src="02-2.jpg" >}}
{{< /paige/figure >}}
{{< paige/figure caption="Image 3" >}}
{{< paige/image src="03.jpg" >}}
{{< /paige/figure >}}
{{< paige/figure caption="Image 4" >}}
{{< paige/image src="04.jpg" >}}
{{< /paige/figure >}}
{{< /paige/gallery >}}
{{< /paige/figure >}}

Result: