Changing the default thumbnail size

There’s no option that lets you easily do this, although it’s not too hard the fpw_featured_image filter and a custom style.

I’m not in a place where I can actually test this code right now, so use it at your own risk, but I think the following two snippets should do what you need.

1. In your theme’s functions.php file, place the following:

// create custom image size, 80x80 with hard crop
add_image_size( 'fpw_custom_thumbnail, 80, 80, true);

// override the featured image with custom size image
function fpw_custom_featured_image( $featured_image, $featured_page_id ) {
    return get_the_post_thumbnail( $featured_page_id, 'fpw_custom_thumbnail' );
}
add_filter( 'fpw_featured_image', 'fpw_custom_featured_image', 10, 2 );

Note: If your “thumbnail” image size set in Settings > Media is already 80×80, you can get rid of the add_image_size() line and replace ‘fpw_custom_thumnail’ with ‘thumbnail’ in the line beginning with return.

2. In your theme’s style.css file, place the following:

.fpw-layout-wrapped .fpw-featured-image {
    width: 80px; /* overrides width: 45%; */
}

Let me know if this works.

Hi @laughhearty,

Were you able to get this working satisfactorily? If not, let me know and I may be able to help you a bit more.

Based on your experience, feel free to either vote on features or submit feedback on my website so I can know in what ways you’d like the plugin to be improved in the future.

-Mark

Hi Mark,
I did try this out. But I think I forgot to add the styles and in didn’t work. Duh. Anyway, I opted for the Banner style. And will revisit this code for another project I’m working on. I will add some comments to your site. Would love to have image floated left as an option..

Thanks so much for a great plugin!

Thanks for the response. When I get a chance, I’ll test that code I posted and see if I can get it working.

In the mean time, I’m glad you were able to find an acceptable alternative.

As a final update, I just tested the code. There was a missing quotation mark in:

add_image_size( 'fpw_custom_thumbnail', 80, 80, true);

Otherwise, everything else should work as stated. As mentioned on the plugin’s main page, you’ll probably have to run an image resizing plugin after the change to get it working on images that are already in the media library.

Hi Mark,

In my media settings, thumb size is set to 50×50. I uploaded an image (after installing the plugin) and scaled it to 50×50. Then added this as a feature image to a page. However, the featured image is still showing a 200×200 image on the widget.

https://www.koradainc.com/school1/

Am I missing a setting some where?

Or do I have to implement the changes described in this post to achieve desired size (50×50)?

Hi Mark,

I just made one change to the theme’s custom css option:

.fpw-layout-wrapped .fpw-featured-image {
    width: 50px;
}

It started working.

I did not make any changes to the functions.php. As per this post, evening changes to functions.php is required. I am bit confused here.

To be clear for anyone who reads this thread, there are two changes to make for different reasons.

1. Change the size of the image file.
The code snippet with add_image_size() and add_filter() tells WordPress to crop images to the dimensions you want to use. This changes the actual dimensions of the image site visitors download.

2. Change the size of the display
The CSS change effects the size at which the image is displayed. By default, the widget is coded to [usually] work with sites that have a responsive design or a very narrow widget area. (This may also improve images on HiDPI displays, but that’s not completely confirmed yet.)

If you only change the CSS (#2), you’ll see the new image size, but you’ll still be forcing users to download the default image. This may distort the image and it will use the hard-crop (true on “Wrapped” and “Banner,” false on “Big”) setting associated with the image size of the widget layout you picked.