Handle elementor background image replacement

Author: gabriel-detassigny

php/class-plugin.php

@@ -14,6 +14,7 @@
 use Cloudinary\Delivery\Lazy_Load;
 use Cloudinary\Delivery\Responsive_Breakpoints;
 use Cloudinary\Assets as CLD_Assets;
+use Cloudinary\Integrations\Elementor;
 use Cloudinary\Integrations\WPML;
 use Cloudinary\Media\Gallery;
 use Cloudinary\Sync\Storage;
@@ -31,7 +32,7 @@ final class Plugin {
 	 *
 	 * @since   0.1
 	 *
-	 * @var     Admin|CLD_Assets|Connect|Dashboard|Deactivation|Delivery|Extensions|Gallery|Lazy_Load|Media|Meta_Box|Relate|Report|Responsive_Breakpoints|REST_API|State|Storage|SVG|Sync|URL[]|WPML|null
+	 * @var     Admin|CLD_Assets|Connect|Dashboard|Deactivation|Delivery|Extensions|Gallery|Lazy_Load|Media|Meta_Box|Relate|Report|Responsive_Breakpoints|REST_API|State|Storage|SVG|Sync|URL[]|WPML|Elementor|null
 	 */
 	public $components;
 	/**
@@ -136,6 +137,7 @@ public function plugins_loaded() {
 		$this->components['metabox']                = new Meta_Box( $this );
 		$this->components['url']                    = new URL( $this );
 		$this->components['wpml']                   = new WPML( $this );
+		$this->components['elementor']              = new Elementor( $this );
 		$this->components['special_offer']          = new Special_Offer( $this );
 	}
 

php/integrations/class-elementor.php

@@ -0,0 +1,106 @@
+<?php
+/**
+ * Elementor integration class for the Cloudinary plugin.
+ *
+ * @package Cloudinary
+ */
+
+namespace Cloudinary\Integrations;
+
+use Elementor\Core\Files\CSS\Post;
+use Elementor\Element_Base;
+use Elementor\Plugin;
+
+/**
+ * Class Elementor
+ */
+class Elementor extends Integrations {
+
+	/**
+	 * Check if the integration can be enabled.
+	 *
+	 * @return bool
+	 */
+	public function can_enable() {
+		return class_exists( 'Elementor\Plugin' );
+	}
+
+	/**
+	 * Register hooks for the integration.
+	 *
+	 * @return void
+	 */
+	public function register_hooks() {
+		add_action( 'elementor/element/parse_css', array( $this, 'replace_bg_images_in_css' ), 10, 2 );
+	}
+
+	/**
+	 * Replace all background images URLs with Cloudinary URLs, within the generated Elementor CSS file.
+	 *
+	 * @param Post         $post_css The post CSS object.
+	 * @param Element_Base $element  The Elementor element.
+	 * @return void
+	 */
+	public function replace_bg_images_in_css( $post_css, $element ) {
+		$media       = $this->plugin->get_component( 'media' );
+		$settings    = $element->get_settings_for_display();
+
+		// Define all background image related keys and their specificities.
+		$background_keys = array(
+			'_background_image'              => array(
+				'device' => 'desktop',
+				'suffix' => '',
+			),
+			'_background_hover_image'        => array(
+				'device' => 'desktop',
+				'suffix' => ':hover',
+			),
+			'_background_image_tablet'       => array(
+				'device' => 'tablet',
+				'suffix' => '',
+			),
+			'_background_hover_image_tablet' => array(
+				'device' => 'tablet',
+				'suffix' => ':hover',
+			),
+			'_background_image_mobile'       => array(
+				'device' => 'mobile',
+				'suffix' => '',
+			),
+			'_background_hover_image_mobile' => array(
+				'device' => 'mobile',
+				'suffix' => ':hover',
+			),
+		);
+
+		foreach ( $background_keys as $background_key => $background_data ) {
+			if ( ! isset( $settings[ $background_key ]['url'], $settings[ $background_key ]['id'] ) ) {
+				continue;
+			}
+
+			$original_url = $settings[ $background_key ]['url'];
+			$media_id     = $settings[ $background_key ]['id'];
+			$media_size   = isset( $settings[ $background_key ]['size'] ) ? $settings[ $background_key ]['size'] : array();
+
+			$cloudinary_url = $media->cloudinary_url( $media_id, $media_size );
+
+			// Skip if the URL is unchanged or the cloudinary URL cannot be generated somehow.
+			if ( ! $cloudinary_url || $cloudinary_url === $original_url ) {
+				continue;
+			}
+
+			// Build the CSS selector and rule.
+			$css_selector = $post_css->get_element_unique_selector( $element ) . $background_data['suffix'];
+			$css_rule     = array( 'background-image' => "url('$cloudinary_url')" );
+
+			// Retrieve the specific media query rule for non-desktop devices.
+			$media_query = null;
+			$device      = $background_data['device']; // either 'desktop', 'tablet' or 'mobile'.
+			if ( 'desktop' !== $device ) {
+				$media_query = array( 'max' => $device );
+			}
+
+			$post_css->get_stylesheet()->add_rules( $css_selector, $css_rule, $media_query );
+		}
+	}
+}