Viewing 1 replies (of 1 total)
  • Plugin Author David Aguilera

    (@davilera)

    I’m afraid it’s not possible. Usually, a featured image is inserted as follows:

    <img src="https://example.com/feat-image.png" ... />

    but Nelio uses a different approach:

    <img
       src="data:image/gif;...."
       style="background:url('https://example.com/feat-image.png')..." />

    So, essentially, we use a one-pixel, transparent image in the src attribute and the actual featured image is inserted using a CSS background property, instead of inserting the image directly (which will have a certain width and height based on the aspect ratio of the feat-image.png).

    Why we do that? When you upload a featured image to WordPress, WordPress will scale it down and (probably) crop some of the thumbnails it generates. Then, when inserting the image in your site, it uses the size that better fits its particular needs (a small thumbnail for a recent posts widgets, the original image for the post).

    If we use external featured images we cannot scale and crop them. But if we use the background CSS property, we can “simulate” this scale and crop; we can set any size to the image and its aspect ratio won’t be affected.

    In other words, the size of the featured image does no longer depend on the actual image, but on the CSS properties of the img tag (which depend on your theme / CSS files).

    I hope this clarifies how our plugin works!

Viewing 1 replies (of 1 total)
  • The topic ‘Featured image background-size’ is closed to new replies.