Archived topic
masonry grid programmatically
3 replies · Started by Tesco on September 20, 2022
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!
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 :)
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!
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.