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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: