JetPack may be one of the best free WordPress plugins out there, as it combines several must-have blog features that you would normally have to pay for elsewhere. JetPack offers analytics, anti-spam & security, social share buttons, and so much more. One of my favorite features is ‘Related Images.’ This offers the option to include a list of related posts at the bottom of each post.

The only unfortunate thing is that JetPack Related Images crops your featured image, and doesn’t give the option to change how it crops. In my case, I use Pinterest style images, and the crop cut out half of the image’s information.This is crucial for many bloggers, as we want our Pinterest image to be featured and display correctly.

Ruth over at Dandelion Web Design has the fix for this! She has set up a CSS code that you can use on your site, to make your related post’s images stay at their Pinterest-ready shape – or any shape!

No Cropping – Are Your Related Posts Images Cropping? Here’s How To Change JetPacks Related Post Image Dimensions

To use JetPack’s Featured Image option, first install JetPack and then turn the feature on in Settings – Reading. “Use a large and visually striking layout” to display featured images with the post titles.

Problem: Jetpack cropped my Related Post images

The Related Posts images don’t use your blog’s thumbnail dimensions. The images are cropped to 350px wide by 200px tall. If your blog used horizontal images that would work but tall Pinterest-style images won’t.

Ruth’s Fix: Customize Jetpack’s Related Posts with this code

CHANGE JETPACK’S RELATED POSTS HEADLINE

On your WorPress dashboard, navigate to Appearance – Editor, and then click on your child theme’s functions.php file. Copy the code that is in your functions file and paste it somewhere else as a backup.

Now add the following code to your child theme’s functions.php file:

//Jetpack Related Posts - changing related text and class
function jetpackme_related_posts_headline( $headline ) {
$headline = sprintf(
'<h3 class="jp-widget-title">%s</h3>',
esc_html( 'You might also like' )
);
return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );

Note: You can customize your headline by changing the text “You might also like” in the code.

CHOOSE HOW MANY RELATED POSTS YOU DISPLAY

Now add this code, and change the number 4 below to suit your design.

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

HOW TO CHANGE JETPACK’S RELATED POST THUMBNAIL DIMENSIONS

Now to adjust the dimensions below to suit your website. These dimensions worked for my site to display vertical Pinterest-like thumbnails.

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

Now save the file and check to make sure it worked on your site.

Thanks Ruth for this code!

If you have any problems editing your functions.php file (such as you type something in wrong and your site temporarily goes down) See this: https://www.how4now.com/2012/08/edit-functions-wordpress-cpanel.html

More Blogging Tips Are In The HerPaperRoute Members Area – It’s Free to Join!

>>> LEARN MORE AND ENROLL HERE <<<

 HerPaperRoute is a resource for bloggers to learn tips and tools to improve and monetize their blog and business. As such, this post may contain affiliate links as  I recommend products/brands that I use in my business. For more information, see my disclosures.