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

Does not work with inline CSS #224

Open
SimonFricker opened this issue Dec 9, 2015 · 11 comments
Open

Does not work with inline CSS #224

SimonFricker opened this issue Dec 9, 2015 · 11 comments
Labels

Comments

@SimonFricker
Copy link

Does not work with inline CSS :(

@lucasff
Copy link

lucasff commented May 10, 2016

It scans img tags. Why you would ever use inline CSS? :P

@SimonFricker
Copy link
Author

It has its uses

@jgnewman
Copy link
Collaborator

@SimonFricker Do you mean it doesn't work with background images inserted via inline CSS? If so, we'd recommend you use one of our sass or less mixins. The problem is that if the script were to try and effect inline styles, we'd lose a lot of performance because 1) we'd have to run a check for a background style on every element in the DOM and 2) when we did find those elements, there would be a LOT of dirty regex work that would have to take place. In our opinion, it's better to use the mixins because they generate media queries, which are a much better way of handling image swapping via CSS.

@JoshCarey
Copy link

JoshCarey commented Jun 10, 2016

I think the problem I'm having falls into this issue as well. So basically, I work at an agency and develop wordpress sites for different clients. One of the key things we do is work with a plugin called Advanced Custom Fields to allow us to dictate where users can add and manage their own content. One of these fields is usually an image. I can dictate every other aspect about the background image in my stylesheet. However the ONE aspect that is dynamic and needs to be called in my theme php file is the image background source. I've tried the inline thing and absolute positioning... but that always leads to more issues, ie: doesn't have the proper "background-size: cover; background-position: center center;" capabilities.
So the markup pretty much required reads like:

<div class="hero-image" style="background-image: url('<?php echo $heroImgURL; ?>');">
</div>

and again, every other aspect of "hero-image" is dictated in my stylesheet.

So obviously, the Sass mixin solution doesn't work in this scenario... where the background image needs to be dynamic.

@jgnewman
Copy link
Collaborator

@JoshCarey Alright, you've convinced me. I'll see if I can squeeze something into 2.0.

@SimonFricker
Copy link
Author

@JoshCarey this was my exact use case too.

@jgnewman
Copy link
Collaborator

Ok guys, it's official. We'll be supporting inline background images in version 2.0 which is currently in active development.

@strues strues added the legacy label Jun 21, 2016
@tb9jen
Copy link

tb9jen commented Apr 13, 2017

I have this exact scenario, and I see in the documentation that this seems to have been implemented, but isn't actually working for me. Any updates?

@jgnewman
Copy link
Collaborator

@tb9jen Are you using version 2? If so, let me know what you're seeing and I'll take a look.

@tb9jen
Copy link

tb9jen commented Apr 14, 2017

Thanks, I got it working by calling window.retinajs(); after the page was done loading. I think what was happening is that the thumbnail from WP wasn't loaded until after it ran the first time but it seems to be working now.

@jgnewman
Copy link
Collaborator

Great! Let us know if you have any other issues.

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

No branches or pull requests

6 participants