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?

score 0 · Accepted Answer · answered Aug 22 '16 at 13:43

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 
}
?>

Simple enough! I was for days looking for a solution and had not found. Including the documentation, perhaps haste in reading has hindered me. Anyway, thank you! (I'm waiting for the period of 24hrs of stackoverflow to award your 50 points) — Zkk, Aug 22 '16 at 14:41

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

1 Answers1