Problems with Clickable Navigation

Hi there,

that post the ship image links isn't displaying a Featured image - just an image within the content - can you check the posts Featured Image in the post editor?

David:

I checked the featured image for the first ten blog posts, and all of them have featured images. The ship (which is the featured image for the Shackleton piece) is now appearing on the Capybara piece. See here https://www.savacations.com/ten-things-rio-de-janeiro-brazil/.

Have you resolved the issue?

The post you've linked above doesn't have a featured image uploaded from what I can tell - they are all static images uploaded in the content itself.

If you need further help with this, please disable your caching plugin first.

I still need help with this...I disabled my Auto Optimize plugin, but the problem is still there. As indicated above, the featured images are static and also set on the blog posts for at least the first ten...

I'm a little confused. Can you explain the issue again?

I checked both posts you've linked:
https://www.savacations.com/ten-things-rio-de-janeiro-brazil/
https://www.savacations.com/ten-interesting-facts-capybara-worlds-largest-rodent/

And neither of them have a featured image uploaded:
https://docs.generatepress.com/article/adding-featured-images/

As indicated, I am using the snippet and css codes that David provided for the clickable blog post navigation. The way that it is supposed to work is that each post and featured image appear as either previous or next at the bottom of the post. In reviewing my posts for another matter, I noticed that for some posts, the featured image shown as previous/next is not correct and/or consistent with the post.

All of my featured images are uploaded on page (html) and as the featured image.

For instance, at the bottom of the second blog post (date-wise), titled "Ten Interesting Facts About The Capybara, The World’s Largest Rodent", the photo of the "Previous Post", which is "Ten Things To Do in Rio de Janeiro, Brazil" is of the Ship Endurance. See here https://www.savacations.com/wp-content/uploads/2021/03/Ten-Things-Featured-Image.jpg. It should be of girls playing volleyball see here https://www.savacations.com/ten-things-rio-de-janeiro-brazil/.

There are 2-3 other examples of this feature not working properly.

Obviously, one option that I have is to delete the code from David and revert to the default, but since I like the way that this feature works, I do not want to do so.

Hopefully this explains everything...

Can you share the code you've added here?

Please highlight the code and click the CODE button in the editor.

Here it is...first the code snippet

add_filter( 'generate_post_navigation_args', function( $args ) {
    if ( is_single() ) {
        $prevPost = get_previous_post();
        $prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID, 'thumbnail' ) : '';
        $nextPost = get_next_post();
        $nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID, 'thumbnail' ) : '';

        $args['previous_format'] = '<div class="nav-previous">' . $prevThumbnail . '<div class="post-title-wrap"><span class="title-label">Previous Post</span><span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">' . generate_get_svg_icon( 'arrow-left' ) .'%link</span></div></div>';
        $args['next_format'] = '<div class="nav-next"><div class="post-title-wrap"><span class="title-label">Next Post</span><span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link ' . generate_get_svg_icon( 'arrow-right' ) . '</span></div>' . $nextThumbnail . '</div>';
    }

    return $args;
} );

add_filter( 'generate_category_post_navigation', '__return_true' );

then the css code...

/* Add Clickable Photo Navigation to Bottom of Blog Posts */
#nav-below,
.nav-previous,
.nav-next,
.post-title-wrap {
    display: flex;
    width: 100%;
}
#nav-below {
    justify-content: space-between;
    margin-top:20px;
}
#nav-below img {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
}
.nav-previous,
.nav-next {
    width: 49%;
    margin: 10px 0;
    position: relative;
    box-sizing: border-box;
}
.post-title-wrap {
    padding: 10px;
    width: 100%;
    flex-direction: column;
    border: 1px solid #efefef;
}
.nav-previous .post-title-wrap {
    text-align: right;
}
#nav-below a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.title-label {
    font-size: 12px;
}
.nav-previous:hover .post-title-wrap,
.nav-next:hover .post-title-wrap {
    border: 1px solid #ccc;
}
@media(max-width: 758px) {
    #nav-below {
        flex-direction: column;
    }
    .nav-previous,
    .nav-next {
        width: 100%;
    }
}

Can you remove this line in the PHP snippet?
add_filter( 'generate_category_post_navigation', '__return_true' );

Leo:

Removing the line in the PHP snippet seems to have worked.

Thanks,

No problem :)