CMS Masonry grid & Finsweet Combine + Sort

Attributes
,
1

Hi.

I want to create a Masonry (pinterest) style grid. Where the cards have different height and the row height is not defined by the tallest card, but there is even margin between them.

I also need to combine two cms for this - I just Finsweet combine + sort to make this happen.

I then tried to add Macy.js, but couldn’t get it to work when using Finsweet Sort+combine (only without it).

Any tips on this issue? *

Thanks!

2

Hey @christopher! Are you going to filter the list later on? Or just display it with?

If you could share a link I will work on the code needed to make this setup work! :muscle:

3

That’s awesome @Support-Luis Thank you!

The link are https://vi-klinikken.webflow.io/

I am not filtering the list later on.
I am sorting using number.

It’s the section called “section_home-fagpersoner”

Right now I have the first CMS list " This is a Webflow component. Paste it into Webflow. Syncing powered by the Relume Chrome Extension." with CSS flex and wrapped down.

All the best.
Chris

4

Hey @christopher! Could you actually help me with your Macy.js config?
You can set the list styling to your linking, I will add the extra code needed to make it work with Attributes :wink:

5

I couldn’t get Macy to work so I used How to add Masonry Layout in Webflow? instead. That is now published on the site @Support-Luis

6

Hey @christopher, the issue with Refokus is that we do not have access to a refresh or init function as we do with Macy.

I would advise you to try to get the setup working with Macy, you can remove all Attributes setup until the masonry is set as you intend.

We will get it working :muscle:

7

I see @Support-Luis

Macy is now in and working, but I need to resize the window for it to work (is this due to Finsweet attributes?)

Thanks!

8

hey @christopher! Don’t worry it must have been because of how the items were being loaded combined and sorted after the Masonry styling was applied.

We can fix this by using the API callback to apply the styling after the list is combined and sorted.

I’ve also added the sort trigger click into this callback to ensure we click the button when the collections are combined, please add the following code to the </body> section of your page.

    <script>
      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmscombine',
        (listInstances) => {
          console.log('cmscombine Successfully loaded!');
          document.querySelector('.masonry-combine-sort_button').click();

          let macyInstance = Macy({
            container: '#masonry',
            margin: 16,
            columns: 3,
            breakAt: {
              991: 2,
              767: 2,
              479: 1,
            },
          });
        },
      ]);
    </script>
9

Thanks @Support-Luis !

I added this, but I still have the same problem.
Is it the same for you?

Added a loom here VI-klinikken - Din digitale samtaleklinikk - 13 July 2024 | Loom

Chris

10

hey @christopher! Yes, I can also replicate on my end.

I notice the collection items have some top position values once the styling is applied but get removed when the window resizes.

I am trying to see if this comes from Macy or your setup. Could you share a read-only link?