Custom Archive Layout

Hi there,

create a Header Element for your CPT:

https://docs.generatepress.com/article/header-element-overview/

Add a HTML Comment to its content:

<!-- hero image -->

And then set the Padding top to %'s - the total should match the aspect ratio of the original image if you want it to be displayed full height eg.

Original image: 1920 x 1200px
Ratio = 1200 / 1920 * 100 = 63%.

Set the Top padding to 63%.
Set the Featured Image as the Background.
And set the Display rules to your Post type.

I don't think thats quite what I'm looking for, I want the thumbnails of each post to be full-width on the archive page. I already have them full-width on individual posts.

Sorry my bad - obviously didn't read any of that lol

Can you share a link to the archive so i can see the layout.

Link shared, I've just setup the header element and set it to full-width, but as you can see the thumbnails aren't.

Ok so i hope i have interpreted this correctly. You can remove the Header Element.
Then apply this CSS:

.post-type-archive-project .inside-article > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.post-type-archive-project .inside-article .post-image,
.post-type-archive-project .inside-article .post-image img {
    max-width: 100%;
    width: 100%;
}

This will keep all of the Project Archive article content contained, except for the post image which it will force to full width.

Hi David,

Thank you for this, works great. I need to keep the header element as the design requires the first post to be behind the navigation area. The problem with this is the part of the post behind the navigation area isn't clickable, not sure what we can do about that, may need to change the design.

Also, I need the post title/excerpt to display overlaid centrally on top of the featured image. Would that be possible?

Thanks,
Andy

Hi,

The problem with this is the part of the post behind the navigation area isn’t clickable, not sure what we can do about that, may need to change the design.

Unfortunately, there's no way of doing that as things are because the while the part of the post behind he navigation is visible, you're still clicking on the invisible part of the header and not the one behind it.

Also, I need the post title/excerpt to display overlaid centrally on top of the featured image. Would that be possible?

To clarify: Would this particular setup only apply for home page or all of the archive pages as well?

If its only for the homepage, consider using WP Show Posts. :)
https://demos.wpshowposts.com/cards

Its not for the homepage at all it's for an archive page, please advise.

To have the Title overlay the image will require a different approach.
If you can remove the CSS provided.
Then use a Layout Element to set your Archives to full width:

https://docs.generatepress.com/article/layout-element-overview/

Once thats done ill look at the CSS required to overlay the title.

ok removed CSS and setup Layout Element, many thanks for the help.

Try this CSS:

.archive .inside-article {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
    justify-content: center;
    align-items: center;
}
.archive .inside-article > * {
    grid-column: 1 / -1;
    grid-row: 1;
}
.archive .site-main article {
    margin-bottom: 0;
}
.archive .inside-article .post-image {
    margin: 0;
}
.archive .inside-article .post-image img {
    width: 100%;
    vertical-align: bottom;
}
.archive .inside-article .entry-header {
    grid-column: 2;
    z-index: 1;
    padding: 40px;
}
.archive .entry-summary {
    display: none;
}

Thanks David that's some complex looking CSS there and it works great. However, it makes the featured images very tall, any way to tweak that a little? You can visit the link I shared to see it live.

Update this:

.archive .inside-article .post-image img {
    width: 100%;
    vertical-align: bottom;
}

to:

.archive .inside-article .post-image img {
    width: 100%;
    vertical-align: bottom;
    object-fit: cover;
    min-height: 400px;
    max-height: 25vw;
}

You can now set the min-height, and a max-heigh - this case its use Viewport units, so the image will increase its height on larger screens.

Hi David, thanks very much again for your help with this. It turns out I actually do need the excerpt shown below the heading and I've adjusted the CSS slightly:

.blog .inside-article {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 950px) 1fr;
    justify-content: center;
    align-items: center;
}
.blog .inside-article > * {
    grid-column: 1 / -1;
    grid-row: 1;
}
.blog .site-main article {
    margin-bottom: 0;
}
.blog .inside-article .post-image {
    margin: 0;
}
.blog .inside-article .post-image img {
    width: 100%;
    vertical-align: bottom;
	object-fit: cover;
    min-height: 800px;
    max-height: 25vw;
}
.blog .inside-article .entry-header {
    grid-column: 2;
    z-index: 2;
    padding: 30px;
}

.blog .inside-article .entry-summary {
	grid-column: 2;
    z-index: 1;
	padding: 30px;
}

.blog .entry-title a { font-size:75px; color:black; font-weight:500; line-height:1.2;}

However, because everything is aligned vertically centrally, the post title and excerpt overlay each other. I need the excerpt to sit below the post title but both the post title and excerpt need to be vertically central. Perhaps I may need to create a custom template so I can wrap them both in a container? Or is it achievable with some more CSS?.
You can refer to the live URL in the private info section if it helps.

Any help much appreciated.