Recently, I worked with a client who was frustrated because the feature images for their blog posts were getting cropped awkwardly in the thumbnails, especially in the “Recent Posts” section of their site. They were using Kadence Blocks to build their site, and while the full-size feature images looked fine, the thumbnails—particularly on the homepage—were cutting off key parts of the visuals. After digging into the issue, I found a solution that ensures the entire image displays properly without unwanted cropping.

Here’s a step-by-step tutorial to fix this problem on your own site.

Step 1: Identify the Cropping Issue

The first thing to check is where the cropping is happening. In this case, the client noticed it in the “Recent Posts” section, where thumbnails were generated from the feature images assigned to each post.

By default, WordPress (and many themes like Kadence) crops images to fit predefined thumbnail sizes, often resulting in a square or fixed aspect ratio that doesn’t match the original image proportions. For my client, this meant portrait or wide images were losing their edges, making the thumbnails look incomplete.

Step 2: Check Theme Settings

Since the site was built with Kadence Blocks and likely the Kadence theme, start by exploring the theme’s customization options. Navigate to Appearance > Customize in your WordPress dashboard. Look for settings related to blog layouts or post displays:

• Go to Blog Posts or Posts/Pages Layout.
• Check if there’s an option for “Thumbnail Aspect Ratio” or “Featured Image Size.”

In the Kadence theme, you can sometimes adjust the aspect ratio for thumbnails (e.g., 1:1, 4:3, 16:9) or disable cropping entirely. For my client, the default was set to a square 1:1 ratio, which didn’t suit their rectangular images. If your theme offers this flexibility, switch to an aspect ratio that matches your images (like 16:9 for widescreen) and save the changes to see if it resolves the issue.

Step 3: Adjust WordPress Media Settings

If the theme settings don’t fix the problem, the issue might lie in how WordPress handles image sizes. Head to Settings > Media in your dashboard. You’ll see options for Thumbnail, Medium, and Large image sizes. By default, WordPress might crop thumbnails to a specific size (e.g., 150×150 pixels) with the “Crop thumbnail to exact dimensions” box checked.

For my client, I:

• Set the thumbnail width and height to a size that matched their typical image proportions (e.g., 300×169 for a 16:9 ratio).
• Unchecked the “Crop thumbnail to exact dimensions” box to prevent hard cropping.

After saving, this stopped WordPress from forcing a square crop, but existing thumbnails wouldn’t update automatically—more on that in Step 5.

Step 4: Customize Thumbnail Output with Code

If the theme or media settings don’t give you full control, you can tweak the thumbnail output with a bit of code. Since Kadence Blocks often relies on WordPress’s native the_post_thumbnail() function, you can override the default size or cropping behavior. Add the following to your theme’s functions.php file (use a child theme to avoid losing changes during updates):

// Add a custom thumbnail size
add_image_size('custom-blog-thumbnail', 300, 169, false); // Width: 300px, Height: 169px, No hard crop

// Use the custom size for blog thumbnails
add_filter('kadence_post_thumbnail_size', function($size) {
    return 'custom-blog-thumbnail';
});

Here, 300, 169, false creates a 16:9 thumbnail without cropping. The filter tells Kadence to use this new size for post thumbnails. Adjust the dimensions to fit your needs, and set the third parameter to true if you want a hard crop instead.

Step 5: Regenerate Thumbnails

Changing image sizes won’t affect existing thumbnails, so you’ll need to regenerate them. Install and activate the Regenerate Thumbnails plugin from the WordPress plugin repository:

• Go to Tools > Regenerate Thumbnails.
• Click “Regenerate All Thumbnails” and let it process.

This applies your new settings to all previously uploaded images. For my client, this step ensured the “Recent Posts” section reflected the updated, uncropped thumbnails.

Step 6: Test and Fine-Tune

After regenerating, visit your homepage or wherever the thumbnails appear (like the “Recent Posts” section). Check if the full image now displays without cropping. If it’s still off, revisit the aspect ratio in the theme settings or tweak the custom size in your code. My client’s images were mostly 16:9, so sticking to that ratio worked perfectly.

Optional: CSS Backup Plan

If all else fails, you can use CSS to force thumbnails to display their full dimensions. Add this to Appearance > Customize > Additional CSS:

.recent-posts .post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

This ensures the image scales proportionally without cropping, though it might leave gaps if the container has a fixed size. Adjust as needed based on your layout.

Conclusion

By combining theme settings, WordPress media adjustments, custom code, and thumbnail regeneration, you can stop feature images from getting cropped in thumbnails. For my client, the winning combo was setting a custom 16:9 size in the code and regenerating thumbnails. Test each step on your site to find the perfect fit—your visitors will appreciate seeing the full picture!