Overlay Post Title on Thumbnails

[David]

Try this for the overlay effect:

/* remove bottom spacing and reduce img opacity */
.resize-featured-image .post-image img,
.wp-show-posts-image img {
    vertical-align: bottom;
    opacity: 0.7;
}

.post-image,
.wp-show-posts-image {
    position: relative;
}

.post-image:before,
.wp-show-posts-image:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
}

And to correct the vertical positioning we need to remove the bottom padding from the article ( which is distorting the height ) and swap it for margin, try:

.generate-columns .inside-article {
    padding-bottom: 0 !important;
    margin-bottom: 30px !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andy]

Fantastic code as always David, really pleased with the result, looks so much better, thank you. I adjusted added a bit more bottom margin and a border-radius to finish it off.

Just one last thing I’m struggling with and then I’ll leave you alone and mark topic as resolved.

Unfortunately the image resizer the WP Show Posts plugin uses is different to the one the theme uses and although I have them roughly the same on desktop at around 675px and below the theme/archive thumbnails become quite narrow whereas the WP Show Post thumbnails have taller/squarer proportions. I can adjust the height of the theme/archive thumbs at that breakpoint and below with CSS, but just wondering if there is a better approach I should be using to keep them as consistent as possible?.

Currently my Theme Customizer Blog Featured Image sizes are currently set to 675 x 260, I also tried adding my own custom image size using the function:

add_action( 'init', function() {
    add_image_size( 'my-archive-featured-image', 768, 600, true ); // 500 width, 200 height, crop
} );

However, this didn’t seem to work as I had trouble getting thumbnails to regenerate on the staging server. I am pretty happy with the current proportions of the thumbnails on desktop which seem to be inheriting the height from my customizer settings. So I should perhaps remove that function before going live with the changes.

My WP Show Post Image settings are 768 x 570 and that seems to match the proportions of the archive thumbnails but only on desktop.

Any advice appreciated.

[Tom]

GeneratePress uses the actual image size (add_image_size) if it exists. If it doesn’t, it will fallback to using CSS to resize the image.

If you want to use the same method, you can just ditch the WPSP list image/height options, and use the same CSS for the images.

You can also use the same add_image_size method with WPSP: https://wpshowposts.com/support/topic/show-posts-images-not-working/#post-8324

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andy]

Thanks Tom but I’m still having issues getting the custom add_image_size to take effect. I have the following function in my child theme functions file just to test things out:

add_action( 'init', function() {
    add_image_size( 'my-archive-featured-image', 768, 600, true ); // 500 width, 200 height, crop
} );

I then run wp media regenerate via WP CLI (had to use CLI as Regenerate plugin wouldn’t work) and the thumbnails are successfully regenerated. However, thumbnails on the front-end look no different.

Any ideas?

[Tom]

Have you set the Media Attachment Size to “my-archive-featured-image” in the Customizer?

If so, can you check if the image sizes are actually being generated?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andy]

Yes I have now – I can see the 768×600 image URL in the HTML but the images are not on the server, I presume because the regenerate images process earlier failed. I’ve opened another ticket with my webhost Cloudways as it seems there is some kind of server issue or fault with the Staging application.

Will update thread when I get a response.

On a different note, because the headers are positioned absolutely, on mobile if there is a long post title it reaches right to the edges of the thumbnail, and wherever I add any padding/margin it has no affect.

Any help appreciated.

[Tom]

You can increase the padding on the entry header:

.blog .generate-columns .entry-header {
    padding: 0 30px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andy]

Thanks, it seems it needed a minimum of 30px for it to work.

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andy]

All working now, apparently there was a temporary uploads folder created for the staging site in the wp-config file which was causing the issue!.

Many thanks again for all the help.

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts