I am trying to build a page with a collection list that can be populated with pre-built modules (that are all unique), using the CMS to choose which ones to import into the collection list. I am already doing something similar on a different page by using a multi-reference field to build salesperson bio blocks, but those all have the same structure and only image and text needs to be switched out. In this instance, each of the rectangular light blue blocks has a unique layout and different elements, so I can’t dynamically build them from the CMS. I was hoping I could somehow pre-build all of them, then convert to symbols and use the CMS to choose only a few from a list of all of them, and those symbols would populate the collection field. Any insight appreciated, thanks.
It’s important to know when the effort to do this makes sense.
Lets say…
n = the number of cms items
v = the number of variant layout designs
As n approaches v, you probably want to avoid this approach, as it has maintainability and performance costs, and adds very little value over static content.
However if v is relatively small, and n is relatively large, you can create two manageable interesting scenarios here.
Collection lists where each item has a pre-defined and unique layout.
Collection lists where items are shown with a random layout variation, just to keep things interesting. Image to the left. Image to the right. Image as background. Roll the dice…
It is possible to do this with some careful setup, and a bit of script.
The basic approach is to put all of your layout variations together as a series of ID’s DIVs, on your Collection Page, and then to retrieve that DIV content using jQuery’s $.load(). This will allow you to assemble and populate any Collection List on your site, using those layout variants you’ve defined on the Collection Page.
It’s not very performant, but it works.
Here’s a VERY crude demo hacked together in 5 mins- You can see 20 blog items, each of which uses a different layout.
The layouts are on the blog item page; where you see all 5 layout variants;
And this is stitched together using an HTML embed in the Collection List, and a bit of jQuery to populate it. Here’s that Codepen;
