[Resolved] Overlay Post Title on Thumbnails

Home Forums Support Overlay Post Title on Thumbnails

  • This topic has 25 replies, 2 voices, and was last updated 9 months ago by Tom.
Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #1311050
    David
    Staff
    Customer Support

    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;
    }
    #1311083
    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.

    #1311816
    Tom
    Lead Developer
    Lead Developer

    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

    #1312243
    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?

    #1312901
    Tom
    Lead Developer
    Lead Developer

    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?

    #1312929
    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.

    #1313308
    Tom
    Lead Developer
    Lead Developer

    You can increase the padding on the entry header:

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

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

    #1314504
    Tom
    Lead Developer
    Lead Developer
    #1314507
    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.

    #1314834
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.