I’m trying to build an horizontal showcase of projects in a big portfolio of about 500 projects on a CMS Collection, with a scrollable list on the left and the showcase of the active project on the right. An example of this can be seen here (but their list of projects is much shorter): https://studiofreight.com/
I have find this tutorial by Finsweet, and I was wondering if somehow with the knowledge can say if this could work or I’m understanding it completely wrong. I’d ask there but they seem to not be answering comments.
As far as I can get, the tutorial shows how to link a Tabs Element to a Dynamic List, so for every Item on that list we get a new Tab, which is important because they need to create themselves dynamically when a new project gets created on the CMS collection.
In my case the data to pull from the List Item to the tab pin would be the Title of the project and next to it the Category of Project (as in the example from studiofreight).
Now I’m not very experience so I’m afraid I won’t discern if it’s not possible or I’m doing something wrong. I thought I’d ask beforehand if any of this points can be a no-go:
Would it be possible to make that the populated Tabs Link Menu and the Content Div are scrollable like the ones in the example? (Overflow = Hidden enough?)
Would the pagination be a problem, because of the max. of 100 items on a list unless pagination is active.
Could this Dynamic List, that is connected to the Tabs element with the code Finsweet shares, be filtered if I add filter buttons outside of the Tabs element? I could imagine tabs being generated when loading the page and then maybe not reacting to a filter? The best solution for filters I’ve find is this.
Thank you beforehand for any possible help, I’ve searched the forum but didn’t find a solution (could also be that I’m not finding the right term, but I’ve tried many). Closest was from 2018 and without solution, and didn’t try to use tabs.
Best, Ivonne
I don’t have link to share but the live example and the tutorial.
500 items is pretty hefty, If you really need that many you’ll need to think about a more dynamic page load approach to avoid crushing your page performance and SEO.
I’d probably limit it to 100 recent or most popular, and then link through to a different filtered-and-paginated view for the full set.
CMS-powered tabs can probably work, but Webflow’s collection lists are limited to 100 items max so run some tests first to make sure they’ll combine OK if you’re going past that. You may be able to use CMS combine to merge 5 lists together before CMS tabs binds them.
Alternatively, you can build your own tabs-like master-detail view using interactions.
The filter video you’ve found looks like the previous version. You’ll want to use the newer filter solution, however I’ve never tested it with tabs. You’re mixing some things together here that aren’t commonly mixed.
Thank you for the prompt and detailed answer @memetican !! This looks like some good stuff to try, I’ll look into all.
About the 100/500 I would need to try pagination on the layout with the list cause having that as a separated view for projects and another page with all of them would make the first one not really useful, as it is not really a small selection or anything but just the first 100.
I thought afterwards that the example I posted looked also like it could be done with the same Accordion elements that are used for FAQ (just placing the answer div on the right instead of down). So far I did not find a CMS-Dynamic-FAQ tutorial or code and I don’t think the code from finsweet is going to work with a no-tabs element.
Standard pagination or Finsweet’s Load More will work well with an interactions-based approach like the expando or accordion. You’ll need to set it to re-bind interactions when hew elements are rendered.
Exactly- have a look at the expando demo. positions the panel adjacently and is CMS driven. Currently it’s designed to expand on however and navigate on click, but you can expand on click if you want a more tab-like feel.
So it seems like it does work but not completely, I share the example I’m building (not fully styled, only trying the structure):
It is combining Finsweet’s Tabs, Filter and Load, pretty powerful combination! The problem is that once Tabs are loaded the filters don’t affect them anymore. I guess the solution would be javascript? Somehow making that Tabs gets reloaded every time Filters get applied. Right now the pagination is set to 5 projects and if one is fast in changing the pre-selected filter on Project Type field from “Content Production” to “Multimedia Experiences”, the last projects that get generated are those of Multimedia Experiences.
Pagination btw while set for the Collection List gets hidden when the Tabs are feed with it.
What do you think? I think if this loading issue would be solved it would be a pretty strong combination.