Background-image lazy-loading not compatible with WPML

[webdev69420]

When using the new CSS background images lazy-loading feature (tested using WP Rocket 3.15.0.1), the background-images do not appear anymore, because the path to them generated by WP-Rocket is incorrect when using WPML on the website.

Here's the original CSS coming from the style.css file present inside the WordPress theme folder:

background: url('/wp-content/themes/themename/img/arrow-right.svg');

Here's the CSS variable generated by WP Rocket, which contains an URL with the wrong path:

--wpr-bg-b1edba74-111c-42a4-8e0e-8b5ff1c99ef1: url('https://www.example.com/fr//wp-content/themes/themename/img/arrow-right.svg');

Wrong URL:

• https://www.example.com/fr//wp-content/themes/themename/img/arrow-right.svg

What the URL should be:

• https://www.example.com/wp-content/themes/themename/img/arrow-right.svg'

I guess this problem is coming from WPML adding a virtual directory at the end of the domain name.

But nevertheless, couldn't this easily be detected by WP Rocket?

Steps to reproduce

• Define a background image in the style.css file of your theme
• Use a relative path background: url('/your-path/.../image.jpg);
• Have the CSS background image lazy-loading feature enabled in WP Rocket 3.15.0.1
• Use WPML with the following URL structure: example.com/[LANG ISO CODE]/your-path/

[Mai-Saad]

Can reproduce the problem with the following steps (links give 404):

• Problem with internal relative images while directory setup/ query string setup in sub-language page here https://new.rocketlabsqa.ovh/ar/lazyload-bg-image-ar

1. WPML directory base setup (or qs base setup)
2. Page template with internal/external BG added to sublanguage
3. Enable LL BG image
4. visit the sublanguage version of the page
   => While qs setup, internal relative URLs are rewritten to https://new.rocketlabsqa.ovh/?lang=ar/wp-content/rocket-test-data/images/test-internal1.png , whereas, for directory base setup, internal relative images are rewritten to url('https:\/\/new.rocketlabsqa.ovh\/ar\/wp-content\/rocket-test-data\/images\/test-internal1.png')

• Problem with external CSS file URL while domain base setup of WPML in sublanguage page here https://ar.rocketlabsqa.ovh/ll-bg-ar/

1. WPML domain base setup
2. Page template with internal/external BG added to sublanguage
3. Enable LL BG image
4. visit the sublanguage version of the page
   => External CSS file rewritten to <link rel="stylesheet" href="https://ar.rocketlabsqa.ovh/wp-content/cache/background-css/ar.ar.rocketlabsqa.ovh/wp-content/rocket-test-data/styles/lazyload_css_background_images.css?wpr_t=1695137316">

[mostafa-hisham]

Reproduce the problem ✔️

i was able to reproduce the problem locally using this template

Identify the root cause

WPML plugin changes the output of home_url() and adds the currently used language to it.

Scope a solution

We need to not use home_url() and use get_option( 'home' ) instead to get the URL without the language
in the following locations

wp-rocket/inc/Engine/Media/Lazyload/CSS/Front/Extractor.php

Line 200 in bc38579

return home_url() . '/' . trim( $url, '/ ' );

wp-rocket/inc/Engine/Media/Lazyload/CSS/Front/Extractor.php

Line 216 in bc38579

$home_host = wp_parse_url( home_url(), PHP_URL_HOST );

wp-rocket/inc/Engine/Media/Lazyload/CSS/Subscriber.php

Line 533 in cae9ba1

$values [] = home_url() . $string;

Estimate the effort

Effort S

[CrochetFeve0251]

This seems good to me.

[Tabrisrp]

We have a function rocket_get_home_url() to get the home URL with no WPML filters (it's in inc/functions/i18n.php)