Responsive External Featured Image

Hi!

Thanks for using our plugin.

I was checking my website on my phone, and I noticed that the images aren’t responsive… Is there a way to make that happen, via CSS?

Well, sort of… When using regular images, they’re inserted as a block with a fixed aspect ratio, so when you change your browser’s dimensions (or access your site using a smartphone), images are properly scaled down.

When using external featured images, though, things are slightly different. The size of the featured image is computed before hand. You can define different sizes for any featured image using media queries:

img.nelioefi {
  width: 200px !important;
  height: 210px !important;
}

@media( min-width: 600px ) {
  img.nelioefi {
    width: 250px !important;
    height: 220px !important;
  }
}

@media( min-width: 1024px ) {
  img.nelioefi {
    width: 320px !important;
    height: 240px !important;
  }
}

Depending on the “width” of the viewport, featured images will be bigger or smaller.

I hope this helps!

Thanks a million! I’m going to try it out right away!!

Hi David!

Your ‘little fix’ works like a charm, but I’m still struggeling with one little thing.

https://koekiesenzo.nl/recepten-index/

If you scroll all the way down, you can see which posts use your plugin, the images aren’t the right size. My CSS is using the following code:

.featured-content img,
.gallery img {
	margin-bottom: 0;
	width: auto;
}

How do I merge your CSS with mine to make those images max. 90px x 90px?

No idea why this post stated it was solved, because it’s not…

Hi!

Real featured images (the ones you upload to your media library) are automatically cropped and scaled based on your theme’s settings. When the theme retrieves and renders a featured image, it asks for a specific thumbnail of the original image you uploaded (sometimes, this thumbnail is the actual, full-size image).

With external featured images, no “scaling” or “cropping” processed is applied – you simply tell our plugin the URL of the featured image and we do our best to mimic WordPress default behavior. This is how our plugin renders the external featured image: it loads a 1px transparent GIF image and scales it to the proper size using CSS rules. Then, the actual featured image is set as the background of that img tag, so that it can be scaled and cropped without stretching the image.

Clearly, the problem occurs because we can only approximate the size of the featured image. For instance, if your theme loads a 500x400px image, the best we can do is load an image tag as follows:

<img src="transparent-pixel.gif" style="width:500px;height:400px;" />

which, apparently, will look like a featured image from the media library. In reality, though, there are some problems. For example, if the container that contains the image is scaled down, a regular image might be also scaled down, maintaining the aspect ratio. With our external img tag, though, this is not possible; we set an exact width and height, so there’s no way that the image can be scaled up and down.

The only possible solution is to define multiple CSS rules with @media queries, so that the proper width and height values are set at concrete screen sizes (480px, 520px, 640px, 720px, and so on) and try to “mimic” WordPress behavior with CSS rules. This is far from ideal, but it’s the best solution we have right now.

Does this help somehow?

After several weeks of inactivity, I’m marking this topic as resolved.