Gallery Shortcode#
Display images in a responsive grid with captions.
Usage#
{{< gallery cols="3" >}}
{{< img src="photo1.jpg" caption="First photo" >}}
{{< img src="photo2.jpg" caption="Second photo" >}}
{{< img src="photo3.jpg" caption="Third photo" >}}
{{< /gallery >}}
Parameters#
Gallery#
| Parameter | Default | Description |
|---|
cols | 2 | Number of columns |
Img#
| Parameter | Required | Description |
|---|
src | Yes | Image filename (page resource) |
caption | No | Caption text |
Features#
- Square aspect ratio: Images are cropped to fit a square (1:1) aspect ratio with object-fit: cover
- Responsive grid: Automatically adjusts columns based on screen size
- Image zoom: Click any image to open a fullscreen modal with native
<dialog> element - Captions: Optional captions display below images and in the fullscreen view
Notes#
- Images must be in the same folder as your page (page bundle)
- Grid collapses to single column on mobile
- Captions are optional
- Fullscreen modal can be closed by clicking the Close button or pressing Escape