Troubleshooting Image Stacking and Interactions in Layout 348

I'm using Layout 348 with a collection list embedded twice (to pull in images and text as they are in different divs). I have it mostly working except the images don't seem to be stacking correctly. I can't see where the z-index/fade in-out interaction are set. I don't know if it's custom code or if this is linked to GSAP..? Read-only

7 comments

Emily M.
·
Okay I found the interactions and can see that they're set on the combo classes. Is there a workaround for CMS items?
Matt J.
·
yeah dang - what a beast of a project Emily! It does "feel" like this is possible in some way but I would bet it would require a complete restructuring... Are you powering this with CMS for ease of client updating or because the destinations collection will change with the amount of items? One other way to look at this rather than restructuring completely is....would it be possible to have multiple collection lists and each one is limited to 1 - this would allow you to keep the unique class for each feature, while keeping it easy to update. Biggest limitation here is you can only have 10 collection lists on a page. So then can we use finsweet CMS nest to achieve this in some way? These are just questions I have...I'm going to dig into this one because it could be pretty fun honestly.
Emily M.
·
Hahaha it is a bit of a beast. I’m using CMS because the client will be adding destinations in the future and I don’t want to have to come in and adjust the interactions each time. I’m gonna look into CMS nest too!
Emily M.
·
I've just come back to this and I'm confused about having multiple collection lists which are limited to 1. Would that involve changes on the backend?
Matt J.
·
Emily M. naw you would need to use Finsweet CMS Nest to work around that limitation, if I am understanding you fully - if I am not just let me know
Emily M.
·
I don’t understand what you mean by having multiple collection lists, like would I need to create different collections on the backend? I’m gonna try it anyway
Matt J.
·
ah yeah I dont think that approach would work since the client would be adding destinations, this number would be changing. I also wasn't sure at the time how many items there would be either. But so you know for the future, I was suggesting if those two variables were known and smaller, that for each "row" on the page, it would essentially have its own collection list, and then you'd have nested collections to restrict what content within them would show up. Sounds overly complex for what your trying to do but there's likely some other way too.

Troubleshooting Image Stacking and Interactions in Layout 348 | Relume Community