Wordpress post. List images as a masonry grid - wordpress

Question

I have googled around without finding a good solution for this. What i want to do is to create a masonry-like grid in a post where all images in the post should be in the masonry grid. How could i achieve this?

Answer 1

Note: With this idea you can get all attached image to the post either in gallery or inside the content
First let's add Masonry to your theme,
wp_enqueue_script( 'masonry' );
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js' );
then add this javascript code to your theme somewhere in footer or in your custom.js file
jQuery(window).load(function() {
var container = jQuery('#mas-maincontainer');
var msnry = new Masonry(container, {
itemSelector: '.mas-item',
columnWidth: '.mas-item',
});
});
Now let's get all images attached to the post as you want
$attachments = get_children(array('post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image'));
foreach($attachments as $att_id => $attachment) {
$full_img_url = wp_get_attachment_url($attachment->ID);
//Here is your HTML to grid your images...
// Remember your images should be between <div id="mas-maincontainer"></div>
}
now you should add your custom CSS as below
.mas-item {
width: 50%; // if you want two column
}
.mas-item {
width: 33%; // if you want three column
}
This is the whole idea and hope it works for you

Answer 2

You can use wordpress's native gallery. This solution will give you good control on where you want to put the images in the content and it is easy to manage the gallery and it's images.
Disable the default style with this filter:
add_filter( 'use_default_gallery_style', '__return_false' );
And then use the desandro's masonry plugin to create the gird. This plugin is well documented and is the most common for creating masonry grids, so you should be fine with this plugin.
Remember to style the gallery so it will work with the masonry plugin. Here are the 2 selectors you will be using, .gallery (is the container for every gallery), and .gallery-item (is the conatiner for each image in the gallery).