I am currently building a wordpress theme using the isotope.js script which allows you to display articles on the same step by filtering their categories, I struggled a lot and I still can't get the expected result:
Here a link which will lead you to the expected result (a full version in HTML / CSS):
https://vgamerz.fr/isotopehelp/gallery/blog.html
Here my wordpress theme (PHP Files):
<!-- Isotope Header -->
<div class="row">
<div class="col-md-12">
<h2 class="isotope-button-title">Isotope Blog Sort By</h2>
<div id="isotope-filters" class="isotope-button-group">
<li><a href="#" data-filter="*" class="selected">Everything</a></li>
<?php
$terms = get_categories(); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<button class='button'><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></button>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</div>
</div>
</div>
<!-- Isotope Header -->
<!--------------------------------------- end of header -------------------------------------->
<!-- Isotope Grid -->
<div class="row isotope-grid">
<?php
// Loops
if(have_posts()):
while(have_posts()):
the_post(); ?>
<!-- Isotope Grid-Item -->
<div class="col-md-3 col-sm-4 col-xs-12 isotope-grid-item design " data-category="<?php get_the_category($post->ID); ?>">
<div class="isotope-item">
<a href="#"><div class="isotope-feature-image"><?php the_post_thumbnail() ?></div>
<h3 class="isotope-title"><a href="<?php the_permalink()?>"><?php the_title(); ?></a></h3>
<p class="isotope-number">Post No: <?php the_ID(); ?></p>
<p class="isotope-name">Author: <?php the_author() ?></p>
<p class="isotope-type">Blog Type: <?php the_category() ?></p>
<p class="isotope-datetime">Post Date: <?php the_date() ?> at <?php the_time() ?></p>
<p class="isotope-blog"><?php the_content(); ?></p>
</div>
</div>
<!-- Isotope Grid-Item -->
<?php
Endwhile;
Endif;
?>
</div>
<!-- End of Isotope Grid -->
<!-- Begin of Footer -->
</div>
</body>
</html>
<!-- End of Footer -->
JS File (isotope.js):
"use strict";
(function ($){
$.fn.isotope_gallery = function(){
jQuery( function() {
var $container = jQuery('.isotope-grid');
// use imagesLoaded, instead of window.load
$container.imagesLoaded( function() {
$container.isotope({
itemSelector: '.isotope-item',
// masonry is default layoutMode, no need to specify it
});
})
});
// init Isotope
var $grid = $('.isotope-grid').isotope({
itemSelector: '.isotope-grid-item',
layoutMode: 'fitRows',
isFitWidth: true,
getSortData: {
name: '.isotope-name',
title: '.isotope-title',
details: '.isotope-details',
symbol: '.isotope-symbol',
type: '.isotope-type',
number: '.isotope-number',
category: '[data-category]',
//you can add hear more sorting class like those
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#isotope-filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// bind sort button click
$('#isotope-sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$grid.isotope({ sortBy: sortByValue });
});
// change is-checked class on buttons
$('.isotope-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');
});
});
// Select and loop the container element of the elements you want to equalise
$('.isotope-grid').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$('.isotope-grid-item', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$('.isotope-grid-item',this).height(highestBox);
});
}
$(this).isotope_gallery();
}(jQuery));
Thanks for your help!
