[Resolved] masonry for other pages

[Keith]

I’d like to use the masonry layout for pages other than posts and archives.

My use case is a page listing categories, shown in the same style as the posts. I have added a featured image to the taxonomy meta, and can produce a category card with image, title and description. Currently I am using a CSS grid, but it looks shabby compared to the post pages.

First question: Is there a ridiculously easy way to do this? I used the few lines of code from this forum to enable masonry on my custom post types. Is there something similar?

My second question assumes the answer to the above is no. I intend to use the masonry.js functions with the recommended HTML mark-up. Is there any guidance you give me? Do I need to do anything special to enqueue the javascript?

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

The GP masonry will only work when using the structure we use for post archives. Does your page use that same structure, or are they elements inside the page content?

If it’s the latter, you’ll likely need to use masonry.js to initialize it using your specific markup. There isn’t anything special you’ll need to do – you just need to add the file and then initialize it 🙂

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

[Keith]

Thanks Tom. As I expected, and thanks for the prompt response.

[Tom]

No problem 🙂

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

[Keith]

Tom

just to close the loop on this.

It was, in fact, very simple. I removed all my css grid classes, and replaced them with the unsemantic grid classes in Generatepress. Used the script.js from blog functions, and it pretty much worked. A bit of tidying up making the css a bit more specific, and done.

In simple terms I removed a lot of my code and just referenced yours.

Very happy.

[Tom]

Awesome, glad you got it working 🙂

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

[Author]

Posts