This tutorial provides the workflow to visually arrange the posts displayed by Oxygen’s Easy Posts component in a grid using Pinegrow.
We shall import the HTML output by Oxygen into Pinegrow, build our grid incl. responsiveness and import the generated CSS into Oxygen.
Our custom grid will have one wide top post and below that, four posts in columns using named grid areas in which the posts are placed.
Note: The posts layout covered here is just an example to demonstrate the workflow and not necessarily the only thing that can be accomplished using this process.
Screencast:
Step 1 – Set up Easy Posts
Edit your Page_Template with Oxygen editor and add_edit an Easy Posts component.
In this example, we are going to feature five latest blog posts.
Add a Section. Then add an Easy Posts component inside this Section.
Go to Query and select custom
Post Type: post
Count: 5
Step 2 – Add oxy-post-[number] classes to Easy Posts
To easily target the individual posts in CSS, add auto-generated numbered classes like oxy-post-1, oxy-post-2..
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Global post counter
Code:
global $counter;
$counter = 1;Note: This method will only work with a single Easy Posts component at a time. If you want to use counters on multiple Easy Posts, you would need to declare and use separate multiple global variables.
Step 3 – Template PHP
Back to Easy Posts, go to Primary > Templates > Template PHP.
Replace the entire code with
<?php global $counter; ?>
<div class='oxy-post <?php echo 'oxy-post-' . $counter; $counter++; ?>'>
<a class='oxy-post-image' href='<?php the_permalink(); ?>' style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'>
<div class='oxy-post-title-overlay'><h2 class="oxy-post-title"><?php the_title(); ?></h2></div>
</a>
</div>Click the Save button and view any page of the site in the front end.
Step 4 – Copy posts html
Inspect the posts with Chrome’s web inspector.
Select the div having the class of oxy-posts and press Cmd+C / Ctrl+C to copy its entire HTML.
Step 5 – Over to Pinegrow
In Pinegrow, select “New page or project”. Then “Plain HTML” and new.html.
Save the file in a folder as a project and open the project.
Import HTML from Oxygen
Click on the code icon in the top toolbar or press Cmd+E (on Mac) to edit the HTML.
Paste the code from earlier step in between opening and closing body tags.
Close the HTML code panel.
Set up the grid
Click anywhere in the main page area and click div.oxy-posts.
Click on the grid icon or press Cmd+G (on Mac).
Then click “Create CSS Grid” button.
Enter 30px for the Gap.
Hover above the last column and press + to add a column.
Similarly add 4 additional rows.
Now click anywhere in the first cell and click on div.oxy-post in the bottom breadcrumbs.
Hold and drag the right handle (A) until it stretches to the end of the row.
Hold and drag the bottom handle until it stretches to the third row.
Click on “Style Attribute” > Set named area.. > type p1 and hit return.
This is a custom name we are setting to this grid area.
Similarly “draw” other areas (each spanning a single column and two rows) and name them p2, p3, p4 and p5.
Move inline styles to CSS file
It’s time to save the inline CSS into style.css in Pinegrow.
Select div.oxy-posts and click on + next to “Style attribute”.
Click on .oxy-posts and click “Create”.
Select the top wide post, click +, .oxy-post-1 and Create.
Repeat for other four posts.
Make the images appear
Click on the post title in the top grid area and select a.oxy-post-image.
Set its display to block and height to 100%.
Set background to not repeat, background position as center, and background size as cover.
Save the style attributes to .oxy-post-image.
Style post titles
Let’s position the titles near the bottom of the posts.
Create a new rule for .oxy-post and set its position to relative.
Select div.oxy-post-title-overlay and set its position to absolute with bottom 10px and left 0.
Set 5px top_bottom and 12px left_right padding.
Set background color to rgba(0,0,0,0.5).
Save the style attributes to .oxy-post-title-overlay.
Select h2.oxy-post-title . Set color to white and line-height to 1.3.
Save the style attributes to .oxy-post-title.
Responsive CSS
The default breakpoints in Oxygen are:
480px
768px
992px
1120px
To use the same in Pinegrow generated CSS, we need to add 1 to these values.
Go to Page > Manage breakpoints… and add:
481px
769px
993px
1121px
Resize the content area down and see from which breakpoint you would like the posts to appear one below the other.
In this example, that would be 768px and below.
Change the width of the viewport to 768px.
Select div.oxy-posts.
Duplicate the CSS selector.
Click on “Media query…” button and select “smaller than 769 px”.
Bring up the grid.
Delete the columns except the first one.
Click inside the named areas and change them so they are p1, p2, p3, p4 and p5 top to bottom.
Change the height of each row to 300px.
Copy the generated CSS
Click on style.css and copy the generated CSS code.
Step 6 – Back to Oxygen
Primary > Templates > Template CSS.
Replace the entire code with the one from earlier step.
Append each selector with %%EPID%% to restrict this CSS to just this instance of Easy Posts.
Go to Primary > Styles > Title > Font size: 20px.
Primary > Styles > Responsive. Set both the dropdowns to Never.
References
Summer Nights CSS Grid Tutorial | Pinegrow Web Editor
https://wpdevdesign.com/how-to-add-oxy-post-number-classes-to-easy-posts/