1. Clean Image Grid (gallery-images)
Renders images in an borderless grid layout.
[[$gallery-images? &album=`1` ]]Output Preview:
Gallery - Edmon Low Library
Design Guide
Maintenance & Upkeep
Gallery
Guidelines and reusable MODX chunks for rendering image galleries, grids, cards, modals, and carousels.
MODX Official Gallery DocumentationCreating & Managing Albums
1. Create the Album
- In the MODX Manager sidebar, navigate to Extras → Gallery.
- Click Create Album.
- Enter an Album Name and optional description.
- Verify Active is checked and click Save.
2. Upload Assets & Accessibility Checklist
- Right-click your album and select Update Album.
- Select Upload Item (single file) or Multi Upload.
- Accessibility Requirement: Fill out the Name and Description (used as Alt Text) for every uploaded asset.
Aspect Ratio Standard: All images within a single album must share the same aspect ratio (e.g., 16:9 or 4:3) to prevent grid layout shifting.
Chunk Parameters
All Gallery chunks accept the following standard parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
&album |
string | int | Required | The exact Name or ID number of the MODX Gallery album. |
&row-size (optional) |
integer | 4 |
Number of columns per row on desktop breakpoints (Range: 1 to 6). |
Gallery Chunk Variations
1. Clean Image Grid (
2. Gallery Cards (gallery-cards)
Displays images wrapped in Bootstrap cards, including titles and captions.
[[$gallery-cards? &album=`1` ]]Output Preview:
Playing Cards
Description text
Playing Taco Cat Goat Cheese
Students playing a fast paced game.
Cafe Libro
Student enjoying Cafe Libro's offerings
3. Interactive Modal Grid (gallery-modals)
Displays thumbnail images that expand into a full-screen lightbox modal when clicked.
[[$gallery-modals? &album=`1` ]]Output Preview:
4. Interactive Carousel (gallery-carousel)
Renders an auto-rotating or user-controlled image slider.
[[$gallery-carousel? &album=`1` ]]Output Preview: