- This topic has 14 replies, 3 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
August 31, 2020 at 11:49 pm #1426030Brian
Hi Guys
Following this post https://generatepress.com/forums/topic/featured-image-in-pre-next-post-navigation/
I’ve managed to add featured images to my post nav, but I have a small problem that I hope you can help with.On many posts the images are not matching the target post.
Here are the 3 snippets I’m using to control the post nav
add_action( 'after_setup_theme', 'tu_category_specific_post_navigation' ); function tu_category_specific_post_navigation() { add_filter( 'generate_category_post_navigation', '__return_true' ); } add_filter( 'generate_category_list_output', function( $output ) { if ( !is_single()) { return $output; } return '<span class="category-label">Read More:</span>' . $output; } ); add_filter( 'generate_post_navigation_args', function( $args ) { if ( is_single() ) { $prevPost = get_previous_post(); $prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID ) : ''; $nextPost = get_next_post(); $nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID ) : ''; $args['previous_format'] = '<div class="nav-previous">' . $prevThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>'; $args['next_format'] = '<div class="nav-next">' . $nextThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>'; } return $args; } );
And here is my css
/* Post Navigation */ .site-main .post-navigation { margin-top: 1em; padding: .5em; width: 100%; border: 1px solid #f2f2f2; border-radius: 10px; } .post-navigation img { width: 200px; display: inline-block; vertical-align: middle; margin: 0 5px; } /* switch next > to after title */ .nav-next .next:after { font-family: GeneratePress; text-decoration: inherit; position: relative; margin-left: .6em; width: 13px; text-align: center; display: inline-block } .post-navigation .nav-previous, .post-navigation .nav-next { display: flex; flex-direction: column; margin-bottom: 5px; } /* flex row for desktop and tablet */ @media (min-width: 420px) { .post-navigation { display: flex; } .post-navigation .nav-next { margin-left: auto; align-items: flex-end; text-align: right; } } @media (max-width: 769px) { .post-navigation img { width: 300px; } } .nav-previous, .nav-next { position: relative; } .nav-previous a:before, .nav-next a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
On the css, I also need help to get the arrow to show on the same line as the title 😉
Thanks
BrianSeptember 1, 2020 at 3:18 am #1426224DavidStaffCustomer SupportHi there,
try changing your last snippet to:
add_filter( 'generate_post_navigation_args', function( $args ) { if ( is_single() ) { $prevPost = get_previous_post(true); $prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID ) : ''; $nextPost = get_next_post(true); $nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID ) : ''; $args['previous_format'] = '<div class="nav-previous">' . $prevThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>'; $args['next_format'] = '<div class="nav-next">' . $nextThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>'; } return $args; } );
September 1, 2020 at 5:51 am #1426399BrianThanks, David that works perfectly now!
Any chance you could also help with the css? It doesn’t look great to me, I would prefer the arrow to be on the same line and the text to sit right and left with a center divider, like below.
Image < Previous Title | Next Title > Image
September 1, 2020 at 8:51 am #1426671LeoStaffCustomer SupportCan you disable your caching plugin first?
September 1, 2020 at 9:16 am #1426713BrianHi Leo
I’ve temporarily disabled WP Rocket.September 1, 2020 at 11:56 am #1426901BrianLeo, why did I need to disable my caching? I need to turn it back on.
September 1, 2020 at 12:05 pm #1426911LeoStaffCustomer Supportwhy did I need to disable my caching?
It’s much easier to see the CSS you’ve added and tweak it that way.
Edit this:
.post-navigation .nav-previous, .post-navigation .nav-next { display: flex; flex-direction: column; margin-bottom: 5px; }
to this:
.post-navigation .nav-previous, .post-navigation .nav-next { display: flex; margin-bottom: 5px; align-items: center; width: 50%; }
September 1, 2020 at 12:16 pm #1426925BrianAh I see Leo
That’s very close, just the text on the Next is not lined up with the arrow?
https://www.savvyhomemade.com/how-to-make-gel-candles-embeds/September 1, 2020 at 12:19 pm #1426928LeoStaffCustomer SupportTry removing this CSS you’ve added:
https://www.screencast.com/t/6kPk7f7UqSeptember 1, 2020 at 12:23 pm #1426931BrianThat moves them back onto separate lines
September 1, 2020 at 12:37 pm #1426938LeoStaffCustomer SupportHmm try only removing the second block in the screenshot.
September 1, 2020 at 12:41 pm #1426942BrianThat’s looking good Leo… The last thing is to make each side equal 50% of the width? Right now the right side is wider.
September 1, 2020 at 1:07 pm #1426959LeoStaffCustomer SupportLooks pretty close to me already but edited the CSS here to include width property:
https://generatepress.com/forums/topic/featured-images-on-post-navigation-not-correct/#post-1426911September 1, 2020 at 1:14 pm #1426968BrianPerfect Leo,
Thanks of the excellent support!!
September 1, 2020 at 1:14 pm #1426972LeoStaffCustomer SupportNo problem 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.