How to insert each gallery image into a specific div? Wordpress

Question

I am trying to reproduce this Freemasonry to show the gallery. For this, I created CPT. "CPT Gallery".

At first, I thought about creating a custom publishing type to publish all the images together.

MY CPT:

--- →> title <<--- --- ---
--- →> the default image is thumbnail <<--- ---
--- →> cotent <--- ---
--- →> images <--- ---
--- →> images <--- ---
...

The first three sections (title, default image and content) are the main ones. Done.

After that, I thought about using a custom metabox and added each image URL. However, adding a URL to a URL is not intuitive and there is a lot more work for the user, whether new or advanced. In addition, the number will vary, photographs may be equal to 1, may be 5 may be 10, etc.

I saw that there is a plugin for WordPress , but the plugin is not full width and when I set the cssplugin to be full width, it Mansorygets a few errors in the size of the viewport.

Noting the functioning of the plugin and your code, I saw that in each post the plugin uses its own gallery of the WordPress editor. It takes the generated short code (inside the_content();) and displays the images inside the Mansory classes.

, .

, ?

- > WordPress div masonry < -

:
- : [gallery ids="1,2,3,4,5,6"]

.

:

div 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="http://schema.org/ImageObject">
      <a href="<?php IMAGE 1 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="<?php IMAGE 1 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>

, .

<div class="item">
  <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="<?php IMAGE 2 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" 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="http://schema.org/ImageObject">
      <a href="<?php IMAGE 3 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="<?php IMAGE 3 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>

 and so on.....

?

Answer 1

. . - . : https://codex.wordpress.org/Function_Reference/get_post_gallery_images

<?php
global $post;
$gallery = get_post_gallery_images( $post );

foreach( $gallery as $image_url ) {
?>
<div class="item">
  <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="<?php echo $image_url ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0">
          <img src="<?php echo $image_url ?>" class="image" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>
<?php 
}
?>