[Resolved] Post navigation with clickable thumbnails

[qpaq]

In order to display the featured images of posts inside the post-navigation area under each post, I had applied the snippet posted here https://generatepress.com/forums/topic/featured-image-in-pre-next-post-navigation/#post-1310419

And I applied the following CSS but it messed up my top-bar secondary navigation menu item links.

/*post navigation styling */
.tags-links { 
padding-bottom: 50px;}

.post-navigation {
		padding-top: 50px;
		display: flex;
}

.post-navigation .nav-next {
	width: 50%;
	text-align: right;
	display: flex;
	flex-direction: row-reverse;
}

.nav-previous a:before, .nav-next a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post-navigation .nav-previous {
	width: 50%;
}

.nav-next .gp-icon {
	margin-left: .6em;
	margin-right: 0;
	padding-bottom: 50px;
}

#nav-below {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
/*End post navigation styling*/

How do I style the post navigation thumbnails? I want them to be around 150px wide and clickable.

I also want to get rid of the captions of the featured images inside the post-navigation area.

[David]

Hi there,

first of update these two lines:

$prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID ) : '';
$nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID ) : '';

to:

$prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID, 'thumbnail' ) : '';
$nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID, 'thumbnail' ) : '';

Once thats done let me know ill have a look at making the whole element clickable etc.

[qpaq]

Hi David,

Thanks for your reply. I did what you’ve told me to do. The thumbnails are smaller in size now. Not equal sizes though.

[David]

Now add this CSS:

#nav-below .thumb-caption-text,
#nav-below .gp-icon {
    display: none;
}

#nav-below .nav-previous,
#nav-below .nav-next {
    display: flex;
    position: relative;
}

#nav-below .next,
#nav-below .prev {
    padding: 10px;
}

#nav-below img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}

[qpaq]

Works like a charm. Thank you, David.

How can I add right and left chevrons on the right/left of thumbnails and “Next Article” – “Previous Article” above the thumbnails?

And is there a way to limit the next/prev post within the current category or CPT?

[David]

OK, so this is going to require a fresh start. Remove all the PHP and CSS you have added so far.

Now add this PHP 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 add this CSS:

#nav-below,
.nav-previous,
.nav-next,
.post-title-wrap {
    display: flex;
    width: 100%;
}

#nav-below {
    justify-content: space-between;

}

#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%;
    }
}

[qpaq]

Uh, all post navigation section has been lost now.

[David]

Did you remove all of the related Code you added previously ?

[qpaq]

Yes, I turned off the previous code snippet and added your new PHP code as a new snippet and activated it. The post navigation section is gone off.

[David]

Can delete all of the snippets. And delete any CSS that was added.
Once thats done. re-add the new codes i provided.

[qpaq]

I deleted the old snippet and the old CSS related to the post-nav. Included your CSS and the snippet but nothing changed, the post-nav section is still missing.

[David]

Do you have any other Custom Functions ?

[qpaq]

Sure, I have a number of other active snippets for other parts of the site.

[Leo]

Hmm I just tested David’s PHP and CSS on a fresh install and it worked perfectly:
https://www.screencast.com/t/YLc7XvMXPVt

Can you make sure that the post navigation is activated in the customizer?
https://docs.generatepress.com/article/blog-content-layout/#single

If so then please try to disable all of your other custom functions and CSS to test.

[qpaq]

Hi Leo,

That’s a good way to check. I did the same and actually, David’s code and CSS work on a fresh install indeed.

Then on my site, I turned off all snippets except David’s PHP, deleted all custom CSS except the one David provided. Also, shut down many of the plugins that might be in effect. I was expecting something to appear on the post-nav section (I also checked if post navigation is activated, it is) but no progress, unfortunately.

If you send me your email, I may provide you with a temp-login and you may have a look at.

[Author]

Posts