This members-only tutorial provides the steps to apply a real masonry layout to posts in Posts page and archives in Oxygen.
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.
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Custom Image Sizes
add_image_size( 'masonry_thumb', 800, 0, true );
Set the snippet to run everywhere. Save changes and activate.
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.
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 ($47/month or $399 one-time).
Already a member? Log in below or here.
Enter your email address to subscribe to this blog and receive notifications of new tutorials by email.
Join 488 other subscribers
Please log in again.
The login page will open in a new tab. After logging in you can close it and return to this page.