How To Fix WordPress Related Posts Cropping Dimensions

Is WordPress Cropping Your Related Posts Image Dimensions In A Way You Don’t Like?

There’s a good chance the issue is being caused by JetPack, and luckily it can be fixed!

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.

Especially if you want your featured post image to be vertical, Pinterest style images. By defalft, any vertical image like that will be cropped, cutting 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!

Here’s How To Change Your Related Post Image Dimensions To Suit Pinterest Image Sizes

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

Warning

Don’t do this if you aren’t familiar with editing code this way. A single error here can break your site! You can contact me to do this for you if you aren’t comfortable doing it yourself.

If you are familiar with code, read on!

TO CHANGE JETPACK’S RELATED POSTS HEADLINE

On your WordPress 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 <<