Streaming live at 10am (PST)

MixItUp w CMS masonry layout issue


#1

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


#2

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


#3

Anyone able to help?