Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for inline background images #88

Open
oskarrough opened this issue Apr 8, 2014 · 9 comments · May be fixed by #108
Open

Support for inline background images #88

oskarrough opened this issue Apr 8, 2014 · 9 comments · May be fixed by #108

Comments

@oskarrough
Copy link

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
Copy link
Contributor

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
Copy link
Author

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

@thom4parisot
Copy link
Contributor

👍 okay, I'll check this out then.

@IainIsCreative
Copy link

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

@thom4parisot
Copy link
Contributor

@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
Copy link

Dobby89 commented Aug 3, 2014

+1

@Dobby89
Copy link

Dobby89 commented Aug 19, 2014

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
Copy link
Contributor

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
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants