Rockingcool
/
paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
myFork
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1f07e5fa2e'
${ noResults }
paige-hugo/exampleSite/content/blog/gallery-shortcode/index.md

7.2 KiB
Raw Blame History

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.

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.