Can an unspecified number of images be loaded through the CMS in Webflow to display on a webpage, such as in an image slider, without using workarounds like adding multiple images to a rich text field or setting conditional visibility?
TL;DR
- Webflow CMS limits each item to 25 image fields and doesn’t support dynamic image arrays.
- The best workaround is creating a separate image Collection linked to the main Collection, allowing flexible image counts via nested Collection Lists, with sliders requiring custom code or third-party embeds.
Webflow's native CMS does not support dynamically loading an unspecified number of images per CMS item without workarounds. You are limited by the maximum number of image fields per CMS Collection (currently 25), and each needs to be manually added and bound in the Designer.
1. CMS Image Limitations
- Each CMS Collection item can include up to 25 image fields.
- Webflow does not support nested or repeatable image fields (e.g., an array of images per item).
- To use multiple images in components like a slider, you must predefine individual image fields (e.g., Image 1, Image 2, etc.).
2. Why Workarounds Are Required
- Webflow doesn’t allow dynamic binding of an unknown number of images (e.g., uploading 7 images for one item and 12 for another, and having the slider auto-adjust).
- Common workarounds include:
- Multi-image fields in Rich Text components, but this lacks layout control.
- Multi-reference collections, each containing a single image—and linking a parent item to a variable number of images. This enables flexible image counts using a Collection List inside a Slider or Lightbox.
3. Best Current Method for Dynamic Image Counts
To truly support a dynamic number of images per CMS item, you must use a multi-image Collection structure:
- Create a separate Collection called something like “Gallery Images,” containing a single Image field and a reference field to the primary Collection (e.g., “Projects”).
- Inside your primary page template (e.g., a Project page), nest a Collection List filtered by the reference to the current project.
- This allows you to use any number of images per item via a single parent-child relationship.
- Use this Collection List inside a slider component, though Webflow has limitations on dynamic content in native sliders. Often, this requires custom code or using a third-party slider embed like Splide or Swiper.
Summary
Webflow CMS doesn't natively support a flexible, unspecified number of images per item without structural workarounds. Using a multi-reference collection with a nested collection list is the best way to load dynamic images, though implementing this in sliders may require custom code or third-party tools.