Hi There!
TLDR: I need to find a workaround to placing a collection list within a linked element. We want to have a popup modal for a team members page, which is all linked to the CMS, the twist here being that the team members are also organized by a tab pane on the page (so you can choose which category of employees, then click each employee to trigger a popup with their bio). How do we make this happen?
I’ve created a super dumbed-down (stylistically) version of this part of my site and attached here for a read-only (bottom of the page)
- I cannot use the actual site due to client confidentiality, but hopefully this gives the jist of it.
Full read for more details:
My client has a few different brands within their company structure. On their Team Members page of the new site we’re building, we’ve organized headshots for those employees by creating clickable tabs. When you click a tab for each brand, the headshots for its corresponding employees appear, pulling the image and name for each employee from the CMS. Great!
Next, we’ve created a popup modal that is intended to function as follows: when you click each individual employee’s headshot, a popup appears that contains their larger headshot, name, title, and bio - and a close button in the top right corner. The data inside that popup modal is also pulled from the CMS.
PROBLEM(S):
When we click on any employee’s headshot, the popup that appears is only pulling the first data item (in this case, the first employee) from the CMS inside whichever category you’re in. I have set rules and filters to pull the data from the company in which tab you are currently located and in the order they should appear (via numbering system in the CMS), so I don’t think that’s the issue - it’s pulling the data for the right company/tab category, but only the first person in that category no matter which image card you click.
I think, and I stress that word here because I’m still learning Webflow, the issue is that I can’t seem to make the interaction correspond to the individual team cards - the mouse click that triggers the popup open interaction is corresponding to a parent instead.
I am guessing I need to place the popup modal inside of the element housing the individual card, so we’re creating that link between clicking the individual card and triggering the popup, but I am not able to nest my popup modal element inside there. Again, the image card is linked to the tabs we’ve created, and so I am unable to place a collection list within a linked element.
Any suggestions on how to accomplish this? I know an alternative could be to have a link or button on each image card that links out to a separate CMS Collection page, but hoping I can make a popup work.
Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])