BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty fourteen

How to Resize and Optimize Featured Images in the Twenty Fourteen Theme

22 threads Sep 16, 2025 Theme → Twenty fourteen

Content

Many users of the Twenty Fourteen theme encounter challenges with how their images, particularly featured images, are displayed. A common issue is that images do not scale as expected after modifying the site's layout, or they appear at an incorrect size, leading to poor page performance and a negative impact on page speed tests. This guide explains why these problems occur and provides the most effective solutions.

Why This Happens

The Twenty Fourteen theme is designed with specific image dimensions and cropping behaviors to maintain its layout integrity. When you change your site's width or attempt to alter image aspect ratios, the theme's built-in styles and functions can sometimes conflict with your changes. Furthermore, the theme serves different image sizes in various contexts (like the featured content grid versus a single post), which can lead to full-size images being used as thumbnails, slowing down your site.

Common Solutions

1. Using a Child Theme and Custom CSS

The safest way to modify image behavior is by using a child theme. This prevents your changes from being overwritten during theme updates. A common request is to make images in posts scale to 100% of the container width. However, a broad CSS rule can affect images site-wide, including small thumbnails.

Targeted CSS for Single Post Images:
To specifically target only the main images on single post pages, you can use more specific CSS selectors in your child theme's style.css file or a custom CSS plugin.

.single-post .post-thumbnail img {
    width: 100%;
    height: auto;
}

This rule helps ensure that only the featured image on individual post pages expands to fill the content area, leaving other thumbnails untouched.

2. Modifying Image Sizes via Functions.php

Many users want to change the default cropped size of featured images, for example, to make them square (1:1 ratio) or to prevent cropping altogether. This must be done by redefining the theme's image sizes in your child theme's functions.php file.

Correct Code for Child Theme's functions.php:
It is crucial to use the after_setup_theme hook with a priority higher than the parent theme's (which is 10) to ensure your changes take effect.

function my_child_theme_setup() {
    // Change default post thumbnail size to 700x366, cropped
    set_post_thumbnail_size( 700, 366, true );
    
    // Change full-width image size to 1200x628, cropped
    add_image_size( 'twentyfourteen-full-width', 1200, 628, true );
}
add_action( 'after_setup_theme', 'my_child_theme_setup', 11 );

After adding this code, you must regenerate your thumbnails using a plugin like "Regenerate Thumbnails" for the changes to apply to existing images.

3. Solving the "Serve Scaled Images" Performance Issue

A frequent complaint is that the theme uses a large, full-width image file for small thumbnail displays (e.g., in the featured content grid), which hurts page load times. The solution is to ensure the correct image size is called in the template.

For example, to fix the grid on the homepage, you would need to override the theme's content-featured-post.php template file in your child theme. Find the line that outputs the image and change it to use a smaller registered size, like 'medium':

the_post_thumbnail( 'medium' );

Simply copying the template file to your child theme and making this edit should force the grid to use a smaller, more appropriate image file.

4. Removing the Featured Image Background

If a featured image is not large enough to fill its container, a grey background pattern may appear behind it. This can be removed with CSS in your child theme.

.post-thumbnail {
    background: none;
}

Conclusion

Image sizing in the Twenty Fourteen theme is controlled by a combination of its PHP functions and CSS rules. The most reliable method for making changes is to use a child theme and carefully override these rules with more specific code. Always remember to clear your cache and regenerate thumbnails after making changes to see the correct results. For those concerned about the number of generated image sizes, the Twenty Fourteen theme creates several additional sizes, which is a common practice to ensure responsiveness across different devices.

Related Support Threads Support