Change effect sizes to percentages

aatanasovdev · aatanasovdev · commit 5cf7742f4d05 · 2026-01-13T16:57:35.000+02:00
diff --git a/css/cloudinary.css b/css/cloudinary.css
diff --git a/css/gallery-block-rtl.css b/css/gallery-block-rtl.css
diff --git a/js/asset-edit.js b/js/asset-edit.js
diff --git a/js/block-editor.asset.php b/js/block-editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '867e95d4689ee58793fd');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '2e87b6c0edeaf6d6d76d');
diff --git a/js/deactivate.asset.php b/js/deactivate.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '4d933d9f3b17a0fbc78f');
+<?php return array('dependencies' => array(), 'version' => '7696f646fa350b4c84b0');
diff --git a/js/gallery-block-rtl.css b/js/gallery-block-rtl.css
diff --git a/js/gallery-block.asset.php b/js/gallery-block.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '1f5b975cfd156d6dfc62');
+<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'ae052717d7e9a2152053');
diff --git a/js/gallery-init.asset.php b/js/gallery-init.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '01b33b170383c3d6686f');
+<?php return array('dependencies' => array(), 'version' => '746e6463d7d00962313d');
diff --git a/js/gallery.asset.php b/js/gallery.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '93744905b70af2dc0acf');
+<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '9e0150f2ff879537c7a4');
diff --git a/js/inline-loader.asset.php b/js/inline-loader.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '2814799d655f563dcef8');
+<?php return array('dependencies' => array(), 'version' => 'cf5151a7ad11b7ffbac7');
diff --git a/js/lazy-load.asset.php b/js/lazy-load.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'ded1dd3da3fe93cb64da');
+<?php return array('dependencies' => array(), 'version' => 'a02501fbf242ef262153');
diff --git a/js/media-modal.asset.php b/js/media-modal.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '59716783f9d651f0f36d');
+<?php return array('dependencies' => array(), 'version' => 'b622cb8e11fc8449ba7a');
diff --git a/js/terms-order.asset.php b/js/terms-order.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'ffe02166b3310a28c013');
+<?php return array('dependencies' => array(), 'version' => '652a7d471c363fcb3ffb');
diff --git a/js/video-init.asset.php b/js/video-init.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '365b9233b0220547b0d5');
+<?php return array('dependencies' => array(), 'version' => 'd6d2d0466119a6a1f919');
diff --git a/src/css/components/_edit_overlay.scss b/src/css/components/_edit_overlay.scss
@@ -51,6 +51,12 @@
 	&-offset {
 		margin-bottom: 20px;
 
+		.suffixed {
+			width: 80%;
+			position: relative;
+			top: 5px;
+		}
+
 		.cld-input-text {
 			margin-bottom: 10px;
 		}
diff --git a/src/js/asset-edit.js b/src/js/asset-edit.js
@@ -85,7 +85,7 @@ const AssetEdit = {
 		this.imageOverlayMap = [
 			{ key: 'imageId', input: this.imageOverlayImageIdInput, defaultValue: '', event: 'input' },
 			{ key: 'publicId', input: this.imageOverlayPublicIdInput, defaultValue: '', event: 'input' },
-			{ key: 'size', input: this.imageOverlaySizeInput, defaultValue: 100, event: 'input' },
+			{ key: 'size', input: this.imageOverlaySizeInput, defaultValue: 20, event: 'input' },
 			{ key: 'opacity', input: this.imageOverlayOpacityInput, defaultValue: 20, event: 'input' },
 			{ key: 'position', input: this.imageOverlayPositionInput, defaultValue: '', event: 'change' },
 			{ key: 'xOffset', input: this.imageOverlayXOffsetInput, defaultValue: 0, event: 'input' },
@@ -376,6 +376,7 @@ const AssetEdit = {
 		this.textOverlayMap.forEach(({ input, defaultValue }) => {
 			if (input) {
 				input.value = defaultValue;
+				input.dispatchEvent(new Event('change'));
 			}
 		});
 
@@ -393,6 +394,7 @@ const AssetEdit = {
 		this.imageOverlayMap.forEach(({ input, defaultValue }) => {
 			if (input) {
 				input.value = defaultValue;
+				input.dispatchEvent(new Event('change'));
 			}
 		});
 
@@ -411,6 +413,10 @@ const AssetEdit = {
 		// Update preview to remove image overlay
 		this.preview.setSrc(this.buildSrc());
 	},
+	getFormattedPercentageValue( value ) {
+		const val = value / 100;
+		return val % 1 === 0 ? val.toFixed(1) : val;
+	},
 	buildPlacementQualifiers(positionInput, xOffsetInput, yOffsetInput) {
 		let placementQualifiers = [];
 
@@ -419,11 +425,11 @@ const AssetEdit = {
 		}
 
 		if (xOffsetInput?.value) {
-			placementQualifiers.push(`x_${xOffsetInput.value}`);
+			placementQualifiers.push(`x_${this.getFormattedPercentageValue(xOffsetInput.value)}`);
 		}
 
 		if (yOffsetInput?.value) {
-			placementQualifiers.push(`y_${yOffsetInput.value}`);
+			placementQualifiers.push(`y_${this.getFormattedPercentageValue(yOffsetInput.value)}`);
 		}
 
 		return placementQualifiers.length > 0 ? ',' + placementQualifiers.join(',') : '';
@@ -440,7 +446,7 @@ const AssetEdit = {
 		let transformations = [];
 
 		if (this.imageOverlaySizeInput?.value) {
-			transformations.push(`c_scale,w_${this.imageOverlaySizeInput.value}`);
+			transformations.push(`c_scale,w_${this.getFormattedPercentageValue(this.imageOverlaySizeInput.value)}`);
 		}
 
 		if (this.imageOverlayOpacityInput?.value) {
@@ -457,7 +463,7 @@ const AssetEdit = {
 			this.imageOverlayYOffsetInput
 		);
 
-		return `${imageLayerDefinition}/fl_layer_apply${placementString}`;
+		return `${imageLayerDefinition}/c_limit,w_1.0,fl_relative/fl_layer_apply${placementString}`;
 	},
 	buildTextOverlay() {
 		if (!this.textOverlayTextInput || !this.textOverlayTextInput.value.trim()) {
@@ -505,7 +511,7 @@ const AssetEdit = {
 			this.textOverlayYOffsetInput
 		);
 
-		return `${textLayerDefinition}/fl_layer_apply${placementString}`;
+		return `${textLayerDefinition}/c_limit,w_0.9,fl_relative/fl_layer_apply${placementString}`;
 	},
 	buildSrc() {
 		const transformations = this.transformationsInput.value;
@@ -591,11 +597,13 @@ const AssetEdit = {
 		map.forEach(({ key, input, defaultValue }) => {
 			if (input) {
 				input.value = (data && data[key] !== undefined) ? data[key] : defaultValue;
+				input.dispatchEvent(new Event('change'));
 
 				// Special handling for color input to initialize color picker
 				if (key === 'color' && input.value) {
 					jQuery(this.textOverlayColorInput).iris({ color: input.value });
 				}
+
 				if (key === 'imageId' && input.value) {
 					this.fetchImageById(input.value).then(attachment => {
 						AssetEdit.renderImageOverlay(attachment);
diff --git a/ui-definitions/settings-pages.php b/ui-definitions/settings-pages.php
@@ -615,7 +615,7 @@
 				array(
 					'type'        => 'panel',
 					'collapsible' => 'open',
-					'title'       => __( 'Text Overlay', 'cloudinary' ),
+					'title'       => __( 'Text overlay', 'cloudinary' ),
 					array(
 						'type' => 'row',
 						array(
@@ -719,14 +719,24 @@
 								'title'   => __( 'X Offset', 'cloudinary' ),
 								'default' => 0,
 								'slug'    => 'text_overlay_x_offset',
-								'suffix'  => 'px',
+								'suffix'  => '%',
+								'attributes' => array(
+									'max' => 100,
+									'min' => -100,
+									'step'  => 1,
+								),
 							),
 							array(
 								'type'    => 'number',
 								'title'   => __( 'Y Offset', 'cloudinary' ),
 								'default' => 0,
 								'slug'    => 'text_overlay_y_offset',
-								'suffix'  => 'px',
+								'suffix'  => '%',
+								'attributes' => array(
+									'max' => 100,
+									'min' => -100,
+									'step'  => 1,
+								),
 							),
 						),
 					),
@@ -764,7 +774,7 @@
 				array(
 					'type'        => 'panel',
 					'collapsible' => 'open',
-					'title'       => __( 'Image Overlay', 'cloudinary' ),
+					'title'       => __( 'Image overlay', 'cloudinary' ),
 					array(
 						'type' => 'row',
 						array(
@@ -837,11 +847,13 @@
 							array(
 								'type'       => 'text',
 								'title'      => __( 'Size', 'cloudinary' ),
-								'default'    => 100,
+								'default'    => 20,
 								'slug'       => 'image_overlay_size',
+								'suffix'     => '@value %',
 								'attributes' => array(
-									'min'   => 0,
-									'max'   => 1000,
+									'min'   => 1,
+									'max'   => 100,
+									'step'  => 1,
 									'type'  => 'range',
 									'class' => array(
 										'edit-overlay-range-input',
@@ -853,9 +865,11 @@
 								'title'      => __( 'Opacity', 'cloudinary' ),
 								'default'    => 20,
 								'slug'       => 'image_overlay_opacity',
+								'suffix'     => '@value %',
 								'attributes' => array(
-									'min'   => 0,
+									'min'   => 1,
 									'max'   => 100,
+									'step'  => 1,
 									'type'  => 'range',
 									'class' => array(
 										'edit-overlay-range-input',
@@ -898,14 +912,24 @@
 								'title'   => __( 'X Offset', 'cloudinary' ),
 								'default' => 0,
 								'slug'    => 'image_overlay_x_offset',
-								'suffix'  => 'px',
+								'suffix'  => '%',
+								'attributes' => array(
+									'max' => 100,
+									'min' => -100,
+									'step'  => 1,
+								),
 							),
 							array(
 								'type'    => 'number',
 								'title'   => __( 'Y Offset', 'cloudinary' ),
 								'default' => 0,
 								'slug'    => 'image_overlay_y_offset',
-								'suffix'  => 'px',
+								'suffix'  => '%',
+								'attributes' => array(
+									'max' => 100,
+									'min' => -100,
+									'step'  => 1,
+								),
 							),
 						),
 					),

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '867e95d4689ee58793fd');`
	`1`	`+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '2e87b6c0edeaf6d6d76d');`