Skip to content

How to Increase the Thumbnail Size of JetPack’s Top Posts

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:

Image of the Top Posts widget with a custom thumbnail size
Jetpack Top Posts widget with 350px x 200px thumbnails

You can customize the CSS further to correspond to your thumbnail size or even a custom style.


Leave a Reply

Feel free to share your comments or questions with me. I may not be able to respond immediately so please check later once I've approved your comment.

Your email address will not be published. Required fields are marked *

Kelvin Kathia

Kelvin Kathia is a writer that's passionate about sharing solutions to everyday tech problems. He's the founder and editor of Journey Bytes, a tech blog and web design agency. Feel free to leave him comments or questions regarding this post, or by leaving him a message on the contact page. If you found his content helpful, a donation is much appreciated.