WordPress : Repli WebP pour l’image d’arrière-plan en ligne dans l’attribut de style

J’ai développé un thème qui a un type de publication personnalisé appelé projets. Sur les pages de projet unique, il y a une section de style parallaxe avec une image d’arrière-plan défilante de haute qualité. J’utilise un champ personnalisé (via le plugin ACF) pour ajouter cette image d’arrière-plan aux pages du projet, et ce champ personnalisé est codé dans le fichier de modèle de projet unique. Cela signifie que je n’ai besoin que d’un seul modèle pour toutes les pages de mon projet.

Cette image d’arrière-plan est de haute qualité et est donc un fichier image assez volumineux (il est important pour moi de conserver la qualité de l’image). Je souhaite ajouter des images WebP comme images d’arrière-plan à cette section de parallaxe. Mais bien sûr, j’ai besoin d’avoir une solution de secours pour les navigateurs qui ne prennent pas en charge le format d’image WebP. J’ai vu de nombreux articles/tutoriels sur la manière de fournir une solution de secours aux images générées via la <img>balise ou via la propriété background-image dans le fichier CSS. Mais je n’ai pas rencontré un seul article faisant référence à la manière de fournir une solution de secours pour une sortie d’image d’arrière-plan via l’attribut style.

Je ne peux pas sortir les images d’arrière-plan via un fichier CSS ou une classe CSS, car ACF doit être utilisé uniquement dans les fichiers PHP, donc le champ personnalisé doit être codé directement dans le fichier de modèle (dans l’attribut style sur le nécessaire <div>)

En résumé, comment fournir une solution de secours pour le format d’image WebP pour la sortie d’images via l’attribut style ? Comment fournir une solution de secours pour le CSS d’image d’arrière-plan en ligne ?

Exemple de code :

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

Ou existe-t-il une autre solution pour afficher ces images d’arrière-plan qui me manquent?

Solution n°1 trouvée

Voici quelques idées folles que vous pourriez essayer, si vous vous sentez aventureux.

1) Écrivez une logique conditionnelle avec $_SERVERpour détecter si le navigateur de l’utilisateur est du bon type et d’une version suffisamment élevée, qui prendrait probablement en charge le format WebP.

Essayez d’utiliser $_SERVER ['HTTP_USER_AGENT']et voir aussi https://stackoverflow.com/questions/13252603/how-does-http-user-agent-work

2) Ajoutez le WebP et les URL de l’image de secours au fur et à mesure data attributeset utilisez js pour la détection du navigateur et pour définir le WebP ou l’image de secours comme image d’arrière-plan.

par exemple<div data-webp-bg="some-img-url" data-fallback-bg="another-img-url"></div>

ps Je ne sais pas si cela fonctionnerait bien, mais je me sens juste créatif en ce moment.

EDIT 22.10.2018
Voici quelques pistes que vous pourriez suivre et rechercher davantage, si vous souhaitez trouver des solutions de travail à mes idées folles.

Pour php, jetez un œil à https://github.com/hisorange/browser-detect ( à l’origine pour Laravel je suppose, mais je pense que vous pourriez aussi l’utiliser ailleurs ) ou https://github.com/cbschuld/Browser.php pour Exemple.

Pour js, cet ancien fil pourrait s’avérer utile https://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser. Voir aussi https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator

Quelques minutes de recherche sur Google m’ont donné ces articles connexes, https://artisansweb.net/detect-browser-php-javascript/ et https://medium.com/creative-technology-concepts-code/detect-device-browser- et-version-utilisant-javascript-8b511906745

ps Désolé pour tous les liens et pas de code. Les liens sont là juste pour donner un coup de pouce dans la bonne direction et pour promouvoir ses propres recherches et apprentissages. C’est une expérience d’apprentissage pour moi aussi.