Does not work with inline CSS
SimonFricker opened this issue · comments
Does not work with inline CSS :(
It scans img tags. Why you would ever use inline CSS? :P
It has its uses
@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.
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.
@JoshCarey Alright, you've convinced me. I'll see if I can squeeze something into 2.0.
@JoshCarey this was my exact use case too.
Ok guys, it's official. We'll be supporting inline background images in version 2.0 which is currently in active development.
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?
@tb9jen Are you using version 2? If so, let me know what you're seeing and I'll take a look.
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.
Great! Let us know if you have any other issues.