Fix (Dynamic Content): prevent blurry images when using image optimizer (#3369)

* fix blurry dynamic content images

* load when plugin is active, add comments

* use constant to check if plugin is active

Author: kaeizen

.config/webpack.config.dev.js

@@ -181,6 +181,7 @@ module.exports = [
 		'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
 		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 		'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ),
+		'frontend_image_optimizer_polyfill': path.resolve( __dirname, '../src/block-components/image/image-optimizer-polyfill.js' ),
 	},
 
 	output: {

.config/webpack.config.prod.js

@@ -166,6 +166,7 @@ module.exports = [
 		'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
 		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 		'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ),
+		'frontend_image_optimizer_polyfill': path.resolve( __dirname, '../src/block-components/image/image-optimizer-polyfill.js' ),
 	},
 
 	output: {

plugin.php

@@ -252,6 +252,7 @@ function is_frontend() {
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/columns/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/timeline/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/icon-label/deprecated.php' );
+	require_once( plugin_dir_path( __FILE__ ) . 'src/block-components/image/index.php' );
 }
 
 /**

src/block-components/image/image-optimizer-polyfill.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready'
+
+class ImageOptimizerPolyfill {
+	/**
+	 * This script is loaded when EWWW Image Optimizer plugin is activated
+	 * If Easy IO setting is activated for EWWW Image Optimizer plugin, dynamic images becomes blurry.
+	 * This script fixes the issue by removing the &fit parameter from the srcset and src attributes
+	 */
+	init = () => {
+		const imgs = document.querySelectorAll( '.stk-block img' )
+		imgs.forEach( img => {
+			if ( img.hasAttribute( 'srcset' ) ) {
+				let srcset = img.getAttribute( 'srcset' )
+				const pattern = /https?:\/\/[^\s,]+/g
+				const urls = srcset.match( pattern )
+
+				urls.forEach( url => {
+					const index = url.indexOf( '&fit' )
+					if ( index !== -1 ) {
+						const newUrl = url.slice( 0, index )
+						srcset = srcset.replace( url, newUrl )
+					}
+				} )
+
+				img.setAttribute( 'srcset', srcset )
+			}
+
+			if ( img.getAttribute( 'src' ).indexOf( '&fit' ) !== -1 ) {
+				const src = img.getAttribute( 'src' )
+				const index = src.indexOf( '&fit' )
+				const newSrc = src.slice( 0, index )
+				img.setAttribute( 'src', newSrc )
+			}
+		} )
+	}
+}
+
+window.ImageOptimizerPolyfill = new ImageOptimizerPolyfill()
+domReady( window.ImageOptimizerPolyfill.init )

src/block-components/image/index.php

@@ -0,0 +1,30 @@
+<?php
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! function_exists( 'stackable_load_image_optimizer_polyfill_frontend_script' ) ) {
+	function stackable_load_image_optimizer_polyfill_frontend_script( $block_content, $block ) {
+		// If Easy IO setting is activated for EWWW Image Optimizer, dynamic images becomes blurry.
+		// Load the script to fix the issue.
+		if ( ! is_admin() ) {
+			wp_enqueue_script(
+				'stk-frontend-image-optimizer-polyfill',
+				plugins_url( 'dist/frontend_image_optimizer_polyfill.js', STACKABLE_FILE ),
+				array(),
+				STACKABLE_VERSION,
+				true
+			);
+
+			// Only do this once.
+			remove_action( 'stackable/enqueue_scripts', 'stackable_load_image_optimizer_polyfill_frontend_script', 10 );
+		}
+	}
+
+	if ( ! is_admin() && defined( 'EWWW_IMAGE_OPTIMIZER_PLUGIN_FILE' )) {
+		// Load the script in the frontend if EWWW Image Optimizer is active.
+		add_action( 'stackable/enqueue_scripts', 'stackable_load_image_optimizer_polyfill_frontend_script', 10, 2 );
+	}
+}