[Resolved] Overlay Post Title on Thumbnails

Home Forums Support [Resolved] Overlay Post Title on Thumbnails

Home Forums Support Overlay Post Title on Thumbnails

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1307425
    Andy

    Hi,
    I’m trying to use flexbox to overlay the post title over the centre of the thumbnails on my archives. Unfortunately align-items: center; isn’t working when applied to article or .inside-article. Please disregard the Route Overview section as they isn’t going to be removed. I’m also trying to do the same on my home page post listings which uses the WP Show Posts plugin.

    Any help much appreciated.

    Thanks.

    #1307935
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is there a specific page where I can see what you’ve set up so far? I took a look around but couldn’t find anything.

    Let me know 🙂

    #1307945
    Andy

    Sorry for the confusion I haven’t added any actual CSS yet was just trying it in the inspector. It’s the main routes page and routes on the homepage I want to apply it to, basically every archive with thumbnails.

    #1308156
    Tom
    Lead Developer
    Lead Developer

    You could try:

    1. Remove the 36px padding from the bottom of the posts.
    2. Add this CSS:

    .blog .generate-columns .entry-header {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        left: 0;
    }
    #1308176
    Andy

    Hi Tom,

    Many thanks for this, it’s almost working but the titles are displaying slightly lower than central. I’ve added the CSS to my staging site so you can see it in action, I’ve edited the URL of this post with the new one. Also the star ratings aren’t clickable. They way I’m adding them is with a Generatepress Hook Element where I add the shortcode [yasr_overall_rating size=”medium”] to the after_entry_title Hook.

    Is there some way I can wrap that within the post URL dynamically?

    Also, would like to add a dark overlay to the image so that the titles are easier to read. I know I could just use filter: brightness(0.7); but I’m not sure legacy browser support is that good for filters so was wondering if there’s a better way?.

    Many Thanks.

    Andy

    #1308824
    David
    Staff
    Customer Support

    Hi there,

    the staging site needs a login – can you disable that or send them via the Account issue form:

    https://generatepress.com/contact/

    Please add the URL of this topic to the form so we can track.

    #1309092
    Andy

    Sorry I tried to add the login details with the URL but I think they got mixed up. I’ve now sent the details via the form, had to tick ‘not a support query’, even though it is.

    #1309163
    Tom
    Lead Developer
    Lead Developer

    Strange, can you un-do the change so I can see the stars as click-able? Even when I remove the code from developer tools I can’t click on them.

    #1309199
    Andy

    Sorry I realise now they never were clickable before, but now they are overlaid on the image I think its even more important that they are clickable, if possible.

    #1310062
    Tom
    Lead Developer
    Lead Developer

    Where are they coming from? A plugin?

    #1310103
    Andy

    Yes this one: https://wordpress.org/support/plugin/yet-another-stars-rating/

    Then I add them using the shortcode [yasr_overall_rating size=”medium”] inside the Element Hook

    #1310411
    Tom
    Lead Developer
    Lead Developer

    You might want to check with them why it’s not working as of right now, then we can quite easily adjust the top value in your CSS to bring it up a bit if it isn’t perfectly center.

    #1310413
    Andy

    Think I may have confused you slightly here. The YASR plugin is working fine, the stars aren’t meant to be clickable by default, I just want to make the whole thumbnail clickable including the stars.

    #1310924
    David
    Staff
    Customer Support

    In your CSS try including a pointer-events: none; property ie.

    .blog .generate-columns .entry-header,
    .archive .generate-columns .entry-header,
    .wp-show-posts-entry-header {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        left: 0;
        pointer-events: none;
    }

    Then it should inly detect the image and its link.

    #1311001
    Andy

    Wow thanks David, what a brilliantly simple solution, would never have thought of that!.

    Could you advise me on the best way to add a dark transparent overlay to the thumbnails so the text is easier to read?. I know I could use CSS filters, but is there a better way that would support legacy browsers?

    Also, on the WP Show Post thumbnails the post titles/stars are perfectly centered, but on theme generated archive pages they are slightly too low, shall I just tweak the top and transform numbers slightly for those?.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.