From 9af5554e1d182b8ac1dca4a9eaf622d1fc85dace Mon Sep 17 00:00:00 2001 From: mxkae Date: Tue, 19 Nov 2024 23:29:36 +0800 Subject: [PATCH 1/3] fix blurry dynamic content images --- .config/webpack.config.dev.js | 1 + .config/webpack.config.prod.js | 1 + plugin.php | 1 + .../image/image-optimizer-polyfill.js | 37 +++++++++++++++++++ src/block-components/image/index.php | 27 ++++++++++++++ 5 files changed, 67 insertions(+) create mode 100644 src/block-components/image/image-optimizer-polyfill.js create mode 100644 src/block-components/image/index.php diff --git a/.config/webpack.config.dev.js b/.config/webpack.config.dev.js index df5aec2f1..ce82a4977 100644 --- a/.config/webpack.config.dev.js +++ b/.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: { diff --git a/.config/webpack.config.prod.js b/.config/webpack.config.prod.js index b21ea2f0f..c558abd25 100644 --- a/.config/webpack.config.prod.js +++ b/.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: { diff --git a/plugin.php b/plugin.php index 3e8cae54c..50e49cf9e 100644 --- a/plugin.php +++ b/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' ); } /** diff --git a/src/block-components/image/image-optimizer-polyfill.js b/src/block-components/image/image-optimizer-polyfill.js new file mode 100644 index 000000000..07ab2045d --- /dev/null +++ b/src/block-components/image/image-optimizer-polyfill.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import domReady from '@wordpress/dom-ready' + +class ImageOptimizerPolyfill { + 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 ) diff --git a/src/block-components/image/index.php b/src/block-components/image/index.php new file mode 100644 index 000000000..feb87c56a --- /dev/null +++ b/src/block-components/image/index.php @@ -0,0 +1,27 @@ + Date: Thu, 28 Nov 2024 12:04:27 +0800 Subject: [PATCH 2/3] load when plugin is active, add comments --- src/block-components/image/image-optimizer-polyfill.js | 5 +++++ src/block-components/image/index.php | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/block-components/image/image-optimizer-polyfill.js b/src/block-components/image/image-optimizer-polyfill.js index 07ab2045d..2c6862bb0 100644 --- a/src/block-components/image/image-optimizer-polyfill.js +++ b/src/block-components/image/image-optimizer-polyfill.js @@ -4,6 +4,11 @@ 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 => { diff --git a/src/block-components/image/index.php b/src/block-components/image/index.php index feb87c56a..312065fe4 100644 --- a/src/block-components/image/index.php +++ b/src/block-components/image/index.php @@ -7,6 +7,8 @@ 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', @@ -21,7 +23,8 @@ function stackable_load_image_optimizer_polyfill_frontend_script( $block_content } } - if ( ! is_admin() ) { + if ( ! is_admin() && is_plugin_active( 'ewww-image-optimizer/ewww-image-optimizer.php' )) { + // 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 ); } } From 2f99f7ac864a9b1fff429dac35e33a6f8923484c Mon Sep 17 00:00:00 2001 From: mxkae Date: Thu, 28 Nov 2024 13:26:17 +0800 Subject: [PATCH 3/3] use constant to check if plugin is active --- src/block-components/image/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/block-components/image/index.php b/src/block-components/image/index.php index 312065fe4..05a02f705 100644 --- a/src/block-components/image/index.php +++ b/src/block-components/image/index.php @@ -23,7 +23,7 @@ function stackable_load_image_optimizer_polyfill_frontend_script( $block_content } } - if ( ! is_admin() && is_plugin_active( 'ewww-image-optimizer/ewww-image-optimizer.php' )) { + 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 ); }