▼
Streaming live at 10am (PST)

Collection list grid with more than 100 objects

#1

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

14 PM
Screen Shot 2018-01-10 at 1.58.14 PM.jpg1292x1072 397 KB

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!

#2

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.

#3

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

#4

That link is working as it should.

#5

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

#6

Yes, please provide the required information listed.

#7

@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.

#8

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

#9

@samliew worked like a charm! thanks.

closed #10

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