paige-hugo/exampleSite/content/blog/gallery-shortcode/index.md

categories, date, description, tags, title

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

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

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.