Zkk Zkk - 3 months ago 14
jQuery Question

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

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
div
s 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
div
s 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?

Answer

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