Why use background image?

Hi! First of all, thanks for using our plugin and, moreover, for tyring to improve it!

Now, regarding your comments: yes, there is a reason for establishing the featured image via the CSS background property. The solution you propose (which we also considered) does not work when the aspect ratio of the external image and the aspect ratio of the thumbnail differ. If both aspect ratios are the same (or similar enough), there won’t be any distortion (or the distortion would be imperceptible). However, if the theme inserts a landscape thumbnail, and the featured image is a portrait, the results would look ugly.

By default, WordPress does not also scale images, but it also crops them if needed. With our approach, scaling and cropping works out of the box. There might be, however, some additional problems, as you perfectly point out. For those scenarios, one has to modify the CSS files of their theme (almost all themes permit adding custom CSS fragments).

I hope this resolves your doubts! If there’s anything else we can help you with, don’t hesitate to write back. Thanks again for getting in touch and don’t forget to star the plugin!

Thanks, but your plugin does not work out of the box with the standard the_post_thumbnail(‘imagename’) approach, I’d suggest getting it working so the image outputted is the correct crop, not use a background image technique as it’s just doesn’t work well on the responsive designs.

Why is ratio a problem when this CSS can fix stretched images… img { max-width: 100%; height: auto; }

Your method seems pretty restrictive but equally it’s almost there, if it just output what it needed within the img src=”” and did away with the background image stuff.

EDIT: I’ve re-read this now and I see what you are saying, you are saying the image area is a kind of window / placeholder and you are using CSS to mask off the image to the crop… in which case I’m not sure how consistent this plugin will be with all of the crops out there and responsive design. I’ll have a think of a more workable solution as currently we can’t use your plugin as it doesn’t work for us.

Yup, you’re completely right in your EDIT part. We use the img tag as a “placeholder” or “canvas”. We basically assume that the img will have the proper size (because of theme’s default CSS settings). Since the img has the proper size (presumably), we simply define the background image and use the image as a natural cropper of the external asset.

Of course, this does not work in all scenarios. We are making a strong assumption here: theme’s default CSS defines the size of a featured image properly. If it’s not (as I understand is your case), then users will have to tweak their themes via CSS to make sure that external featured images look good on the corner cases you mention… but that should be no problem either (apart from the extra work required), as CSS tweaks can be responsive-aware.

If you are able to find a better solution (one that does not have the aspect ratio problem), we’ll be more than glad to integrate it in our plugin. Otherwise, we’ll have to stick to our own solution, which has proven to work quite well so far.

Since it’s been three months a no one provided a better solution, I’m marking this thread as resolved.