MixItUp w CMS masonry layout issue

Hi everyone,

I have managed to create a page with a set of wedding images which I can filter by 5 categories using the MixItUp3 tutorial for Webflow. It took me awhile as I am not the most comfortable with Javascript but everything is working as I want except for one thing. As I understand it, the images should be laid out masonry-style, meaning that despite having various heights/widths, all the images stack together, if that makes sense?

As you can see on my page that’s not happening. I tried looking into how to fix this myself but can’t seem to find any examples with .mix element of varying heights/widths.

I might be getting MixItUp3’s functionality confused with Isotope? but regardless, does anyone have any recommendations for how to give this grid of images a “masonry” style layout?

The second issue I’d love some input on is how to make my filter ‘links’ change their styling when “active” (similar to what I’ve done on my “archive” page using @buntestrahlen’s guide here. I tried changing the “focussed” state but it doesn’t seem to have any effect.

UPDATE:

I played around with adding masonry.js from this tutorial that @Marci posted to the Forums here. I was excited because it seemed to work, but when I went to filter by any of the categories it broke pretty hard. Any suggestions on what to try from here? I feel like I am close to figuring it out.

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>

Above is the code I added before the tag on the ‘weddings’ page. I changed .masonry to .container and .masonry-item to .mix because I figured I needed to so it could speak to the class names I gave the elements on the page.

Thanks everyone!

Nick


Here is my public share link: https://preview.webflow.com/preview/nicholaspfosiphoto?utm_source=nicholaspfosiphoto&preview=6532666811a6dde76efa787602d44637

Just want to bump this, see if anyone has any insights.

Anyone able to help?

came to same issue, solved it from this link
https://stackoverflow.com/questions/20233555/mixitup-and-masonry-are-not-working-together

Thank you for sharing this link. I am not sure I 100% understand the solution. I pasted the code on the Stackoverflow comment so all lines of my custom code of my Before /body tag section of my page “weddings” is as follows:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>

<script>
       // Creating dynamic elements classes from its categories:
       
       var catArray = document.querySelectorAll('.w-dyn-item .categ');
       catArray.forEach( function(elem) {
         var text = elem.innerText || elem.innerContent;
         if (!text) { 
              text = 'empty';
              }
         var conv = text.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
         var className = conv.replace (/ /g, "-")
                             .toLowerCase()
                             .trim();
         if (!isNaN(parseInt(className.charAt(0), 10))) {
            className = ("_" + className);
         }
         elem.parentElement.classList.add(className);  });
  
       // Creating a custom data-order attributes from blog titles:
       var sortArray = document.querySelectorAll('.w-dyn-item .title');
       sortArray.forEach( function(sortElem) {    
         var sortText = sortElem.innerText || sortElem.innerContent;
         sortElem.parentElement.setAttribute('data-order', sortText);});
      // Set the reference to the container
      var containerEl = document.querySelector('.container');
 
      // Call the MixitUp plugin
      mixitup(containerEl);
</script>

<script>

// mixItUp function
$('#grid').mixItUp({
        activeClass: 'on',
        callbacks: { 
            onMixEnd: function(state){
                masonryGrid(); // ******* here call masonry function
            }
        }
    });

function masonryGrid(){
    var $container = $('#container');
    // initialize
    $container.masonry({
        itemSelector: '.item',
        columnWidth: '.item', //as you wish , you can use numeric 
        isAnimated: true,
    });
    $container.masonry('reloadItems');
    $container.masonry('layout');
}

</script>

<!-- 

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script>
  //init masonry grid 
$(window).on("load", function() {
	$('.container').masonry({
    itemSelector: '.mix'
  });
});

</script>

--!>

Thanks for your help and welcome to the forum!

Facing the same issue here, breaking of masonry grid after applying mixItUp filter.

Tried to solve it with the callback code, that @ramitarora shared here, but no success.

Farther help of how to use the callback code would be very much appreciated!

I have exactly the same problem! I really need help with this, please. I understand the logic behind the fix but I don´t get it working. How do I have to adjust the code from stackoverflow?