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 )
memetican
(Michael Wells)
May 7, 2024, 6:29pm
2
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
memetican
(Michael Wells)
May 8, 2024, 6:11am
4
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.