Add support for background images within Elementor

[gabrielcld2]

This ensures that background images generated within Elementor's CSS files are handled accordingly.

Approach

• Hook into the Elementor parse_css hook.
  • Check for any background image elementor keys
  • Generate the corresponding cloudinary URL for the media
  • Inject the right CSS rule to override the default one within Elementor
• Flush the elementor cache whenever a cache flush occurs on Cloudinary
  • This ensures any setting change is directly applied for Elementor background images

QA notes

• Activate the Elementor plugin
  • Create a page with Elementor
    • Within the elementor page, add an element like a heading
    • Edit the heading, go to Advanced and open the background section
    • Apply a background image (and if you want, you can also apply a hover background image, or even some viewport specific ones like tablet or mobile background images)
  • Publish and view the page
  • Inspect the element and check its CSS contains the cloudinary URL for the background image
  • Go to Cloudinary -> Image Settings
    • Make some changes for instance the image format
    • Save the changes
    • Reload the elementor page and make sure the changes applied to the background image
• Deactivate the Elementor plugin
  • Make sure the Cloudinary plugin still works, and doesn't expect Elementor to be enabled

[aatanasov-cloudinary]

Hi @gabriel-detassigny, I tested the PR on my side by adding a background image to a container element, and the local URL is used. The heading element works.

Back-end

Front-end

I confirm the replace_background_images_in_css hook was triggered on save (added a log to test it).

[gabrielcld2]

Thanks @aatanasov-cloudinary ! It turns out, the container elements used a slight different syntax for its keys (heading and such use _background_image while the container types use background_image).

Furthermore, the container applies an extra suffix internally which I couldn't retrieve directly via Elementor's internals, so I've applied it directly in that case. This fixes the issue now.

I've also added some extra defensive code to check all Elementor methods interactions, as we can't be certain these methods will still exist in future versions.
Another option would be to use

try {
 // internal method calls.
}
catch ( \Throwable $e ) {
}

however Throwable isn't available in PHP 5.6 so perhaps this would be a good future improvement once we drop PHP 5.6 support.

Anyway, have a look and let me know your thoughts!

[aatanasov-cloudinary]

@gabriel-detassigny, thanks, when adding a background image to a container, I can see we have the following in the CSS:

Can you please check if we can optimize this as well (both selectors use background images delivered by Cloudinary)?

Also, it will be helpful to look into the background overlay case. It uses ::before:

Front-end

CMS