Streaming live at 10am (PST)

Collection list grid with more than 100 objects

Hi All,

I have a CMS collection with 200 items.

To get around the 100 item limit for Collection Lists, I created two Collection List Wrappers. The first displays items 1-100 and the second displays items 101-200. Each list has 3 columns to make a grid.

I use custom code to hide collection items that do match the current calendar day and time. After the items are hidden, the page will typically display 2-10 matching items.

The problem is that it does not result in a fluid grid because items from the second collection list always begin on a new row.

See attached screenshot

  • First collection has two matching items
  • Second collection has 3 matchin items
  • This results in an empty space in the first row

The only workaround I have seen is here: How to make a fluid grid from a collection list

However, in this solution, a separate collection list is created for each collection item. Since I will have hundreds of collection items, this will become very labor intensive.

Any ideas? Thanks!

With a bit of custom code, you can merge items into the same list. If you need help, please click on this link and read the instructions.

that link did not work. can you try again? thanks

That link is working as it should.

It’s taking me to Posting Guidelines for the Design Help Category

Yes, please provide the required information listed.

@samliew Thanks for clarifying. Here are the links:

http://radio-wav.webflow.io/
https://preview.webflow.com/preview/radio-wav?preview=e22b488678b563c4b9b5f88839004c58

Note that depending on the time of day (which determines which items appear), the problem illustrated in the screenshot might not be visible.

Here’s the code you need to move ALL collection items on the page into the first collection list, then delete the other (now empty) collection lists.

<script>
$('.w-dyn-item').appendTo('.w-dyn-items:first');
$('.w-dyn-list').slice(1).remove();
</script>

Paste this in Page Settings > Footer Code

2 Likes

@samliew worked like a charm! thanks.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.