Gallery Branch
gallery working in a branch context
gallery allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
In order to add images to the gallery, use img tags for each image and add class="grid-wXX" in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to grid-w65. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind’s responsive indicators to have a reponsive grid.
Example 1: “normal” Gallery with images outside the branch pagebundle scope
{{< gallery >}}
<img src="https://dog.wolfspyre.io/wplimgs/A_little_help.jpg" class="grid-w33" />
<img src="https://dog.wolfspyre.io/wplimgs/ManWhoInventedDynamite.jpg" class="grid-w33" />
<img src="/snippits/blowfish/shortcodes/gallery/03.jpg" class="grid-w33" />
<img src="/authors/background.jpg" class="grid-w100" />
<img src="https://dog.wolfspyre.io/wplimgs/ADHD_Storytelling.jpg" class="grid-w33" />
<img src="/Wolfspyre_Logo.svg" class="grid-w33" />
<img src="/snippits/blowfish/shortcodes/gallery/04.jpg" class="grid-w33" />
<img src="/snippits/blowfish/shortcodes/gallery/05.jpg" class="grid-w33" />
<img src="/snippits/blowfish/shortcodes/gallery/06.jpg" class="grid-w33" />
<img src="/snippits/blowfish/shortcodes/gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
Example 2: “responsive” Gallery with images outside the branch pagebundle scope
{{< gallery >}}
<img src="https://dog.wolfspyre.io/wplimgs/A_little_help.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="https://dog.wolfspyre.io/wplimgs/ManWhoInventedDynamite.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="https://dog.wolfspyre.io/wplimgs/ADHD_Storytelling.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/Wolfspyre_Logo.svg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/snippits/blowfish/shortcodes/gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/snippits/blowfish/shortcodes/gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/snippits/blowfish/shortcodes/gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/snippits/blowfish/shortcodes/gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/snippits/blowfish/shortcodes/gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/snippits/blowfish/shortcodes/gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="/snippits/blowfish/shortcodes/gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{< /gallery >}}
There are no articles to list here yet.