You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

5.2 KiB

authors categories description tags title weight
will-faught
paige
shortcodes
Demonstration of the Paige gallery shortcode.
figures
gallery
images
Gallery Shortcode 50

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

Align parameter

Code:

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

Result:

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


Code:

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

Result:

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


Code:

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

Result:

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

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

Result:

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


Code:

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

Result:

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

Images parameter

Code:

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

Result:

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


Code:

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

Result:

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

Justify parameter

Code:

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

Result:

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


Code:

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

Result:

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


Code:

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

Result:

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

Maxheight parameter

Code:

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

Result:

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


Code:

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

Result:

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

Maxwidth parameter

Code:

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

Result:

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


Code:

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

Result:

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

Method and options parameters

Code:

{{</* paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" /*/>}}

Result:

{{< paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" />}}

Type

Code:

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

Result:

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


Code:

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

Result:

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

Width parameter

Code:

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

Result:

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


Code:

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

Result:

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

Figure

Code:

{{</* paige/gallery */>}}
{{</* paige/figure caption="Image 1" /*/>}}
{{</* paige/image src="1-1.jpg" /*/>}}
{{</* /paige/figure */>}}
{{</* paige/figure caption="Image 2" /*/>}}
{{</* paige/image src="2-2.jpg" /*/>}}
{{</* /paige/figure */>}}
{{</* paige/figure caption="Image 3" /*/>}}
{{</* paige/image src="2-3.jpg" /*/>}}
{{</* /paige/figure */>}}
{{</* paige/figure caption="Image 4" /*/>}}
{{</* paige/image src="3-4.jpg" /*/>}}
{{</* /paige/figure */>}}
{{</* /paige/gallery */>}}

Result:

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

Photos by Lanty.