How to insert each image of gallery in certain div?

I’m trying to reproduce this Masonry to show a gallery. I created a CPT for this. “CPT – Gallery”.

First, I thought of creating a Custom Post Type to publish all images together.

MY CPT:

—>>> title <<<—
—>>> image default – thumbnail <<<—
—>>> cotent <<<—
—>>>images<<<—
—>>>images<<<—
…..

The first three sections (title, image default and content) is the basics. Is ready.

After, I thought about using custom metabox and add each image URL. However, add url by url is nothing intuitive and a lot more work for the user, be it newbie or advanced. Furthermore, the amount will vary pictures can be 1, may be 5 may be 10 and so on….

I saw that there is a plugin for wordpress, but the plugin not is full width and when I set the css of plugin to be full width, the Mansory gets several bugs in the viewport resize.

Noting the functioning of the plugin and your code, I saw that in each post, the plugin uses the own gallery of wordpress editor. It take the generated shortcode (inside of the_content();) and displays the images within the Mansory classes.

I’m trying to do this, but without success.

**Anyway, what I want to do?**

->Catch the shortcode of wordpress gallery and display each image within the divs of my masonry <-

Example logical:
Shortcode of gallery: [gallery ids="1,2,3,4,5,6"]

…. I take each image and display in the loop ….

Practical example:

Here I execute the loop with the divs of masonry.

`<?php
$args = array( ‘post_type’ => ‘gallery’, ‘showposts’ => 1 );
$wp_query = new WP_Query($args);
if(have_posts()):
while ($wp_query -> have_posts()) : $wp_query -> the_post();
?>

<div class=”item”>
<figure style=”margin: 0px !important” itemprop=”associatedMedia” itemscope itemtype=”https://schema.org/ImageObject”&gt;
<a href=”<?php IMAGE 1 OF GALLERY WP; ?>” itemprop=”contentUrl” data-size=”1800×1200″ data-index=”0″>
<img src=”<?php IMAGE 1 OF GALLERY WP; ?>” class=”image” itemprop=”thumbnail” alt=””>
</a>
</figure>
</div> `

With the loop will appears all imagens in gallery.

`<div class=”item”>
<figure style=”margin: 0px !important” itemprop=”associatedMedia” itemscope itemtype=”https://schema.org/ImageObject”&gt;
<a href=”<?php IMAGE 2 OF GALLERY WP; ?>” itemprop=”contentUrl” data-size=”1800×1200″ data-index=”0″>
<img src=”<?php IMAGE 2 OF GALLERY WP; ?>” class=”image” itemprop=”thumbnail” alt=””>
</a>
</figure>
</div>

<div class=”item”>
<figure style=”margin: 0px !important” itemprop=”associatedMedia” itemscope itemtype=”https://schema.org/ImageObject”&gt;
<a href=”<?php IMAGE 3 OF GALLERY WP; ?>” itemprop=”contentUrl” data-size=”1800×1200″ data-index=”0″>
<img src=”<?php IMAGE 3 OF GALLERY WP; ?>” class=”image” itemprop=”thumbnail” alt=””>
</a>
</figure>
</div><blockquote>`

and so on…..

How I can do this?