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?