Relume Community Icon
Relume Community
  • 馃彔Home
  • 馃搮Events

  • 馃數Announcements
  • 馃數General
  • 馃數Getting Started
  • 馃數Issues
  • 馃數Showcase

Powered by Tightknit
Issues
Issues

Efficient Methods for Managing Multiple Modal Instances in Web CMS

Avatar of 脕d谩m S.脕d谩m S.
路

This is not Relume related but Finsweet. I'm using this method for showing multiple instance of modals. https://finsweet.com/attributes/modal I have CMS cards which include individual modals but creating unique instances drives me crazy. I managed to get different data for all the cards + their modal instance but I have to add plain text fileds into my cms like: open-1 modal-1 close-1 This means whenever I create a new CMS item I have to add these into the fields. For me this feels really stupid. Is there a better solution?

14 comments

  • Avatar of 脕d谩m S.
    脕d谩m S.
    路

    This is the frontend, the sidebar is the modal

  • Avatar of Matt J.
    Matt J.
    路

    脕d谩m S. this video I did might get you pretty close. https://relume.notion.site/How-to-add-multiple-modals-5012143c03f14e6da19f8cd3e23e7f3f?pvs=4 In this case, I don't think that you need to worry about "multiple instances" because to Webflow the modal itself is not actually being iterated, its just the content, I could be wrong.

  • Avatar of Matt J.
    Matt J.
    路

    If that is truly not the case and you need to create dynamic attributes, there's an attribute for that as well. https://finsweet.com/attributes/cms-attribute

  • Avatar of Matt J.
    Matt J.
    路

    which might be what you are already doing

  • Avatar of Matt J.
    Matt J.
    路

    Lastly, if none of this resolves the issue for you, I'll need a read-only/preview link in order to help more.

  • Avatar of 脕d谩m S.
    脕d谩m S.
    路

    Thanks Matt, yeah I ended up using the CMS attributes but combining with finsweet's accessible modal solution made my data pretty dumb. I like your method though, I also done the same thing previously but I gave up on the interactions since I was unable to solve opening and closing. Webflow use "toggle" logic for clicking and the modals were fine until the second click. I see it worked for you without any problem. I was putting that together from scratch so I probably just missed something.

  • Avatar of Matt J.
    Matt J.
    路

    yeah that part definitely gets tricky

  • Avatar of 脕d谩m S.
    脕d谩m S.
    路

    For this project (it's an internal company thingy for an event) I'll be fine with this "working state". But I'll keep in mind there is a proper solution. Thanks!

  • Avatar of Matt J.
    Matt J.
    路

    sounds good

  • Avatar of 脕d谩m S.
    脕d谩m S.
    路

    In the end we ended up creating a custom jquery added to body because the modals have videos included and webflow loads up all of them which caused some performance issues. Is there any way to load the modals only when they're clicked? Just curious

  • Avatar of Matt J.
    Matt J.
    路

    oooh yeah thats tricky. Let me dig in but likely that is your best bet. Though I wonder if the implementation of the CMS attributes could be different and work better too.

  • Avatar of 脕d谩m S.
    脕d谩m S.
    路

    Not sure 馃槃 I鈥檓 getting really good in quality webflow front end building in the last few months and my colleague who can code loved the structure and we solved it in 30 minutes. The solution is really sick and I just realized this kind of cooperation is powerful as hell

  • Avatar of 脕d谩m S.
    脕d谩m S.
    路

    Not sure about the attributes I added ID-s for the specific elements

  • Avatar of 脕d谩m S.
    脕d谩m S.
    路

    https://instantstudio.webflow.io This will be a fun page for an ai music themed agency night event. There could be some ugly divs but that鈥檚 how it works now. Tried to be consistent first and a bit less later 馃槃