Change Featured Image Size on Jetpack Related Posts

Sep 29, 2015 | Web Stuff

Sometimes, that tiny little thumbnail just isn’t going to cut it.

This was a little hurdle I had to solve last week for a client who wants her featured images to be vertical. Yes, it posits a lot of problems in the future for social media sharing but I’m finding a solution to fix that as well. I don’t know about you but if I know there’s a simple code that can solve the issue, I would really rather not install yet another plugin.

So first, you have to figure out dimensions of your image as it scales down. It could be 75% less, up to you. I started with a 900 x 700 image. Without losing aspect ratio, the smaller size becomes 245 x 190, give or take.

Time for code. You can install this in your functions.php file. Make sure you create a child theme before attempting any modification to your core theme files.

function jetpackchange_image_size ( $thumbnail_size ) {
	$thumbnail_size['width'] = 245;
	$thumbnail_size['height'] = 190;
	return $thumbnail_size;
}
add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' );

Save your functions.php file and refresh your browser. This is how the related posts plugin looked like originally.

jetpack-before

Quick editing to clean up. I want the fonts to match and get rid of that meta. I used this CSS code to achieve that.

.jp-relatedposts-post-context {
	display: none;
}

.jp-relatedposts-post-a {
	font-family: Oswald;
	font-size: 16px;
	text-transform: uppercase;
}

Here’s what I ended up with.

jetpack-cleanup

After saving the functions.php file, it should look like this.

jetpack-after

Congratulations! You now know how to change featured image size on Jetpack Related posts plugin.