Updated on September 18, 2020
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
In this tutorial we are going to apply Masonry for Posts page and all archives in Genesis.
While the tutorial has been written for Genesis Sample 3.3.1 (and Genesis 3.3.3), it should work with a few adjustments in any Genesis theme.
Step 1
Add the following in child theme's functions.php:
// Registers a custom image size for image thumbs on content archives.
add_image_size( 'masonry-image', 500, 0, true );
Step 2
Create a directory named js in the child theme directory.
Inside that, create a file named say, masonry-init.js having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
