custom post types - WebP Fallback for Inline Background Image in Style Attribute|Programmer puzzle solving

I have developed a theme which has a custom post type called projects. On single project pages there is a parallax style section with a high quality scrolling background image. I am using a custom field ( via ACF plugin) to add this background-image to the project pages, and this custom field is coded into the single project template file. This means I only need one template for all my project pages.

This background image is high quality and so is quite a large image file (it's important to me to retain the quality of the image). I want to add WebP images as the background images to this parallax section. But of course I need to have fallback for browsers that do not support the WebP image format. I have seen lots of articles/tutorials on how to provide fallback for images that are output via the <img> tag, or via the background-image property in the CSS file. But I have not come across a single article referencing how to provide fallback for a background-image output via the style attribute.

I cannot output the background-images via a CSS file or CSS class, because ACF needs to be used in PHP files only, so the custom field needs to be coded directly in the template file (in the style attribute on the necessary <div>)

In summary, how do I provide fallback for the WebP image format for images output via the style attribute? How to provide fallback for inline background-image CSS?

Code example:

<section class="parallaxSection parallaxWide">          
    <div class="parallaxWide--wrap">
        <div class="parallaxWide--elementWrap">
            <div class="parallaxWide--element" style="background-image:url(<?php if( get_field('parallax_bgimage' )) { the_field('parallax_bgimage'); } ?>);">
            </div>
        </div>
    </div>
</section>

Or, is there another solution to outputting these background images that I'm missing?

In summary, how do I provide fallback for the WebP image format for images output via the style attribute? How to provide fallback for inline background-image CSS?

Code example:

<section class="parallaxSection parallaxWide">          
    <div class="parallaxWide--wrap">
        <div class="parallaxWide--elementWrap">
            <div class="parallaxWide--element" style="background-image:url(<?php if( get_field('parallax_bgimage' )) { the_field('parallax_bgimage'); } ?>);">
            </div>
        </div>
    </div>
</section>

Or, is there another solution to outputting these background images that I'm missing?

Share Improve this question asked Oct 20, 2018 at 13:30 Superfein 113 bronze badges

You can't do it via the style attribute. You'll need to give the element a unique ID and then add a <style> element with the relevant rules. – Jacob Peattie Commented Oct 21, 2018 at 12:32
@JacobPeattie I've seen some very helpful tutorials on using Modernizr for browser detection: css-tricks/using-webp-images ...but this technique requires the images to be delivered via the stylesheet, as you suggest. But as I am using ACF on a single template for custom post type pages, delivering the images via the stylesheet won't work for me. The images need to be different on every page (using that single template). – Superfein Commented Oct 22, 2018 at 14:17
I didn't say use a stylesheet, I said use the <style> tag: w3schools/tags/tag_style.asp – Jacob Peattie Commented Oct 22, 2018 at 14:20
Can PHP be inside those style tags? I've personally never seen that done. PHP for ACF output. – Superfein Commented Oct 22, 2018 at 14:25
I just Googled it and yes PHP can be inside style tags. I'll experiment with this idea, thanks @JacobPeattie. – Superfein Commented Oct 22, 2018 at 14:28

| Show 1 more comment

1 Answer 1

Sorted by: Reset to default -1

Here's couple of wild ideas which you could try, if you're feeling adventurous.

1) Write some conditional logic with $_SERVER to detect if the user's browser is the right type and high enough version, that would probably support the WebP format.

Try using $_SERVER ['HTTP_USER_AGENT'] and see also https://stackoverflow/questions/13252603/how-does-http-user-agent-work

2) Add the WebP and fallback image urls as data attributes and use js for the browser detection and to set the WebP or the fallback image as the background-image.

e.g. <div data-webp-bg="some-img-url" data-fallback-bg="another-img-url"></div>

p.s. I don't know how well these would work, but I'm just feeling creative at the moment.

EDIT 22.10.2018 Here's couple of leads you could follow and research more, if you want to come up with working solutions to my wild ideas.

For php take a look at https://github/hisorange/browser-detect (originally for Laravel I guess, but I think you could use elsewhere too) or https://github/cbschuld/Browser.php for example.

For js, this old thread could prove useful https://stackoverflow/questions/5916900/how-can-you-detect-the-version-of-a-browser. See also https://developer.mozilla/en-US/docs/Web/API/Window/navigator

Couple of minutes of googling gave me these related articles, https://artisansweb/detect-browser-php-javascript/ and https://medium/creative-technology-concepts-code/detect-device-browser-and-version-using-javascript-8b511906745

p.s Sorry for all the links and no code. The links are here just to provide nudge to the right direction and to promote own research and learning. This is a learning experience for me too.

Programmer puzzle solving

custom post types - WebP Fallback for Inline Background Image in Style Attribute

1 Answer 1

Articles related to this article

comment list (0)