jetpack_top_posts_widget_image_options – Jetpack Developer Resources

jetpack_top_posts_widget_image_options

Top Posts Widget Image options.

Parameters

$get_image_options array: { Array of Image options.

Changelog

Introduced in Jetpack 1.8.0

How to use this hook

See “How to use actions and filters to customize Jetpack”.

Notes

You can use this filter to change the size of the images displayed in the Top Posts Widget. In the example below, we’ll change the size to 600px.

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' );

You’ll also need some CSS to make sure the size is correct on all devices:

.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;
    }
}

If you’d rather have rectangular images, you can do the following:

function jeherve_custom_top_posts_rectangular_images( $get_image_options ) {
        $get_image_options['width'] = 600;
        $get_image_options['height'] = 200;
 
        return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_top_posts_rectangular_images' );