Skip to content

Commit f753f1b

Browse files
aatanasov-cloudinaryaatanasov-cloudinary
authored
Merge pull request #1117 from cloudinary/fix/effects-order
Change the Image and Text Overlay Transformations From Pixels to Percentages
2 parents bf4ed2f + 2fc1b8f commit f753f1b

File tree

5 files changed

+56
-18
lines changed

5 files changed

+56
-18
lines changed

‎css/cloudinary.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/asset-edit.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/components/_edit_overlay.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@
5151
&-offset {
5252
margin-bottom: 20px;
5353

54+
.suffixed {
55+
width: 80%;
56+
position: relative;
57+
top: 5px;
58+
}
59+
5460
.cld-input-text {
5561
margin-bottom: 10px;
5662
}

‎src/js/asset-edit.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const AssetEdit = {
8585
this.imageOverlayMap = [
8686
{ key: 'imageId', input: this.imageOverlayImageIdInput, defaultValue: '', event: 'input' },
8787
{ key: 'publicId', input: this.imageOverlayPublicIdInput, defaultValue: '', event: 'input' },
88-
{ key: 'size', input: this.imageOverlaySizeInput, defaultValue: 100, event: 'input' },
88+
{ key: 'size', input: this.imageOverlaySizeInput, defaultValue: 20, event: 'input' },
8989
{ key: 'opacity', input: this.imageOverlayOpacityInput, defaultValue: 20, event: 'input' },
9090
{ key: 'position', input: this.imageOverlayPositionInput, defaultValue: '', event: 'change' },
9191
{ key: 'xOffset', input: this.imageOverlayXOffsetInput, defaultValue: 0, event: 'input' },
@@ -376,6 +376,7 @@ const AssetEdit = {
376376
this.textOverlayMap.forEach(({ input, defaultValue }) => {
377377
if (input) {
378378
input.value = defaultValue;
379+
input.dispatchEvent(new Event('change'));
379380
}
380381
});
381382

@@ -393,6 +394,7 @@ const AssetEdit = {
393394
this.imageOverlayMap.forEach(({ input, defaultValue }) => {
394395
if (input) {
395396
input.value = defaultValue;
397+
input.dispatchEvent(new Event('change'));
396398
}
397399
});
398400

@@ -411,6 +413,10 @@ const AssetEdit = {
411413
// Update preview to remove image overlay
412414
this.preview.setSrc(this.buildSrc());
413415
},
416+
getFormattedPercentageValue( value ) {
417+
const val = value / 100;
418+
return val % 1 === 0 ? val.toFixed(1) : val;
419+
},
414420
buildPlacementQualifiers(positionInput, xOffsetInput, yOffsetInput) {
415421
let placementQualifiers = [];
416422

@@ -419,11 +425,11 @@ const AssetEdit = {
419425
}
420426

421427
if (xOffsetInput?.value) {
422-
placementQualifiers.push(`x_${xOffsetInput.value}`);
428+
placementQualifiers.push(`x_${this.getFormattedPercentageValue(xOffsetInput.value)}`);
423429
}
424430

425431
if (yOffsetInput?.value) {
426-
placementQualifiers.push(`y_${yOffsetInput.value}`);
432+
placementQualifiers.push(`y_${this.getFormattedPercentageValue(yOffsetInput.value)}`);
427433
}
428434

429435
return placementQualifiers.length > 0 ? ',' + placementQualifiers.join(',') : '';
@@ -440,7 +446,7 @@ const AssetEdit = {
440446
let transformations = [];
441447

442448
if (this.imageOverlaySizeInput?.value) {
443-
transformations.push(`c_scale,w_${this.imageOverlaySizeInput.value}`);
449+
transformations.push(`c_scale,w_${this.getFormattedPercentageValue(this.imageOverlaySizeInput.value)}`);
444450
}
445451

446452
if (this.imageOverlayOpacityInput?.value) {
@@ -457,7 +463,7 @@ const AssetEdit = {
457463
this.imageOverlayYOffsetInput
458464
);
459465

460-
return `${imageLayerDefinition}/fl_layer_apply${placementString}`;
466+
return `${imageLayerDefinition}/c_limit,w_1.0,fl_relative/fl_layer_apply${placementString}`;
461467
},
462468
buildTextOverlay() {
463469
if (!this.textOverlayTextInput || !this.textOverlayTextInput.value.trim()) {
@@ -505,7 +511,7 @@ const AssetEdit = {
505511
this.textOverlayYOffsetInput
506512
);
507513

508-
return `${textLayerDefinition}/fl_layer_apply${placementString}`;
514+
return `${textLayerDefinition}/c_limit,w_0.9,fl_relative/fl_layer_apply${placementString}`;
509515
},
510516
buildSrc() {
511517
const transformations = this.transformationsInput.value;
@@ -591,11 +597,13 @@ const AssetEdit = {
591597
map.forEach(({ key, input, defaultValue }) => {
592598
if (input) {
593599
input.value = (data && data[key] !== undefined) ? data[key] : defaultValue;
600+
input.dispatchEvent(new Event('change'));
594601

595602
// Special handling for color input to initialize color picker
596603
if (key === 'color' && input.value) {
597604
jQuery(this.textOverlayColorInput).iris({ color: input.value });
598605
}
606+
599607
if (key === 'imageId' && input.value) {
600608
this.fetchImageById(input.value).then(attachment => {
601609
AssetEdit.renderImageOverlay(attachment);

‎ui-definitions/settings-pages.php‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -615,7 +615,7 @@
615615
array(
616616
'type' => 'panel',
617617
'collapsible' => 'open',
618-
'title' => __( 'Text Overlay', 'cloudinary' ),
618+
'title' => __( 'Text overlay', 'cloudinary' ),
619619
array(
620620
'type' => 'row',
621621
array(
@@ -719,14 +719,24 @@
719719
'title' => __( 'X Offset', 'cloudinary' ),
720720
'default' => 0,
721721
'slug' => 'text_overlay_x_offset',
722-
'suffix' => 'px',
722+
'suffix' => '%',
723+
'attributes' => array(
724+
'max' => 100,
725+
'min' => -100,
726+
'step' => 1,
727+
),
723728
),
724729
array(
725730
'type' => 'number',
726731
'title' => __( 'Y Offset', 'cloudinary' ),
727732
'default' => 0,
728733
'slug' => 'text_overlay_y_offset',
729-
'suffix' => 'px',
734+
'suffix' => '%',
735+
'attributes' => array(
736+
'max' => 100,
737+
'min' => -100,
738+
'step' => 1,
739+
),
730740
),
731741
),
732742
),
@@ -764,7 +774,7 @@
764774
array(
765775
'type' => 'panel',
766776
'collapsible' => 'open',
767-
'title' => __( 'Image Overlay', 'cloudinary' ),
777+
'title' => __( 'Image overlay', 'cloudinary' ),
768778
array(
769779
'type' => 'row',
770780
array(
@@ -837,11 +847,13 @@
837847
array(
838848
'type' => 'text',
839849
'title' => __( 'Size', 'cloudinary' ),
840-
'default' => 100,
850+
'default' => 20,
841851
'slug' => 'image_overlay_size',
852+
'suffix' => '@value %',
842853
'attributes' => array(
843-
'min' => 0,
844-
'max' => 1000,
854+
'min' => 1,
855+
'max' => 100,
856+
'step' => 1,
845857
'type' => 'range',
846858
'class' => array(
847859
'edit-overlay-range-input',
@@ -853,9 +865,11 @@
853865
'title' => __( 'Opacity', 'cloudinary' ),
854866
'default' => 20,
855867
'slug' => 'image_overlay_opacity',
868+
'suffix' => '@value %',
856869
'attributes' => array(
857-
'min' => 0,
870+
'min' => 1,
858871
'max' => 100,
872+
'step' => 1,
859873
'type' => 'range',
860874
'class' => array(
861875
'edit-overlay-range-input',
@@ -898,14 +912,24 @@
898912
'title' => __( 'X Offset', 'cloudinary' ),
899913
'default' => 0,
900914
'slug' => 'image_overlay_x_offset',
901-
'suffix' => 'px',
915+
'suffix' => '%',
916+
'attributes' => array(
917+
'max' => 100,
918+
'min' => -100,
919+
'step' => 1,
920+
),
902921
),
903922
array(
904923
'type' => 'number',
905924
'title' => __( 'Y Offset', 'cloudinary' ),
906925
'default' => 0,
907926
'slug' => 'image_overlay_y_offset',
908-
'suffix' => 'px',
927+
'suffix' => '%',
928+
'attributes' => array(
929+
'max' => 100,
930+
'min' => -100,
931+
'step' => 1,
932+
),
909933
),
910934
),
911935
),

0 commit comments

Comments
 (0)