I'm currently creating a wordpress theme and so far all my code is working fine (my theme is based on the isotope js gallery), but I would like to transform my normal grids into masonry grids, could you help me?
Here's my code:
<?php
/**
* gallery isotope
*
*/
?>
<div class="isotopewrapper customprimary">
<div id="filters" class="button-group">
<button class="gallery-button btn from-top" data-filter="*">All</button>
<?php
$terms = get_terms("rt-ga-cat");
$count = count($terms);
if ( $count > 0 ){
foreach ( $terms as $term ) {
$termname = strtolower($term->name);
$termname = str_replace(' ','-', $termname);
echo "<button class=\"gallery-button\" data-filter='.".$termname."'>" . $term->name . "</button>\n";
}
}
?>
</div>
<div class="grid <?php
if ($gap == 'yes') {
echo 'gap';
}?>">
<?php
$args = array( 'post_type' => 'rt-gaf', 'posts_per_page' => $limit,
'order' => $order, 'gap' => $gap,
'columns' => $columns );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$terms = get_the_terms( $post, 'rt-ga-cat' );
if ( $terms && ! is_wp_error( $terms ) ) :
$items = array();
foreach ( $terms as $term ) {
$items[] = $term->name;
}
$taxonomy_items = join( " ", str_replace(' ', '-', $items));
$taxonomy_items = strtolower($taxonomy_items);
else :
$taxonomy_items = NULL;
endif;
?>
<div class="element-item
<?php
if ($columns == 1) {
echo 'element-item1 ';
}
elseif ($columns == 2) {
echo 'element-item2 ';
}
elseif ($columns == 3) {
echo 'element-item3 ';
}
else {
echo 'element-item2 ';
}
echo esc_attr( strtolower($taxonomy_items) );?>">
<figure id="richart">
<?php
echo the_post_thumbnail();
?>
<figcaption class="overlay">
<div class="text">
<h2><?php echo the_title(); ?></h2>
</div>
<a class="imagepopup" href="<?php the_post_thumbnail_url();?>"></a>
</figcaption>
</figure>
<p>
<?php echo the_excerpt(); ?>
</p>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
</div>
