How to insert each image of gallery in certain div? Wordpress

Question

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="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>

With the loop will appears all imagens in gallery.

<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.....

How I can do this?

Mike Mike · Accepted Answer · 2016-08-22T13:43:35

You were almost there. You just need to fetch and loop through the gallery images. Something like this should work for you. Reference here: 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 
}
?>

How to insert each image of gallery in certain div? Wordpress

1 Answers