I need to lower the limit on a nested collection

I have a collection of blog posts, and each blog post has a collection of images.

On the front-end, for each blog post, I want to render 4 images. No more no less.

Right now it seems like it is stuck at 5. The “Display Limits” section disappears for the nested collection of images.


Here is my public share link: LINK
(how to access public share link)

You can use CSS for this.
I’m not sure of your HTML DOM structure for this list but the general pattern would be;

.outer-collection-item .inner-collection-list .collection-item {
    display: none; /* Hide all by default */
}
.outer-collection-item .inner-collection-list .collection-item:nth-child(-n+4) {
    display: block; /* Display first 4 only */
}

Thanks for the suggestion… Interesting. Is there a reason why this can’t be done via the collection settings?

You can see my dom structure in the screenshot I provided. But here is my read-only link

I can’t guess the reason behind Webflow’s decision there.
You might find or create a wishlist item for that.

No the actual HTML DOM that CSS operates can only be seen in the published HTML.
Use my CSS as a guide, and adjust the selectors for your own DOM structure.