I’m using masonry to display wordpress posts in a three column grid view. I’m using the following codes:-
<div class="row">
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12 clearfix visible-xs visible-sm visible-md visible-lg">
<div id="ms-container" >
<?php while(have_posts())
{
echo '<div class=" ms-item blog-post" >';
the_post();
echo '<div class="blog-media">';
if( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
}
echo '</div>';
echo '<div class="blog-title">';
the_title();
echo '</div>';
echo '<div class="blog-content">';
the_content();
echo '</div>';
echo '<div class="blog-footer">footnotes';
echo '</div>';
echo '</div>';
}
</div>
</div>
</div>
Jquery part
var container= document.querySelector('#ms-container');
var msnry=new Masonry(container,{
itemSelector: '.ms-item',
columnWidth: 'ms-item'
});
CSS
.ms-item
{
width:30%;
background-color:cornsilk;
border:1px solid gray;
} /* blog-post , blog-title , blog-* are all used in design the post*/
So, the codes work good and displays three column of equal size (ofcourse because of width 30% ) but the problem is with the image it looks compressed and I want to display the posts according to image size.. like few images(post) should take up multi-columns ..
The masonry look which i want to create can be seen in Halycon Theme
Thanks in advance.
Please help.
Read more here: Using masonry to display posts depending on image size