Custom CSS Grid Layout for Post Archives in Oxygen

le 26/10/2021
JAG

This members-only tutorial provides the steps to display 1 wide post at the top, then a banner (any custom HTML), 4 next posts in columns, another banner (any custom HTML) followed by the next 4 posts in a 2 x 2 grid on category and tag archive pages in Oxygen – all this while using a single query (the default one) i.e., without using multiple queries having offsets.

We shall use Easy Posts and add custom CSS for the responsive CSS Grid. It is not possible to use the built-in Grid Layout option because it can not detect the banner HTML that we are going to inject using the WordPress’ post counter in Easy Posts’ PHP.
This can be applied to the blog posts index or any other kind of archive.
Step 1
Edit your Template with Oxygen.
Add a Section and inside that, an Easy Posts component.
Assign stacked-grid class to it.
Templates > Template PHP:

query->current_post ) { ?>

leaderboard

query->current_post ) { ?>

creative

Read More

Replace

leaderboard

with the HTML for your first banner that should appear after the latest post.
and

creative

with the HTML for your second banner that should appear after the 5th post.
You may want to keep the spacer, spacer1 and spacer2 classes intact or if you do change them, also remember to change them in the CSS code in the next step.
Templates > Template CSS:
%%EPID%% .oxy-post {
display: flex;
flex-direction: column;
text-align: left;
align-items: flex-start;
width: 100%;
background-size: cover;
background-position: center center;
background-color: rgba(255,255,255,0.5);
}

%%EPID%% .oxy-post:nth-child(1) .oxy-post-title {
font-size: clamp(2rem, 7vw, 6rem);
font-weight: 400;
}

%%EPID%% .oxy-post-image {
background-image: linear-gradient(#D3D7DE,#f5f5f5);
width: 100%;
height: 100%;
background-size: cover;
flex-shrink: 0;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
}

%%EPID%% .oxy-post-title {
font-size: clamp(1rem, 2vw, 2.5rem);
line-height: 1.2em;
color: #fff;
text-shadow: 0 12px 40px rgba(0,0,0,0.75);
font-family: 'PT Serif', serif;
font-weight: 700;
margin-bottom: 2rem;
}

%%EPID%% .oxy-read-more {
margin-top: auto;
margin-left: auto;
margin-bottom: 1rem;
border-radius: 0px;
background: rgba(0,0,0,0.5);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.125em;
padding: .7rem 2rem;
text-align: center;
font-size: .75rem;
line-height: 1.2em;
}

%%EPID%% .oxy-easy-posts-pages {
margin-top: 16px;
padding: 16px 8px;
}

%%EPID%% .oxy-easy-posts-pages .page-numbers {
padding: 8px 12px;
background-color: #f2f2f2;
color: black;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .125em;
color: #555;
}

%%EPID%% .oxy-easy-posts-pages .page-numbers.current {
background-color: rgba(0,0,0,0.125);
}

%%EPID%% .oxy-easy-posts-pages .page-numbers:hover {
background-color: rgba(0,0,0,0.125);
}

@media (max-width: 1120px) {
%%EPID%% .oxy-post:nth-child(1) .oxy-post-title {
font-size: 5rem;
font-weight: 500;
}
}

@media (max-width: 992px) {
%%EPID%% .oxy-post:nth-child(1) .oxy-post-title {
font-size: 3rem;
}
}
The above CSS is for styling the posts but not their layout.
Easy Posts is likely going to be using the default preset in which case it will have some preconfigured styles configured in the last 2 breakpoints. If so, delete those styles.
The CSS Grid for the layout will be set in the next step.
Step 2
At Manage > Stylesheets, create/edit a Stylesheet and add:
img {
height: auto;
max-width: 100%;
vertical-align: top;
}

.stacked-grid > .oxy-posts {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 2fr auto 1fr auto 1fr 1fr;
gap: 1rem;
grid-template-areas:
"top top top top"
"spacer1 spacer1 spacer1 spacer1"
"middle1 middle2 middle3 middle4"
"spacer2 spacer2 spacer2 spacer2"
"bottom1 bottom1 bottom2 bottom2"
"bottom3 bottom3 bottom4 bottom4";
}

.spacer {
display: grid;
place-items: center;
}

/* Top */
.stacked-grid > .oxy-posts > :nth-child(1) {
grid-area: top;
}

/* Spacer 1 */
.spacer1 {
grid-area: spacer1;
}

/* Middle */

.stacked-grid > .oxy-posts > :nth-child(3) {
grid-area: middle1;
}

.stacked-grid > .oxy-posts > :nth-child(4) {
grid-area: middle2;
}

.stacked-grid > .oxy-posts > :nth-child(5) {
grid-area: middle3;
}

.stacked-grid > .oxy-posts > :nth-child(6) {
grid-area: middle4;
}

/* Spacer 2 */

.spacer2 {
grid-area: spacer2;
}

/* Bottom */

.stacked-grid > .oxy-posts > :nth-child(8) {
grid-area: bottom1;
}

.stacked-grid > .oxy-posts > :nth-child(9) {
grid-area: bottom2;
}

.stacked-grid > .oxy-posts > :nth-child(10) {
grid-area: bottom3;
}

.stacked-grid > .oxy-posts > :nth-child(11) {
grid-area: bottom4;
}

@media only screen and (max-width: 767px) {
.stacked-grid > .oxy-posts {
grid-template-rows: 2fr auto 1fr 1fr auto 1fr 1fr;
grid-template-areas:
"top top top top"
"spacer1 spacer1 spacer1 spacer1"
"middle1 middle1 middle2 middle2"
"middle3 middle3 middle4 middle4"
"spacer2 spacer2 spacer2 spacer2"
"bottom1 bottom1 bottom2 bottom2"
"bottom3 bottom3 bottom4 bottom4";
}
}

@media only screen and (max-width: 479px) {
.stacked-grid > .oxy-posts {
grid-template-rows: 2fr auto 1fr 1fr auto 1fr 1fr;
grid-template-areas:
"top top top top"
"spacer1 spacer1 spacer1 spacer1"
"middle1 middle1 middle1 middle1"
"middle2 middle2 middle2 middle2"
"middle3 middle3 middle3 middle3"
"middle4 middle4 middle4 middle4"
"spacer2 spacer2 spacer2 spacer2"
"bottom1 bottom1 bottom1 bottom1"
"bottom2 bottom2 bottom2 bottom2"
"bottom3 bottom3 bottom3 bottom3"
"bottom4 bottom4 bottom4 bottom4";
}
}
Reference

How to insert static content in Easy Posts’ output

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