Gallery Leaf
<time datetime="2023-08-30 23:48:06 -0500 CDT">Updated: August 30 2023</time>
blowfish
shortcodes
gallery
🐡 Shortcodes
gallery allows you to showcase multiple images at once
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
{{< gallery >}}
<img src="/snippits/blowfish/shortcodes/gallery/01.jpg" class="grid-w33" />
<img src="/snippits/blowfish/shortcodes/gallery/02.jpg" class="grid-w33" />
<img src="/snippits/blowfish/shortcodes/gallery/03.jpg" 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
{{< gallery >}}
<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 >}}