Hi!
As I said you in the reviews section, I’m sorry I couldn’t answer you sooner. We’re quite busy these days and we don’t have much spare time to address issues regularly ??
Unfortunately, your issues is quite complicated to fix.
First of all, what’s happening?
When you upload an image to the media library, WordPress generates multiple thumbnails of said image. These thumbnails scale down and crop the image as required, so you end up with multiple versions of the same image. So, for example, you may add a featured image with a portrait aspect ratio, and WordPress will generate two thumbnails: one “squared” and the other with a landscape aspect ratio.
When WordPress uses thumbnails in final HTML page, these might be scaled using CSS rules. Usually, when scaling an image, its size changes but its aspect ratio is fixed.
That’s something that doesn’t work with external featured images. Our plugin can’t crop and scale a external featured image (because, where would we save the cropped-and-scaled thumbnail?). Our plugin relies on CSS rules for showing featured images with the appropriate sizes.
How to fix
I installed the theme and this is the result. As you can see, Nelio’s External Featured Image is quite easy to spot, isn’t it?
The only solution here is to see where this image is inserted in the DOM and add a rule that fixes it. In this example, for instance, this particular featured image is used in the front page. This is a fragment of the DOM:
<body class="home...">
...
<div class="pad group">
...
<ul class="highlights group">
<li>
<article>
...
<img class="nelioefi...>
...
So, apparently, the image is used in an unordered list with the following classes: highlights group. Let’s add the following CSS rule in the theme:
.ul.highlights.group .nelioefi {
max-height: 100px;
}
And this is the result. Much better, isn’t it?
You’ll have to repeat this process each time a featured image doesn’t look good: look for the image in the DOM and try to come up with the most specific rule that fixes the issue.
Finally, you should always take into account that different window sizes (responsive designs) might change the size of “regular” featured images, so you have to consider using @media queries, as well as overwriting regular images so that their sizes match those of Nelio’s:
/* Apply the rule to all images, not only Nelio's */
.ul.highlights.group img {
max-height: 100px !important;
}
I hope this helps!
All the best,
David
