I’ve hit a blocker problem, that I am hoping there is a way around.
I have a gallery Collection that I have created a dropdown to allow the CMS editor to pick from 4 templates, then on the template page, I have filtered out content based on what template they want.
However, I have now hit a “You cannot have more than 20 collection lists on a page” limit.
Is there anyway that I can have a different template per gallery. Obviously I could create a brand new collection for each template, but that would mean the CMS editor would have to delete/add each gallery rather than picking a template each time - which is far from ideal.
Is there a way to get around it, perhaps paying more to remove the limit, or a clever way to show a different page template based on a collection item field?
I can only think of two reasonable approaches.
One is to think of your page as a series of layouts that contain reusable components, for example;
DIV - Layout 1
H1 - ( title )
COLLECTIONLIST - ( photo gallery )
DIV - Layout 2
SLOT - Reuse Collection List photo gallery from Layout 1
The idea is that with custom code, if you determine layout2 is active, you can pull DOM elements and content in from your other conditionally-hidden areas selectively. I describe that here as a SLOT.
In this way, your design is more DRY ( don’t repeat yourself ) and some of your layouts just show placeholder divs where certain content will go.
I use this technique when I need to do creative rearrangements, like weird nested list arrangements, or converting a collection list into tabs. Content can be shifted around this way with a bit of creative scripting.
This is the route I’d take if you can, and if you find your layouts are repeating collection list “components” within them.
The only other approach that I’d use here is a reverse proxy, but in this case it’s a rather complex setup. I’d build the layouts as un-indexable static pages e.g.
/layouts/layout-1 and it would contain the main arrangement of the page body, and determine what I want ( this grid, that gallery, a video… ).
You’d need to tag everything with custom attributes so that you can match them up, and then in your reverse proxy, it would get the layout, get your content, and act as a layout engine to combine them. This may require nodejs in order to really do the DOM manipulations you want.