Archived topic
Custom Archive Layout
26 replies · Started by Andy on November 21, 2020
Might be best to scrub that CSS method. If you want to remove the CSS ill take a look at an alternative way.
I'll leave the CSS for now, unless you really need it removed to work on a solution?
Yeah be easier if its removed for now
I've removed it now.
Ok. So first off set the Featured Image Location to above the title.
Then add this PHP Snippet to create a content wrap and add a custom class:
// Add Post Content Wrapper
add_action('generate_before_content', function(){
if (!is_singular()) {
?><div class="post-content-wrap"><?php
}
},20);
add_action('generate_after_content', function(){
if (!is_singular()) {
?></div><?php
}
},20);
// Add custom class to post
add_filter( 'post_class', function( $classes ) {
if ( is_singular() ) {
return $classes;
} else {
$classes[] = 'overlay-post';
}
return $classes;
} );
Then the CSS:
.overlay-post {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 600px;
padding: 40px;
}
.overlay-post .inside-article .post-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-bottom: 0 !important;
}
.post-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay-post .post-content-wrap {
position: relative;
}
Hi David,
I've added all the code but it isn't looking right yet, featured images a narrow strips and the excerpt has gone from the post that had one.
This needs to happen:
Ok. So first off set the Featured Image Location to above the title.
You can change the location in Customizer > Layout > Blog --> Featured Image archives.
Doh! sorry, I've done that now and its working great thank you. I just need to set a max-width on the post-content
You should be able to do:
.overlay-post .post-content-wrap {
position: relative;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
Yep thats the one :)
Glad to be of help.
EDIT: created new post for clarity: https://generatepress.com/forums/topic/entry-title-over-post-image-for-archives/