Changing the default thumbnail size
-
Hi,
I need to change the square thumbnail size to 80px x 80px. Is there a way for me to do this?Thanks!
-
There’s no option that lets you easily do this, although it’s not too hard the
fpw_featured_imagefilter 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.phpfile, 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 withreturn.2. In your theme’s
style.cssfile, 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.
http://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 withadd_image_size()andadd_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 (
trueon “Wrapped” and “Banner,”falseon “Big”) setting associated with the image size of the widget layout you picked.
The topic ‘Changing the default thumbnail size’ is closed to new replies.