Change Masonry Breakpoints

[Heather_Mann]

Is there a way other than in dmxMasonry.js to change the breakpoints for small, medium, large, etc?

Also, I note that there is an xxl value in the .js file but that doesn't appear in the masonry options, nor does it work manually adding it to the code.

[famousmag]

Hey Heather,

Something like that?
On my content page I added a page flow with auto-run and I call a javascript function initMasnrBrkpoints.
Or anyother way you like to do it

masonry1 is my masonry id

<script>
    function initMasnrBrkpoints() {
        
        const element = document.getElementById('masonry1');
        if (element) {
            console.log(element.dmxComponent.breakpoints);
            element.dmxComponent.breakpoints.sm = 100;
            element.dmxComponent.breakpoints.md = 200;
            element.dmxComponent.breakpoints.lg = 300;
            element.dmxComponent.breakpoints.xm = 400;
            element.dmxComponent.breakpoints.xl = 500;
            console.log(element.dmxComponent.breakpoints);
        } else {
           
           console.log('component not found in DOM');
        }
    }
    
</script>

[Heather_Mann]

Cool. That's definitely better than doing it directly in the dmxMasonry.js
Thx.

Oh - what's the xm size? Is that one that you've just randomly named that you can use in the masonry code?

Edit: This isn't working for me. It's not overriding the values in dmxMasonry.js

[famousmag]

Maybe I didn't understand correctly or it is because I'm on AC1...

I tried to change the values of the default values of masonry breakpoints and i think it works:

So, look at the short video (until 0:30) without the breakpoint changes and then with the changes:
*at about 0:30 I switched to wappler, uncommented the javascript changes, saved and switch back to browser but it is not visible in the video...

[Teodor]

You can add the following to the masonry container code in order to se custom breakpoints:

dmx-bind:breakpoints="{ sm: 480, md: 768, lg: 992, xl: 1200, xxl: 1400 }"

Note, this is available in App Connect 2 / Masonry v2 and not available for the old version 1.

This option will be added in the UI in the next update.

[Heather_Mann]

Awesome!!! Thanks @Teodor

[Heather_Mann]

The XXL breakpoint isn't working. Have tested with several breakpoints/columns and it never changes at the XXLarge breakpoint.

Very cool to be able to put the breakpoints into the GUI though!

[Teodor]

Are you sure you’re on the latest Wappler and the latest masonry js file is on the server? Also make sure to clear your browser cache.

[Heather_Mann]

That was it - I hadn't uploaded the latest masonry js file. D'oh.