ISSUE: Featured Images are not the correct size on Home Page
This Help Desk article will assist in troubleshooting issues with featured images not filling their containers (i.e., looking too small, or not cropping correctly) on the Home Page of the Barton, Pearl and Hayes themes.
BACKGROUND
Pearl and Hayes offer many different options on the Home Page, with several different featured image container sizes to match.
For example, in this demo of Pearl, featured images feed into the slider:
As well as the Offset Grid layout section in Post Feed 1:
The Classic Feed layout section in Post Feed 2:
And the Grid Feed layout section in Post Feed 3:
With these featured images ranging in size from large to small, and in different orientations (landscape vs. portrait), it is common for users who have switched to Pearl or Hayes to not have featured images that are large enough to fill these spaces.
HOW TO FIX IMAGE SIZES
Typically if you are having an issue with featured images not filling their container, it relates to one of three things:
1) Thumbnails have not been regenerated
If you have switched from another theme to Pearl or Hayes, the media settings from your old theme are likely still attached to your featured images. You must regenerate thumbnails, so that the featured images get resized to fit the media settings of your new theme. Please review this Help Desk article, which walks you through how to regenerate thumbnails for featured images:
2) Images are not large enough for the container
If you have regenerated thumbnails and some images still did not resize, it means those images are not large enough for the container. It is common for content creators to upload images that are vastly undersized for the image container at hand, especially if they have enabled Retina settings in the theme Customizer. Here are a few ways to ensure the image you have uploaded is large enough:
- Check out the recommended image sizes for your theme. While this article offers specific recommendations for particular image containers in some themes, generally, if you size all images based on the Retina-ready recommendation for blog posts, they should fit into all image containers. For example, in Pearl, we've written that the optimal width for for blog post images @2x is 1500px. Images at this width would also resize correctly in Pearl's Home Page slider, assuming the aspect ratio was large enough. Speaking of:
- Ensure the ratio of the image will fit into the container at hand. Even if your image is wide enough for a container, if it's not tall enough, it would distort upon resizing, so the theme may not crop it, to prevent that distortion. If you're having issues with a specific container and want to determining a minimum height for that space, please submit a support ticket at empressthemes.com/contact.
- Check the dimensions of your image in a program like Photoshop, Lightroom, or Canva. Remember, images for web are measured in pixels, not inches. Even if you were given a "5x7-inch" image for printing, it doesn't necessarily mean that image has been optimized for web. We always recommend resizing images in a digital creative program to ensure the dimensions and resolution are appropriate for the task at hand.
3) Cache plugins, server-level cache, or browser cache are influencing what you see on your live site.
If you have caching plugins enabled, or your hosting company enables server level cache, this may impact what you see on a live site (and even what you see in the Customizer vs. the live site), as an older version of your stylesheet is being served to you. Please ensure you have disabled all caching plugins and turned off and/or flushed server level cache when you are customizing your site.