Limit CMS Items by Breakpoint?

Has anyone leveraged a script that could limit the displayed quantity of cms items in a collection by breakpoint?

EX: Showing 6 on desktop, 10 on tablet, 16 on mobile?

Thanks!

Easiest solution would be to just duplicate the collection list three times, hiding them all except for the one designed for the current breakpoint. That’s the “no code” way.

1 Like

Yes, currently have that implemented. Want to work around the performance loss having three cms collections.

All the CMS items need to be present on the page with a custom code solution. The issue of duplicate or partially duplicate collection lists would not add much weight to a page (just some HTML). Images in that case are not loaded twice so I don’t see where there would be a performance hit. Certainly not with WF since the pages are rendered on publish.

You could build a custom code solution that used the Window.matchMedia() method.

The Window interface’s matchMedia() method returns a new MediaQueryList object representing the parsed results of the specified media query string. The returned MediaQueryList can then be used to determine if the Document matches the media query, or to monitor a document to detect when it matches or stops matching the media query.

Then you have to hide the collection list, convert it to an array, get the length and slice it as needed. Then add it back to some element. Should be straight forward. You could use jQuery since it is loaded already on your site if you wish.

1 Like

Thanks! All makes sense. Wasn’t aware all CMS items must be loaded anyway in custom code.

You can’t have less items at smaller breakpoints, but you can use custom CSS to hide them. For example, to target Webflow’s tablet breakpoint and only show 11 CMS items:

<style>
    @media screen and (max-width: 991px) and (min-width: 768px) {
        .w-dyn-items :nth-child(n+11) {
            display: none;
        }
    }
</style>

If you have more than 1 CMS collection on the page and you only want to target 1 specific collection, swap out the class .w-dyn-items for the class you gave the element that wraps all your CMS items in Webflow.

6 Likes

@jasondark That’s exactly what I needed! Thanks so much.

hey Jeff! I was trying to send you a pm about your article here:Render Custom Code from Webflow CMS Item's Value - WF How
I perfectly followed your instructions and got it to work with your sample text, but im currently running into issues with my custom code. Id love to buy you a beer to get a few mins of your time !
Please pm me when you can !
video of my problem: Loom | Free Screen & Video Recording Software | Loom

read only of page: https://preview.webflow.com/preview/cool-app-ladingpage?utm_medium=preview_link&utm_source=dashboard&utm_content=cool-app-ladingpage&preview=85726f5598f22c15179df0a8f45a592c&mode=preview

(my email just in case Kleveland@toptradersfx.com)

For anyone searching this later, here’s a cloneable that allows you to set breakpoint-specific limits using only custom attributes.

As it happens, it uses the exact same CSS approach as Jason Dark’s solution here, which enables it to work in the designer if you find that convenient.

All details are here;

Hey! If there’s any options to add “startAt:” to this attributes?

Hi Bogdan,

The attributes work on top of your collection list, so if you set your collection list to start at a specific point, the attribute work on that resulting set of elements.

This is a really great solution. But if I decide to add a “show more” button or “paginate” the collection list, then it doesn’t work fine anymore.

Thanks Pelumi,

Yes that’s correct. This approach uses CSS to restrict the elements you’re seeing so if you are also paginating elements, this approach cannot inform Webflow pagination of your desired mobile page size.

You’d have to build a custom solution for that.

I’m fairly certain you could build that on top of Finsweet’s Load more. They have a fairly comprehensive API that would allow you to control the page sizes you want, and if you can change that dynamically, you can trigger that change off of a breakpoint change trigger.

Hey @Phantom … guess what I built.

Paginated collection lists, with responsive, breakpoint-specific item count.

2 Likes

You are really AWESOME!!!

What about if i decide to use the load more option, instead of a next/previous button, a load more button below. Would that be possible?

Load more is a very different UX that does not use a pagination approach, so you don’t get the N items per page UX controls that you do here.

There’s probably some way to make the Load more mode more responsive but I haven’t explored that. Probably N(breakpoint) items per page on start, then reset it when you change breakpoints? I might circle back to that someday and have a play.

Ahhh Webflow’s solution for everything - just duplicate it :rofl:

This is great! Thanks @jasondark!

Q: What if you have a CMS nested inside another one? 0_o

Blogs CMS to show 2 items

Topic CMS (nested inside) to show 3 items

How can I tell this code to show me everything INSIDE blog, but only do that twice? Seams to go all or nothing - even with specifying classes.