Checkered Posts in Oxygen

le 26/10/2021
JAG

This members-only tutorial provides the steps to set up alternate rows of image – content and content – image for a checkered layout of posts on the Blog Posts Index using the Repeater component in Oxygen.

Step 1
Let’s add a couple of helper functions so we can display excerpts of specified length.
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Custom Excerpt
Code:

function custom_read_more() {
return '... more »';
}

function excerpt( $limit ) {
return wp_trim_words( get_the_excerpt(), $limit, custom_read_more() );
}
Step 2
If you want the blog posts index to be on an inner page, Create a Page titled say, “Blog” and set it as Posts page at Settings > Reading.

Step 3
Create/edit the Template that applies to Blog Posts Index.

Step 4
Ensure that there is at least 1 published post.
Set featured images for the posts while ensuring that width of the images is at least 768px.
Step 5
Note: This step explains setting up the Template. If you wish to simply paste all the Shortcodes generated by Oxygen in your site (refer to the screenshot in Step 3), here it is. I have not tested this.
Edit the Template with Oxygen.
Add a Section.
Select the Section and add a Heading that reads say, “Read Our Blog”.
Add a Repeater component below the Heading.
Add a top margin of say, 60px.
Click inside the first Div.
Add a 50 50 Columns component.
Stack Columns Vertically: Less than 768px.
Add no-padding class.
At Manage > Stylesheets, add
.ct-new-columns.no-padding > .ct-div-block {
padding: 0;
}
Click on the left column Div.
Advanced > Background
Background Image: click “data” button and Post > Featured Image of size “Medium Large”. Click INSERT.
Background Size: cover
Background Repeat: no-repeat
Left: 50%, Top: 50% (these are for background-position property).
Advanced > Size & Spacing – Min-height: 400px.
If you want the featured image to be a clickable link to the post permalink, set Position to relative. Then add a Div inside the left column Div whose Position is absolute with 0 for Top, Left, Bottom and Right. Then click on the link icon, cancel the WordPress link dialog, click “data” and select Post > Permalink.
Click on the right column Div.
Vertical Item Alignment: Middle
Advanced > Size & Spacing > Padding: 40px on all sides.
+ Add > WordPress > Dynamic Data > Date
Font Size: 15px
+ Add > WordPress > Dynamic Data > Title
Font Size: 30px
Font Weight: 600
You might want to set a top margin of say, 10px.
Click on the link icon, cancel the WordPress dialog, then “data” and Post > Permalink.
Add a Text component below the title link.
Double click on the text, click “Insert Data” in the top toolbar, “PHP Function Return value”. Enter excerpt for the Function Name and 45 (set this to your desired number of words that should appear in the excerpts) for the Function Arguments. Click INSERT.
Let’s add pagination below the posts.
Click on the Section and add an Easy Posts component.
Template PHP: Delete all the code.
Template CSS: Replace all the code with
/*%%EPID%% .oxy-posts + .oxy-easy-posts-pages {
text-align: start;
}*/

%%EPID%% a.page-numbers {
color: color(7);
padding: 12px;
}

%%EPID%% a.page-numbers:hover {
color: color(7);
}

%%EPID%% span.page-numbers {
color: color(8);
background: color(2);
padding: 12px 18px;
margin: 0 8px;
}

@media only screen and (min-width: 769px) {

#_dynamic_list-3-307 .ct-div-block:nth-child(even) .ct-new-columns > div:first-child {
order: 1;
}

}
Replace _dynamic_list-3-307 with the ID of your Repeater.
Refer to this tutorial for information on the above CSS (except the media query part).
The media query part of the CSS code will swap the order of left and right Divs in the column for alternate rows.
References
https://wpdevdesign.com/video-pagination-for-repeater-in-oxygen/
https://wpdevdesign.com/how-to-remove-the-padding-for-column-divs-in-oxygen/

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat