Isotope + Webflow... Filter grid based layouts with ease

Hello & Thanks :wink:

I just wanted to contribute something back to everybody that would be useful. We’re all learning/building off each other here. I knew people have been wanting to see a working demo of this for a long time now, including me. So I just jumped into it yesterday, excited to finally see it in action myself :wink:

@sabanna Go for it. I’m actually pretty novice at html/css/jquery. I’m learning as I go but a more advanced user could probably do some pretty cool stuff with it & along with a better write up.

Some more advanced stuff could be pulled off by some of the jQuery ninjas that hang around here rather easily. Isotope has great documentation… At this point it just uses the default “masonry” layout, along with an additional ImagesLoaded plugin to ensure those are loaded into the DOM prior to handling the layout. Otherwise the layout gets all wonky looking.

3 Likes

Los brilliantes @Mogeek! :smile:

2 Likes

@Mogeek Really nice! I have been wanting to try this for a while. Awesome implementation of isotope with all of the styling and layout in Webflow - exactly what I was hoping for. Opens up a number of cool options to explore. Thanks Brandon!

1 Like

Now this is really cool! Used this plugin in the past for a few projects will definately be playing with it in Webflow now :smile:

1 Like

It’s awesome! Thanks for sharing :grinning:

1 Like

Well done! Thanks for sharing.

1 Like

Hello,

@ChrisR - I believe you figured it out. You just click through the link above, it takes you to my profile page. Then in the top right there is a big “clone” button.

@sabanna mentioned she might do a more thorough write up on how to use/implement this into a project.

For now, the basic steps are to copy the jquery script over from the cloned site into the bottom section called, “Footer” within the Custom Code section of your specific site, you do this through your dashboard. These contain hosted cdn links to the actual isotope plugin + the imagesloaded plugin, along with the code to run/invoke the script…

Then follow steps 1-3 as noted in the original post. Btw, the top link on the actual page links directly to the Isotope documentation. If you feel like trying some different stuff you can play around with their code pens, try to change some of the options in the plugin, etc… if you know some jQuery.

As mentioned above, I wanted to make it “extendable” for actual use in projects - so at this point its only setup for basic “class” based filtering, as in you just add an arbitrary class linked up to a filter/button with a custom data attribute with that same class name.

“Sorting” is more specific to an individual project, and it seemed like it required some custom written code/functions to get it working… Maybe not - again - I’m a novice at all this stuff. I’m sure if somebody needed some basic alphabetical/etc type of sorting in addition to filtering then a more experienced javascript/jquery developer could help get that type of functionality working without too much effort.

Isotope also has a really cool code pen demo that uses a form field & “live search” to filter… The code to get that kind of functionality working didn’t look too daunting, so that might be something to try to play around with as well.

1 Like

Hi Mogeek, yes, d’oh, the button labeled Clone .

Thank you so much for sharing this, and explaining how to adapt it. Awesome.

1 Like

More like IsoDOPE! Am I right? :smiley:

1 Like

@sabanna The preview example link that features Isotope is a 404 http://isotop-tutorial.webflow.io/38. Would you please re-link it? I’d really like to take a peek under the hood.

2 Likes

:slight_smile: http://filtering-plugins.webflow.io/

Also here is read-only link https://preview.webflow.com/preview/filtering-plugins?preview=b231b15d3d6a5b1cfc3e27fe7e4e1022

2 Likes

@Mogeek
Thank you for the awesome work you did explaining how it works, and for making it clonable.
Just adding to the love here with my link where I tweaked your filters and fit in my content. Let me know what you guys think. http://isotopelearning.webflow.io/

2 Likes

Hello mate,
I tried to implement the filter but it just didn’t worked.

My masonry script is OK but when I tried to filter the thumbs nothing happend, I added 2 custom classes to the thumbs, I added the “data-filter” and the value.

Nothing.

What am I doing wrong?
https://webflow.com/website/alexandras-igl28f6z?s=alexandras

The page is named “toate_operele”

Thanks alot!
Mugur

can some hover effects be used in this layout system.

something like this >> Holiday Marketing Tips | Mailchimp

Thank you, @Mogeek , nice work. Do you think there is any way you can implement Isotope with categories using dynamic lists? I have buildt a page using @Waldo’s technique[quote=“Waldo, post:2, topic:23551”]
https://preview.webflow.com/preview/flow-in?preview=99d20c3007c32ab09ef1da4455a8de8c
[/quote]
and I would love to add the Isotope effect to it.

1 Like

I can’t seem to figure this out. I would appreciate any tips. I’ve posted the JS file to my public dropbox. Not sure what I’m doing wrong here. Thanks!

https://preview.webflow.com/preview/isotope-test-35b51c?preview=8176ca1ad095264a7c0dfca58c58865e

Can you use isotope to filter dynamic lists?

My understanding is that you must use Classes to filter with isotope, however dynamic list items all have the same class.

What are your thoughts on this?

Hey,

Here’s how you do it - Isotope Search & Filter + Webflow CMS - Show & Tell - Forum | Webflow

You can thank the very talented @SidneyOttelohe

2 Likes