[Support request] masonry grid programmatically

[Tesco]

I’m trying to show articles in masonry grid on my PHP code. So far I found the snippet that adds the classes and the microdata to the article element. Now I just nee to find the snippet that generates the style="some atributes here" added automatically at the end of article element…

So far I got this well rendered:

<div class="generate-columns-container masonry-container">

$classes = array('generate-columns', 'tablet-grid-50', 'mobile-grid-100', 'grid-parent', 'grid-25', 'posts-in-page', 'masonry-post');
if($my_posts_query->have_posts()) : while ($my_posts_query->have_posts()) : $my_posts_query->the_post();

// this renders the bellow: echo '<article id="post-'; echo the_ID() .'"'; echo post_class($classes) . generate_do_microdata( 'article' ) . '

echo <article id="post-258" class="post-258 post type-post status-publish format-standard has-post-thumbnail hentry category-catone category-catone1 tag-tagone tag-tagone1 masonry-post generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-25 no-featured-image-padding" itemtype="https://schema.org/CreativeWork" itemscope="" >;

blá, blá, blá…

endwhile;

</div>

Now I just need to find the way to generate something like this: style="position: absolute; left: 0%; top: 36.3996px;"

Help needed.

Thanks!

[Tom]

Hi there,

That’s when you need to set up Masonry JS: https://masonry.desandro.com/

If you follow the installation instructions it should be pretty straightforward.

Let us know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tesco]

Hi Tom,

I’m a little resistant to installing more scripts so as not to spoil the theme’s performance…

Let me ask you something before taking my decision:

Why do I have to install the script if I have masonry working on on blog and search pages? Shouldn’t it also work on other pages without installing the script?

Thanks!

[Tom]

There’s no difference between loading the masonry script yourself and the theme loading it – it’s the same script, same size etc…

Our masonry script is set up to work on archive pages, not single posts/pages, so it’s likely much better to just add the script to your custom pages.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts