[Resolved] Help with customizing Previous/Next Article Post Navigation

Home Forums Support [Resolved] Help with customizing Previous/Next Article Post Navigation

Home Forums Support Help with customizing Previous/Next Article Post Navigation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #847958
    Vish

    Hello!

    I love how the Post Navigation (Previous/Next Article) looks on the DISPATCH Site library theme. So, I loaded the theme on a dummy site and extracted the necessary code for it and am using it right now on my site. GP Elements is being used for this purpose.

    Now, I just need a little help with customizing it. I want to apply a ‘blur’ effect on the background image used in the post navigation.

    So, this is the code responsible for displaying the background image:

    <div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">

    Here, there is a linear gradient applied to the image. Instead of this, I just want to apply a Blur to the background image (the article title is displayed on top of the background image).

    I tried a few things but everything I try ends up blurring the whole Element! πŸ™

    Any help would be greatly appreciated! Thanks! πŸ™‚

    Here’s the full code from the Element if you’d like to take a look: https://pastebin.com/dYah86U0
    I have also included the URL of my site with this post.

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #848140
    David
    Staff
    Customer Support

    Hi there,

    with the current markup you can’t blur the image without blurring the whole element.
    It would require rewriting that code. To point you in the right direct you would remove the background style from here:

    <div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">

    And create a new child DIV of the post-nav-wrap to output the image e.g

    <div class="post-nav-background" style="background: url('<?php the_post_thumbnail_url(); ?>');"><!-- background image--></div>

    This would need to be absolutely positioned using CSS to the size of the post-nav-wrap. e.g

    .post-nav-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    The title would also need to have a higher z-index to put it in front of the image.

    You can then target the post-nav-background with CSS for your blur.

    Not tested this and i am sure other elements will require tweaking. Just to note that older browsers don’t support the blur filter.

    #848482
    Vish

    Thanks, David. That helped big time!

    Managed to get the blur working. But I see some kind of shadow when I apply the blur to the image. Below is the code I used to blur the image:

    	-webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);

    Is this right way to do it?

    You can see the shadow in the blur effect which I am talking about by visiting the link I had included in OP.

    Can we do something about this?

    #848486
    David
    Staff
    Customer Support

    If you mean the blur that is escaping the edge of the post nav, then you can add overflow: hidden; to the #post-nav

    #848494
    Vish

    Well, I was talking about that too in addition to the small shadow effect we see at the meeting point of ‘prev’ and ‘next’ containers. I have taken a screenshot of the same, refer the below image:

    https://ibb.co/q5jVyBd

    In the very middle, where both the PREVIOUS and NEXT boxes meet, the shadow is visible albeit it is very subtle. But it’s definitely there. Can we do something about it?

    Sorry if it’s too much trouble. My OCD is kicking in 😐

    #848574
    David
    Staff
    Customer Support

    You can try putting the overflow hidden on .post-nav-wrap instead but you may notice a fine break between the two nav elements

    #849215
    Vish

    Thanks, David. πŸ™‚

    #849755
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.