Using Masonry in Genesis With Different Sized Featured Images

This tutorial provides a file which you can use on any archive page in Genesis.

The template file includes all the code which removes the content and only displays the featured image.

The featured image can be any height however in this case, must be the same width.

Here’s one example of what this template generates when used as the front-page.php template on a default Genesis child theme.

All you need to do is add featured images to each post.

Code Installation

There’s 3 simple steps:

1. Using a code editor, create new file named front-page.php and add the PHP code to the start of the file.
2. Add the CSS to the end of your child themes style.css file.
3. Create a new file named masonry-options.js and add the jQuery to the file in your child themes js folder. Create a js folder if needed.

Here’s all the code:

Related Tutorials

• Installing Masonry Cascading Grid Layout in Genesis