Salvattore is a lightweight jQuery masonry Javascript alternative in which the widths of blocks and number of columns can be controlled via CSS. In this article I share the code to organize the posts on Posts page in a masonry layout using Salvattore.
We will set the number of columns to
- 4 for screen widths 769px and above
- 2 for screen widths between 481px and 768px
- 1 for screen widths below 480px
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Upload salvattore.min.js to child theme's js directory.
Step 2
Add the following in child theme's functions.php:
Hey Sridhar, was waiting for you to create a tutorial like this but I have 2 things I would like to mention / ask:
1. How do I set this look on mysite.com/blog ? there is no template being created here…
2. How can we set this script to show on one of altitude pro’s home page widgets?
Thanks again!
1. No change is needed. Just ensure that you set Blog as the Posts page at Settings > Reading.
2. Do you want to display a fixed number of Posts within a widget area of Altitude Pro’s homepage?
For 2, follow this tutorial I just posted: https://sridharkatakam.com/blog-posts-masonry-layout-altitude-pro-front-page/
[…] the comments section of Masonry in Genesis using Salvattore, a user […]