Skip to main content
  1. Snippits/
  2. Blowfish Exemplars/
  3. Blowfish Shortcodes/

Gallery Leaf

<time datetime="2023-08-30 23:48:06 -0500 CDT">Updated: August 30 2023</time>
blowfish shortcodes gallery
gallery - This article is part of a series.
Part 8.2: This Article
🐡 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 >}}
gallery - This article is part of a series.
Part 8.2: This Article