Hello bartzy,
Unfortunately, that is impossible to do 🙂 That would be really magical, indeed… And I even tried to think about it. I would need to analyze CSS on the fly and generate those media queries dynamically. While of course still checking the existence of the images and all. That would be a real big project by itself and I am not sure it would work.
Thread Starter
bartzy
(@bartzy)
Hi Jordy,
Thanks for your answer.
Many themes are using background images (when using Visual Composer or some other similar solution). It becomes very tedious to write manual media queries, and actually proves problematic with HTTP and HTTPS (if the CDN endpoints are different for some reason).
Even doing that statically – Like a “Generate Media Queries for CSS” button on wp-admin, would really help.
Just my 2 cents 🙂
I have had the same problem and came up with a custom php snippet that generates a style tag for each background image.
Not a very clean solution, but it works.
<?php
$my-image = MY-IMAGE-URL;
$my-image-retina = str_replace(".jpg", "@2x.jpg", $my-image);
echo '<style>
.my-background-image {
background-image: url(' . $my-image . ');
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-device-pixel-ratio: 1.5) {
.my-background-image {
background-image: url(' . $my-image-retina . ');
}
}
</style>';
?>
… Browser should automatically search and load retina images. Maybe in a near future.
bartzy, unfortunately like I said it’s near impossible to do it. The plugin will become 5 times its current size, full of tricks and trying to do it but will fail in many cases. Actually it is impossible to do properly. Inline background don’t handle src-set neither, and retina.js wouldn’t work neither, so you would have to use the Server-Side method which doesn’t work with caching… wow… what a headache it is 😉
Samariter, yes, you can try to develop it for your specific theme. Should be better to create a child theme.
Don’t do the str_replace yourself, and you assume the retina image exists. It is better to use one of the function I provide here: https://ww.wp.xz.cn/plugins/wp-retina-2x/faq/. Get the retina image for URL, if it is null, don’t write this CSS because it will override the normal CSS with a background and an image that doesn’t exist.
Cool. Thanks for the hint!
Yeah I think one should wait until object-fit has a wider support. The lack of browser support for object-fit is actually the only reason I’m still using background-images 😉
I am using background images too but I actually use “retina” files directly in there and avoid media queries.
I didn’t knew about this object-fit!!!! 🙂
