Background images inside style attributes

[peixotorms]

Hi there,

This is a bit like #19 but not exactly.

I'm trying to automate some code to lazy load images on wordpress sites, however, a wordpress plugin doesn't always have easy control over the css code on the site or it's structure. But, we can parse the html and rewrite portions of the html code relatively easily.

Is there any way we can lazy load the image below?
<div class="tve_post_grid_image_wrapper" style="background-image: url(https://example.com/wp-content/uploads/2017/10/Coffee-Subscription-Boxes.jpg ); height: 195px">

I was thinking that rewriting the html to something like this, and then let yall.js deal with it, makes sense:
<div class="tve_post_grid_image_wrapper lazy-bg" style="background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') data-background-image: url(https://example.com/wp-content/uploads/2017/10/some-image.jpg ); height: 195px">

Is this something you could add in the future, or do you suggest some other method that doesn't involve creating extra css classes for the background images, or replacing the style attribute?

[malchata]

Hi, thanks for logging this feature request.

For reasons I've outlined in this comment, I'm not keen on covering the use case you've described here. There are limitations when using an inline style attribute. For example, you can't target different displays with media queries within them.

Since you do have control over the HTML, I would recommend putting the rules you need within a <style> block. This not only will give you the control you need, but will give you additional capability to use @media rules.

If you have any questions, feel free to reply in here and I'll try to field them as soon as I can, but I'm closing this in the interim, as I don't intend to implement this request.