search

bbc / Imager.js

Responsive images while we wait for srcset to finish cooking
Apache License 2.0
3.84k stars 224 forks source link

Support for inline background images #88

Open oskarrough opened 10 years ago

oskarrough commented 10 years ago

Hi, do you have any plans to support replacing inline style background images? Or would you recommend turning the already replaced <img> tags to whatever I need using the onImagesReplaced event?

Looks like this fork implemented it: https://github.com/firegoby/Imager.js

thom4parisot commented 10 years ago

Hello,

There is no plan yet but that should not be that difficult to add as it is the same replacement logic.

Instead of doing image.src = newUrl it would be image.style.backgroundImage = newUrl.

In any case, this is something you can achieve through CSS and media queries. Which is not the case of regular image SRC.

oskarrough commented 10 years ago

Would be great. I can't use media queries as a CMS is outputting all the inline background images.

thom4parisot commented 10 years ago

:thumbsup: okay, I'll check this out then.

IainIsCreative commented 10 years ago

Is there any update or progress on allowing Imager.js to work on inline background images?

thom4parisot commented 10 years ago

@iainspad not at the moment: I started something without ever finishing it. If you have an idea on how to do it, please propose something (or explain first how you would do if you are not comfortable yet to propose code).

Dobby89 commented 10 years ago

+1

Dobby89 commented 10 years ago

Looks like this has already been done as part of this fork: https://github.com/firegoby/Imager.js

Demo here: http://firegoby.com/imager-cssbackgrounds/

Will this be something you plan on adding?

thom4parisot commented 9 years ago

Hey guys,

the work has been documented in the feature-88 branch. For some reasons tests do not pass on iOS5 and iOS6 so I suppose some regression hides between the lines.

Feedbacks appreciated!

dennishall1 commented 9 years ago

Any chance at this landing within the next month or so? The use case is this: You want an image to be controlled by a cms or database field .. and output as an inline background image, such as <div style="background-image:url('path/to/image.jpg')"> It would be very unwieldy to override that in css, as it would have to be done with an inline style block that appeared right after the div in the html of the page (<style>...@media ... #ID-OF-DIV { background-image: url(path/to/background.jpg) !important; } ...</style>) .. Yeah, you'd have to have it in a style block in the page so the cms can output the image path .. and yeah, you'd have to use !important in order to override the inline style attribute on the div tag. Let's use Imager.js instead, right?