Yes! We are looking to do this too soon with Options for Twenty Twenty-One plugin.
Easiest way in the meantime will be some CSS to arrange the posts like a grid instead of one after the other.
I’ll get this for you tomorrow 🙂
Oliver
Thread Starter
JaMart
(@jamart)
That would be great, Oliver. Thank you!
I’m using the Twentig plugin https://wordpress.org/plugins/twentig which customizes Twenty Twenty-One. It has the option to display the blog as a grid. If you don’t want to use the plugin, you can try to copy the CSS.
@jamart This should produce a clean result that compliments the theme’s existing design when no thumbnail is available for a post …
.archive .site-main {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
}
@media (min-width: 482px) {
.archive .site-main {
padding: 0 1rem;
}
}
.archive .site-main .page-header {
width: 100%;
}
.archive .site-main article {
padding: 1rem;
margin: 0;
width: 100%;
}
@media (min-width: 482px) {
.archive .site-main article {
width: 50%;
}
}
@media (min-width: 822px) {
.archive .site-main article {
width: 25%;
}
}
.archive .site-main article .entry-header {
width: 100%;
position: relative;
margin: 0;
}
.archive .site-main article:not(.has-post-thumbnail) .entry-header {
border: 1px solid #28303d;
}
.archive .site-main article .entry-header::after {
display: block;
content: '';
padding-bottom: 65%;
}
.archive .site-main article .entry-header .entry-title {
font-size: 1.3rem;
text-align: center;
position: absolute;
height: 100%;
width: 100%;
}
.archive .site-main article .entry-header .entry-title {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 1rem;
z-index: 2;
}
.archive .site-main article .entry-header .entry-title a {
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
}
.archive .site-main article.has-post-thumbnail .entry-header .entry-title a {
color: white;
text-shadow: -1px -1px 0 #28303d, 1px -1px 0 #28303d, -1px 1px 0 #28303d, 1px 1px 0 #28303d;
}
.archive .site-main article .entry-header .post-thumbnail {
margin: 0;
}
.archive .site-main article .entry-header .post-thumbnail img {
position: absolute;
width: 100% !important;
height: 100% !important;
object-fit: cover;
margin: 0;
z-index: 1;
}
.archive .site-main article .entry-footer, .archive .site-main article .entry-content {
display: none;
}
Let me know what you think?
Oliver
Thread Starter
JaMart
(@jamart)
@domainsupport Thank you very much, I’m very grateful. This is very close to what I’d like to achieve.
I have two issues. It works on archive pages, but not on the main blog. It messes up the the layout a bit, but I think that should be easy to figure out.
To make it work on the blog page, just change all instances of “.archive” to “.blog” to duplicate each CSS selector in the CSS above like this …
.blog .site-main, .archive .site-main {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
}
Can you please explain how it “messes up the layout a bit”?
We’ve now added this into the plugin Options for Twenty Twenty-One so that you can choose which archive pages (blog / category / tag etc) to use the grid layout on.
Oliver
Thread Starter
JaMart
(@jamart)
@domainsupport “Can you please explain how it “messes up the layout a bit”?”
Somehow the title and the pagination seems to be part of the grid system and they appear at the beginnig and the end of the grid, not above and below.
OK, understood. Can you please update Options for Twenty Twenty-One plugin to the latest version? Grid options are in “Customizer – General Options – Archive Grid Template”.
The pagination issue has been resolved there.
If you’d prefer to use CSS only let me know and I’ll get that to you instead but the plugin will be much easier 🙂
