How to customise related posts widget

  • Resolved debycoles

    (@debycoles)


    8 years, 10 months ago

    I’m trying to change up the appearance of my related posts widget to better display my featured images which are square.
    I want to create 4 images across the page, each 150px square, with the title underneath.
    I’ve patched together some changes but don’t really know what I’m doing.
    I’ve changed the posts displayed to 4 and changed the thumbnail size, but the titles aren’t wrapping correctly, they are wider than the images, and so the 4th image is dropping down to the next line.
    You can see examples at debycoles.com (its the related section at the bottom of the articles)

    This is my code:

    '//* JetPack related posts
// show 4 related posts
function jetpackchange_howmany_related_posts( $options ) {
    $options['size'] = 4;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackchange_howmany_related_posts' );

// change thumbnail size
function jetpackchange_image_size ( $thumbnail_size ) {
	$thumbnail_size['width'] = 150;
	$thumbnail_size['height'] = 150;
//	$thumbnail_size['crop'] = true;
	return $thumbnail_size;
}
add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' );

function jetpackme_related_posts_headline( $headline ) {
$headline = sprintf(
            '<h2 class="jp-relatedposts-headline"><em>%s</em></h2>',
            esc_html( 'More from this site:' )
            );
return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );

add_filter( 'jetpack_relatedposts_filter_post_context', '__return_empty_string' );'

    Can anyone help?

    https://www.ads-software.com/plugins/jetpack/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    the titles aren’t wrapping correctly, they are wider than the images, and so the 4th image is dropping down to the next line.

    It seems you’ve managed to solve the issue on your own: the related posts are displayed nicely on your site at the moment:
    https://i.wpne.ws/ep4G

    Let me know if there is anything else I can do to help!

    Thread Starter debycoles

    (@debycoles)

    That is my OTHER related posts widget, the one I am trying to emulate.
    I want to replace that one because it’s not working correctly, links to media items instead of just posts and pages.

    The Jetpack related posts is underneath it and the matter hasn’t yet been resolved, the titles are too wide for the images, causing the 4th image to drop down to the line underneath.

    Screen print here
    https://debycoles.com/wp-content/uploads/2016/01/jetpack.jpg

    I need to know how to get all 4 images on the one line, as in the look of the shareaholic plugin I want to replace. Thanks.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    Oh yes, sorry, I should have looked more carefully.

    You can customize the look of every element on your site with CSS. Try adding the CSS below to your theme stylesheet, or to your custom CSS editor available under Appearance > Edit CSS in your dashboard:

    #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post,
#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
	max-width: 150px;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
	clear: none !important;
}

    That should do the trick.

    Thread Starter debycoles

    (@debycoles)

    Awesome, just what I needed. Thanks so much, I don’t know anything about CSS, so would never have got this without your help.
    You are amazing.
    Thank you

    Hello,
    This helped me out for changing the size of my thumbnail size – so thanks!
    I am having difficulty figuring out how to change the H tag for the Post headline (or title) that appears under the thumbnail image. I was able to change it for the main headline (Related Posts…) but not for the rest of the text.
    Any help is very much appreciated!
    Thanks

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    @photosbyemilie Could you please start your own thread, as per the Forum Welcome?
    https://www.ads-software.com/support/plugin/jetpack#new-post

    It would help if you could let me know your site URL there, and give me more details about what you would like to change.

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to customise related posts widget’ is closed to new replies.

Tags