JetPack’s Top Posts and Pages provides three display options: a text list, image list and image grid. The latter two use the post’s featured image as the source of the thumbnail for the widget.
In the default state, the widget uses a square thumbnail with a size of 40×40 pixels for the Image List and a larger 200×200 thumbnail for the image grid style that includes no titles. In both cases, the thumbnail is cropped into a square.
Consequently, the thumbnails are not only small but also visually unappealing due to the cropping. Both of these factors significantly reduce the widget’s visibility which may contribute to a lower click-through rate.
Fortunately, we can fix this limitation by specifying a custom thumbnail size for the widget. This way we can have not only larger thumbnails but also rectangular ones. Her’s how to go about it.
Step 1: Change Image Source Size
The thumbnail used by the widget are loaded from JetPack’s CDN and not from your site, similar to JetPack’s Related Posts.
The featured images are fetched by JetPack’s Photon service which resizes and crops them automatically into thumbnails with the following sizes:
- 40px x 40px
- 200px x 200px
- 350px x 200px
- 600px x 200px
As stated earlier, the widget uses either the 40px or 200px square thumbnail. We can however use a filter to have it use one of the other two larger sizes instead.
To do that, start by adding the code below to your theme’s functions.php file or using the Code Snippets plugin:
function jeherve_custom_top_posts_rectangular_images( $get_image_options ) {
$get_image_options['width'] = 350;
$get_image_options['height'] = 200;
return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_top_posts_rectangular_images' );Adjust the width and height parameters in the code to 600 and 200 respectively if you prefer an even larger thumbnail size.
However, ensure your featured images have a width greater than 600px, otherwise I suppose Photon will upscale the images which may end up looking pixelated.
Step 2: Fix the CSS
The default CSS for the widget assumes the thumbnail is 40px wide. As such, you will not notice any difference in the thumbnail sizes after adding the code until you update the underlying CSS.
To fix this, add the following CSS to your Custom CSS by going to Appearance > Additional CSS:
.widget_top-posts .widgets-list-layout img.widgets-list-layout-blavatar {
max-width: 350px;
width: 100%;
}
.widget_top-posts .widgets-list-layout div.widgets-list-layout-links {
width: 100%;
}The above CSS assumes you’re using the image list style with the 350px width thumbnail size. The result is as follows:
You can customize the CSS further to correspond to your thumbnail size or even a custom style.
