BEFORE
AFTER
The Extra Theme limits the height of featured images on posts to 640px by default. Images taller than this will be cropped top and bottom, as shown in the before picture above.
If you’d like to increase the maximum height of the featured images on posts to, say 1000px, you can do by adding the following PHP code into Extra’s functions.php file, or into the functions.php file of a child theme (N.B. it’s advisable to take a backup of your site before editing PHP code as PHP errors can cause your site to become inaccessible):
// Prevent featured post cropping
function disable_cropping_on_featured_images() {
add_image_size( 'extra-image-single-post', 1280, 1000, true );
}
add_action('after_setup_theme', 'disable_cropping_on_featured_images', 11);
If you wish to allow even taller images, simply increase the “1000” in the above.
Important: The fix above will apply only to newly uploaded featured images. To apply it to existing featured images you must regenerate the thumbnails using a plugin such as Force Regenerate Thumbnails. Thanks to Jessica for pointing this out.
Don’t forget to regenerate thumbnails 🙂 I used the plugin Force Regenerate Thumbnails, as uncropped featured images weren’t showing up otherwise 🙂
Yes! Thank you, Jessica, I completely forgot to mention this. The fix above will apply only to newly uploaded featured images. To apply it to existing featured images you must indeed regenerate the thumbnails. “Force Regenerate Thumbnails” works great. Here’s the link for anyone who needs it:
https://wordpress.org/plugins/force-regenerate-thumbnails/
This is great, thanks! Much better than editing the core file in my child theme.
What would the code be to also adjust the height for extra-image-single-post, as well as the extra-image-medium that shows on the front page?
Hey Tom. This post describes how to do it for the extra-image-medium images (e.g. the images on the front page / posts module):
https://extrabooster.com/prevent-post-images-from-being-cropped-e-g-on-homepage/
The code in the post above is for adjusting the height of extra-image-single-post (the featured images). Did you mean something else here?
I added the above code and it is STILL cropping the featured image. Please help!! Thank you!!
Hi Chelsea, I’ve just replied to your email on the same topic. Is there any chance you’re able to send me a link to (or screenshot of) an example page in reply to that email? Thanks!
Hi Chelsea,
This is the code I was given for a DIVI theme. I had to create a child theme, then added it to the functions.php section of the theme editor.
add_filter( ‘et_pb_index_blog_image_width’, ‘custom_image_width’ );
function custom_image_width($width) {
return ‘9999’;
}
add_filter( ‘et_pb_index_blog_image_height’, ‘custom_image_height’ );
function custom_image_height($height) {
return ‘9999’;
}
add_filter( ‘et_pb_blog_image_width’, ‘custom_blog_image_width’ );
function custom_blog_image_width($width) {
return ‘9999’;
}
add_filter( ‘et_pb_blog_image_height’, ‘custom_blog_image_height’ );
function custom_blog_image_height($height) {
return ‘9999’;
}
This got rid of the cropped feature images on both the blog page and the individual bog posts.
The issue I have now is that the vertical panoramic images (1×3 ratio) display huge on the single posts and larger in comparison to the horizontal format images on the blog page. The reasoning is the width is determining the height. I can reduce this but then the horizontal images are tiny. So a bit of a headache.
My solution is to disable the feature image on the single posts and insert a correctly scaled media image in the text so that it is in proportion. Css code added to the additional css was :
.single-post .et_post_meta_wrapper img {
display: none;
}
The blog page retains the feature image. Still deciding if I can live with the vertical image over size issue. May just co back to cropped image on the blog grid. The main thing for me is the single post being displayed correctly.
Hope this helps. I’m not a tech wiz on this, but this was given
Thanks for taking the time to share your solution, garry! Much appreciated 🙂
A couple of additional thoughts / notes, if it helps anyone…
1) I don’t think the first two add_filter blocks will work in Extra (as, unlike Divi, it doesn’t have those filters).
2) The third and fourth add_filter blocks control the images within the blog module and should work in both Divi and Extra
3) I haven’t had a chance to actually run this code (so backup, etc, before you do), but I think you might be able to solve your specific dilemma garry by returning a different (i.e. default) width on posts using this variant:
add_filter( 'et_pb_index_blog_image_width', 'custom_image_width' ); function custom_image_width($width) { // Use default width on posts if (is_single()) { return $width; } // Override elsewhere return '9999'; }