Masonry Posts in Oxygen

This members-only tutorial provides the steps to apply a real masonry layout to posts in Posts page and archives in Oxygen.

Live Demo

We are going to make the titles appear on a dark overlay when the posts' images are hovered.

Desktop: 3 columns

1120px and below: 2 columns

768px and below: 1 column

The images will be set to appear automatically (all the time) from 1120px and below.

A fallback image will appear for posts that do not have a featured image.

If you do not have a membership you can find a free tutorial on this topic here.

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom Image Sizes

Code:

add_image_size( 'masonry_thumb', 800, 0, true );

Set the snippet to run everywhere. Save changes and activate.

Step 2

If there are any posts that already have featured images, regenerate thumbnails.

Add/Edit your posts and ensure that they have featured images.

Images should be at least 800px wide.

For best masonry look, use images of varying heights.

Step 3

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Create a file named masonry-init.js in the plugin's assets/js directory having the following: