Dynamic Image Gallery
The Gallery field lets you upload a set of images to a single collection item, like a project’s photo set, then display that set anywhere on your site: on a template for that one item, or nested inside a list of items.
Add a Gallery Field to Collection
- From the Content Manager, open your collection’s (e.g., Portfolio) Content Settings.
- Next to Custom Fields, click the plus (+) icon, and select Gallery.
- Give the new field a title (e.g., “Image Gallery”) and add help text if you’d like.
- Click Save.
Learn more about Collections.
Add Gallery Images to Collection Items
When you’re adding or editing an item in your collection:
- In the Content Manager, open the collection that contains your Gallery field, then click an item to edit it.
- Scroll to your Gallery field (e.g., Image Gallery).
- Click Add Image to upload or select as many files as you want, or drag and drop them directly into the field.
- Rearrange the images by dragging them into the order you want.
- Save or publish your changes.
Learn more about Collection Items.
Display Your Gallery
You can show your gallery images on a template page, where Kirki already knows which item you’re viewing, or on a list page, where you’re showing images across multiple items at once.
On a Template Page
- From the Insert Panel on the left, add a Collection element to the canvas (e.g., Portfolio Collection).
- Open its Dynamic Content settings and set Source to Gallery.
- Set Name to your Gallery field (e.g., Image Gallery).
- Add an Image element inside the Collection List (inside Items → Item).
- Select the Image element and open its Dynamic Content settings
- Set Type to Gallery.
Since you’re on a template page, Kirki automatically pulls and displays every image from that item’s Gallery field, no extra setup required.
On a List Page
Use this when each item in your list benefits from displaying more than one image at a glance, such as in a portfolio or property listing. Since it adds a nested collection to every item, only use it when the extra visuals are worth it.
- Add a Collection element to the page (e.g., Portfolio Collection).
- Inside that Collection List’s item wrapper, nest the same Collection element.
- Then, open the nested Collection’s Dynamic Content settings from the Right Panel.
- Set Source to Gallery and Name to your Gallery field (e.g., Image Gallery).
- Inside the nested Collection List’s item wrapper, add an Image element.
- Select the Image element and open its Dynamic Content settings.
- Set Type to Gallery.
This displays all images from the Gallery field for every item in the list. You can also limit how many images show per item by setting Limit in the nested Collection List’s settings.
Learn more about Displaying Collections.
Was this page helpful?