Isotope + Webflow's CMS

Community resources Show & Tell
1

My first experience with Webflow’s CMS was amazing. What a great tool!
Thank you dear webflow team :smile:

https://webflow.com/website/Rumi-igksq852?s=rumi

1408×1964 457 KB

And also very nice to used mixed with plugins like Isotope.
BTW, many thanks to @Mogeek for his amazing exemple.

PS.: So sorry, but the whole website is in Portuguese. For the Isotope + CMS page, please check here: Rumi brindes. Personalize canecas, copos, xícas e muito mais.

11 Likes
2

That’s absolutely great :smile:

Are you using Masonry on top of this or doesn Isotope take care of the grid?

You should know that I have a very big screen and yet the “cards” feel oversized. I can only see one line of cards.

3

Thanks @vincent!
Only Isotope :smile:

You are totally right! I will create one more css media queries for huge screens like yours to create 4 columns.
Thanks for the advice!

4

As for now the cards are very high. Adding a column will mecanically shrink them a bit.

http://vincent.polenordstudio.fr/snap/5l7bi.jpg

Thanks for the precisions :slight_smile: Nice site overall, simple and not cluttered.

1 Like
5

Very good job :clap: :slight_smile:

1 Like
6

Beautiful work @maximus :smiley: very inspiring to the whole community seeing someone incorporate isotope with the cms! :smiley:

1 Like
7

Hi @maximus, thanks for sharing such an amazing piece of work.

I’ve been trying to achieve the same but there must be something I must be doing wrong… Thus, I’d thought I ask you two questions that might be the key to all my problems with getting this to work:

1. What’s the exact code you added in the website footer section?

When viewing your website in webflow designer, as you open the Product page settings there’s no code there to be found. Thus, I presume you added it to the site’s footer, don’t you? Can you please share it with us?

2. How did you get this to work with the dynamic embed?

I mean, in a normal scenario you’d have the “item” container which is used for filtering by simply adding global classes to each of them. For example, one can create a div with class “item” and then add additional classes to it:

.item .blue .small
.item .blue
.item .red
etc.

Then, you’d use buttons with custom data-filter attributes to filter the above.

However, looking at your website, you created a dynamic embed with the “item” container, and then “dynamic” as the only additional class. That is, a div named .item .dynamic

I’d really appreciate if you could shed some light on this. I’ve been stuck on this for a week now!

Thanks a lot!

1 Like
8

Hey Omar,

I’m glad that you like it :wink:

  1. I’ve followed this nice tutotial here and just adapt it a little bit to fit on what I was looking for.

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
    <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js></script>


   // add dynamic class
 jQuery
 ( '.w-dyn-item .categoria' ).each
 (
 	function( index, element )
 	{
 		var _this = jQuery( element );
 			_this.parent().parent().addClass( _this.text().toLowerCase() );
 	}
 );



 $(document).ready( function() {
   // init Isotope
   var $grid = $('.grid').isotope({
     itemSelector: '.w-dyn-item',
     sortBy : 'random'
   });
   
   
   
   // layout Isotope after each image loads
   $grid.imagesLoaded().progress( function() {
     $grid.isotope('layout')
   }); 

   // store filter for each group
   var filters = {};

   $('.filters').on( 'click', '.button', function() {
     var $this = $(this);
     // get group key
     var $buttonGroup = $this.parents('.button-group');
     var filterGroup = $buttonGroup.attr('data-filter-group');
     // set filter for group
     filters[ filterGroup ] = $this.attr('data-filter');
     // combine filters
     var filterValue = concatValues( filters );
     // set filter for Isotope
     $grid.isotope({ filter: filterValue });
   });

   // change is-checked class on buttons
   $('.button-group').each( function( i, buttonGroup ) {
     var $buttonGroup = $( buttonGroup );
     $buttonGroup.on( 'click', 'button', function() {
       $buttonGroup.find('.is-checked').removeClass('is-checked');
       $( this ).addClass('is-checked');
     });
   });
 });

 // flatten object by concatting values
 function concatValues( obj ) {
   var value = '';
   for ( var prop in obj ) {
     value += obj[ prop ];
   }
   return value;
 }

  2. To be honest, I had a huge help from a developer/friend (Morris Russel) to add dynamically a class using information from cms, but basically is:

       // add dynamic class
 jQuery
 ( '.w-dyn-item .categoria' ).each
 (
 	function( index, element )
 	{
 		var _this = jQuery( element );
 			_this.parent().parent().addClass( _this.text().toLowerCase() );
 	}
 );

I hope it also works to you :slight_smile:
Cheers

PS.: :sweat_smile: Don’t forget to add < script >

2 Likes
9

Thanks a lot Maximus!

That really helps. A lot.

Will try and make it work and make sure I’ll post the results.

Cheers,
Omar

10

Omar,

Were you able to get the custom code to work with your CMS? If so, please shine some light on how you did it.

Christopher

11

Hi guys,

Where does that code pull the dynamic class information from? Should “categoria” correspond to a field in my CMS collection? Trying to figure this out and pretty new to this!

Thanks a lot!