Please note that our Legacy Themes have been replaced by new Thrive Theme Builder Themes. While our Legacy Themes are still functional, we are no longer actively developing them. This article explains why the Thrive Theme Builder themes don't need fixed "Featured Image" sizes.
How Does the Issue Occur
The standard dimension of a Post Grid image is 345 x 280 pixels, shown as a squared image. So, for example, if you upload a featured image of 400 x 700 pixels that also contains text from edge to edge, it will look broken.
For example, the first image below had 500 x 734 pixels in its original size, and the second image had 465 x 695 pixels. However, inside the Post Grid, they look like this:
The reason this happens is because the images cannot be fitted in the square with the dimensions they have, so they need to be cropped.
How This Situation Can be Avoided
Right off the bat, it is quite difficult to predict how an image will look like on a Post Grid, or on the Recent Posts sidebar, and so on. This is why it is quite difficult to give a 100% working solution.
However, here's what you can do, in order to avoid, as much as possible, the display of broken images:
- Avoid using images that are extremely wide. Choose images that have a squared shape and come as close as possible to the theme's dimension guidelines.
Below you can see the difference between a bad image and a good image in terms of dimension:
Most importantly, you need to display images that are proportionate to the dimensions found in the themes' guidelines. For example, a 1000 x 600 pixels image will basically look the same as a 500 x 300 pixels image, inside a Post Grid or a Related Posts sidebar.
- Keep the important part of the image in the center. This applies especially to images with text or important focus areas, which shouldn't be placed on the side of the image, because, in this case, they would be no longer visible after the image gets cropped.
For instance, here's an example of what kind of text images you should / shouldn't use:
As you can see, you need to look for images that have the text in the center. Otherwise, the text might not be visible after the image has been cropped, as you can see in the example above.