Using masonry to display posts depending on image size

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"  >';
            echo '<div class="blog-media">';
            if( has_post_thumbnail() ) {
                    the_post_thumbnail( 'medium' ); 
            echo '</div>';  
            echo '<div class="blog-title">';
            echo '</div>';  

            echo '<div class="blog-content">';
            echo '</div>';  

            echo '<div class="blog-footer">footnotes';
            echo '</div>';

            echo '</div>';


Jquery part

var container= document.querySelector('#ms-container');
var msnry=new Masonry(container,{
itemSelector: '.ms-item',
columnWidth: 'ms-item'


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

Leave a Reply

Your email address will not be published. Required fields are marked *