Updated on July 26, 2019

This members-only tutorial provides the steps to customize Easy Posts component in Oxygen to show content in a box that overlaps the image on the Posts page with the image position alternating between right and left.

Scroll animations for the content boxes will be set to fade down and up down for alternating posts using the built-in AOS library.

Mobile view

A placeholder image shall be shown for posts that do not have a featured image.

We shall add

  • a custom image size for the images
  • a global counter so we can add different scroll behaviors for odd and even posts
  • a snippet to set custom excerpt length
  • an Easy Posts component and replace Template PHP and CSS with custom code

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes


add_image_size( 'post_thumbnail', 768, 500, true );

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

Regenerate thumbnails.

Add another snippet.

Title: Global post counter


This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

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


Find the article helpful and wish to donate?



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.

3 comments on “[Easy Posts] Overlapping Content on Images”

    1. Works fine for me in my local test site.

      Can you provide the URL of your blog page where the problem can be seen?

      1. Saw the conversation on this in the FB group.

        I updated the tutorial to add CSS for responsive images.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: