In TYPO3 there isn't just one way of doing it. Here we'll use the news extension to create Isotope filters.

You need:

  • Include the isotope js (isotope.pkgd.min.js)
  • Include jQuery

Create a sysfolder for your isotope categories an set it to "News" at "Contains Plugin". Inside this folder create some categories ("Category" under "System Records").

<div class="row news-list-item <f:if condition="{newsItem.categories}"><f:for each="{newsItem.categories}" as="category">{category.title} </f:for></f:if>">
example in Partials/List/Item.html

Replace charaters

If you want to replace special chars like ä,ö or spaces, you can extend the code with lib.newsCategoryClean (To use this version, you need to define the lib.newsCategoryClean, see here):

<div class="row news-list-item <f:if condition="{newsItem.categories}"><f:for each="{newsItem.categories}" as="category"><f:cObject typoscriptObjectPath="lib.newsCategoryClean" data="{category.title}" /> </f:for></f:if>">
fluid template

Add the filter buttons 

<div class="button-group filter-button-group">
  <button data-filter="*">show all</button>
  <button data-filter=".category-a">category-a</button>
  <button data-filter=".category-b">category-a</button>
  <button data-filter=".category-c">category-a</button>
</div>
fluid template

Initialize it with jQuery 

<script>
$( document ).ready(function() {
 
    // init Isotope:
    var $grid = $('.news-list-view').isotope({
        // options
        itemSelector: '.news-list-item',
        layoutMode: 'fitRows'  
    });
 
    // filter items on button click:
    $('.filter-button-group').on( 'click', 'button', function() {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
      
      // Add active state:
        $('.filter-button-group button').each( function( i, elem ) {
          $(this).removeClass( "active" );
        });
        $(this).addClass( "active" );
      
    });
 
});
</script>