Masonry Grid with random larger images

masonry-loop-focusorange

<?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>