Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Masonry Grid with random larger images
<?php
/**
* Template Name: Teampagina
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Deliciae Design custom
* @since 1.0.0
*/
get_header(); ?>
<div id="primary" <?php astra_primary_class(); ?>>
<?php astra_primary_content_top(); ?>
<main id="main" class="site-main team-page" role="main">
<header class="entry-header <?php astra_entry_header_class(); ?>">
<h1 class="entry-title text-center" itemprop="headline"><?php echo post_type_archive_title(); ?></h1>
<form class="quicksearch">
<div class="input-group">
<input type="text" id="qs-input" placeholder="<?php _e('Zoek op naam of functie', 'focusorange'); ?>" onkeypress="return event.keyCode != 13;">
<i class="fa fa-search"></i>
</div>
</form><!-- quicksearch -->
</header><!-- .entry-header -->
<?php
$args = array(
'orderby' => 'rand',
'post_type' => 'focus_team',
'posts_per_page' => -1
);
$query = new WP_Query( $args );
$count = 0;
if ( $query->have_posts() ) :
$numsmallneeded = round($query->post_count / 3); ?>
<ul id="team-masonry">
<li class="grid-sizer"></li>
<?php while ( $query->have_posts() ) : $query->the_post();
if ( !$numsmallneeded ) $size = 1;
else if ( $numsmallneeded == $query->post_count - $query->current_post) $size = 0;
else $size = rand(0, 1);
if ( !$size ) $numsmallneeded--;
?>
<li class="grid-item size-<?php echo ++$size; ?>">
<a href="<?php echo get_post_permalink(); ?>">
<div class="fo--info">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('team_member');
} else { ?>
<img src="http://via.placeholder.com/800x800" alt="<?php the_title(); ?>" />
<?php } ?>
<div class="fo--overlay">
<div class="table">
<div class="item">
<?php the_title( '<h3 class="entry-title" itemprop="headline">', '</h3>' ); ?>
<?php if ( get_field( 'functie_team' ) ) : ?><p><?php the_field( 'functie_team' ); ?></p><?php endif; ?>
</div>
</div>
</div>
</div>
</a>
</li>
<?php endwhile; wp_reset_postdata(); ?><!-- reset loop -->
</ul>
<?php endif;?>
</main><!-- #main -->
<?php astra_primary_content_bottom(); ?>
</div><!-- #primary -->
<?php get_footer(); ?>
<script>
(function($){
$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
var qsRegex;
var $container = $('#team-masonry');
$container.isotope({
itemSelector: '.grid-item'
});
var $grid = $('#team-masonry').isotope({
resizable: true,
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
columnWidth: 300,
masonry: {
columnWidth: '.grid-sizer'
},
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// use value of search field to filter
var $quicksearch = $('input#qs-input').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
})( jQuery );
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.