Collection items with different Field order


I am trying to emulate a masonry layout similar to cargo collective’s Y082, here is a reference

Basically I followed this tutorial to create a column layout with the typography column option

The thing is, as you can see in the reference, collection items displayed in even columns show the Field image at the top, and collection items displayed in odd columns show the Field text at the top. This creates a very interesting interlocking pattern that differs from the normal masonry where you have always text at the beginning of every column:

Wanted to know if this is possible, I know a little javascript but just couldn’t figure it out, any help is appreciated!

PS tagged the thread as CMS but if needed let me know and I can change it to “custom code”

Here is my public share link: Read-only link
Here is the published site: Site

hi @atomichavez I have send DM with video containing some suggestions how it can be done.

1 Like

Using 4 different collections on a 4col1row grid was the approach suggested by @Stan
then you can arrange the elements of the collection item in a different order between the columns. To make it all responsive you can switch from 4col1row to a 2col2row grid and then 1col4row as the screen shrinks.
For an extra level of customization instead of using Text + Image Fields in the collection item you could just use one RichText and customize each items text and image placement

Thanks for the help

Hi @atomichavez glad you have find my video helpful to solve your request. :wink:

PS: IMO there is no need to use RTE for simple text as this element should be used for complex content as eg. blog article but if you have found it useful … :wink:

@Stan Yeah, just dumped RTE, too much hassle to format,
I found a pretty neat hack using filters, I can use the same collection on every column and just add an “Option Field” filter to partially display the collection

1 Like