Change normal grids to masonry grids
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
Topic masonry wp-query Wordpress javascript
Category Web