Load more, and Responsive page item-counts

Attributes
1

I use a CSS-based approach to control the number of collection items that appear at various breakpoints e.g. 20 on desktop, 15 on tablet, 10 on landscape, 5 on portrait.

One client wants that behavior on a paginated list.

Immediately FS CMS Load more jumped into mind. I know it works with externally loaded data which I think means that item count per page is configurable.

Is there already a feature or hack for this?

If not, a bunch of questions for the community-

  • has anyone tried this before?
  • can items-per-page can be dynamically changed?

Also, if I’m current viewing page 3 of 10, and the breakpoint changes, ideally, item 1 in my current page would still be visible across the breakpoint change, which suggests that the page number may need to change also.

2

Hello @memetican,

You can do this, but it would require three separate CMS collections on the page. The way I would do it is make the desktop one (make it only visible on the desktop breakpoint), then duplicate it and add ‘mobile’ to create a combo class and do the same for tablet. You could set the visibility of the mobile combo class so that it’s visible only on mobile. Then change the pagination of both as required

3

Thanks Joseph, that’s not what I’m after, for quite a few reasons - the design admin overhead, the trade of 4-7 collection lists for 1 to support all breakpoints, the problem of loading up to 7x the amount of data…

However I managed to work it out using the API. Slick!

Sharing here the demo-

And cloneable-

1 Like
4

Thanks for sharing the solution. It’s very detailed. Cheers

5

Thanks Joseph, I hope others will find it useful. It was fun to build.

1 Like