How to change the size of the thumbnails in the Top Posts widget

The Top Posts widget offers different options to display a list of posts, or a grid of post thumbnails. In some cases, you might want to change the size of the thumbnails used by this widget.

To do so, you’ll need to change the size parameters in the image source, by adding the following code to your theme’s functions.php file, or to a functionality plugin:

function jeherve_custom_thumb_size( $get_image_options ) {
        $get_image_options['avatar_size'] = 600;

        return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

To change the thumbnail size, you will also need to add some custom CSS to overwrite Jetpack’s default CSS. You can paste this CSS in your theme’s stylesheet, or under Appearance > Edit CSS in your dashboard:

.widget_top-posts .widgets-list-layout li > a {
    width: 40%;
} 

.widget_top-posts .widgets-list-layout img.widgets-list-layout-blavatar {
    max-width: 240px;
    width: 100%;
}

.widget_top-posts .widgets-list-layout div.widgets-list-layout-links {
    max-width: 100%;
    width: 55%;
}

@media only screen and (max-width: 1019px) {

    .widget_top-posts ul.widgets-list-layout {
        max-width: 600px;
        margin: 0 auto;
    } 

    .widget_top-posts .widgets-list-layout div.widgets-list-layout-links {
        font-size: 24px;
    }
}
This entry was posted in Code snippets, Tips & Tricks. Bookmark the permalink.

Explore the benefits of Jetpack

Learn how Jetpack can help you protect, speed up, and grow your WordPress site.

Compare plans

Have a question?

Comments are closed for this article, but we're still here to help! Visit the support forum and we'll be happy to answer any questions.

View support forum
  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 110,176 other followers

  • Browse by topic

  • %d bloggers like this: