Hi gsteinbrenner. Welcome to the Hueman forum. Let me preface this by saying I am not a WP expert nor do I pretend to know everything there is to know about image management in WP. But I’ll try to explain what I think is happening.
When you upload an image to the Media Library the theme uses a “hard crop” to create the following thumbnails:
( ‘thumb-small’ ) 160 x 160
( ‘thumb-standard’ ) 320 x 320
( ‘thumb-medium’ ) 520 x 245
( ‘thumb-large’ ) 720 x 340
The theme uses the 720×340 thumbnail for the slider featured image. This is your original 1000×667 image resized to 720px width. The height is then resized proportionately to (720/1000) x 667 = 480px. Since 480px this is larger than the designated thumbnail height, the thumbnail is cropped top and bottom to 340px. When it is displayed the thumbnail is resized using css to 100% of the slider width of 621px and the height is resized proportionately to 293px.
On the home page post the theme is using the 520×245 thumbnail. Again, your original 1000×667 image is resized in width to 520px, and the height is resized proportionately using (520/1000) x 667 = 346px. Since 346px is larger than the designated thumbnail height, the thumbnail is cropped top and bottom to 245px. It is resized for display using css to 100% of the column width of 296px and the height is resized proportionately to 139px.
Your embedded post image is using the full-size image of 1000×667 which is being resized using css to 100% of the content width of 781px; the height is resized proportionately to 521px.
So, how to fix it. One thing you could try is copying the alx_setup() function in functions.php to a child theme functions.php file:
function alx_setup() {
// Enable title tag
add_theme_support( 'title-tag' );
// Enable automatic feed links
add_theme_support( 'automatic-feed-links' );
// Enable featured image
add_theme_support( 'post-thumbnails' );
// Enable post format support
add_theme_support( 'post-formats', array( 'audio', 'aside', 'chat', 'gallery', 'image', 'link', 'quote',
'status', 'video' ) );
// Declare WooCommerce support
add_theme_support( 'woocommerce' );
// Thumbnail sizes
add_image_size( 'thumb-small', 160, 160, true );
add_image_size( 'thumb-standard', 320, 320, true );
add_image_size( 'thumb-medium', 520, 245, true );
add_image_size( 'thumb-large', 720, 340, true );
// Custom menu areas
register_nav_menus( array(
'topbar' => 'Topbar',
'header' => 'Header',
'footer' => 'Footer',
) );
}
This function contains the theme thumbnail sizes. Change the thumb-medium and thumb-large entries as described in this post. Install and run the Regenerate Thumbnails plugin.
In addition to the theme-generated thumbnails, WP creates four additional thumbnails:
( ‘thumbnail’ ) 150 x 150
( ‘medium’ ) 300 x 300
( ‘large’ ) 640 x 640
( ‘full’ ) original image size
If WP can’t create the exact thumbnail size it will try to create something close. What happens if your original image is smaller than the thumbnail sizes? Thumbnails larger than the image aren’t created. If the theme needs a thumbnail that doesn’t exist it uses the ‘full’ size and expands it to fit wherever it goes which, depending on how much it’s expanded, can look really b-a-d.
So, hope that helps. I have links to several other related posts and articles; let me know if you’re interested in more info. I personally think media management is one of the least documented and least understood parts of WP. The user uploads an image and expects that it will fit where it’s supposed to and look right. And when it doesn’t, they say “why not?” and go searching for a fix. On your home page, you would think the post thumbnails should all be the same size, but they’re not. Given everything I said above, why is the “Grilled Marinated Shrimp” post using an uncropped 367×245 thumbnail instead of 520×245? I don’t know the answer. Frustrating for both the user and those of us trying to help, and time consuming for everyone involved. Maybe someday it will be better.
