diff --git a/assets/css/src/components/newsletterEditor/components/_resize.scss b/assets/css/src/components/newsletterEditor/components/_resize.scss
index 94ef1b2117..957f2ab61d 100644
--- a/assets/css/src/components/newsletterEditor/components/_resize.scss
+++ b/assets/css/src/components/newsletterEditor/components/_resize.scss
@@ -60,6 +60,12 @@ $resize-handle-z-index: 2;
width: 24px;
}
+.mailpoet_image_resize_handle_container_left {
+ left: 0;
+ right: auto;
+ transform: rotate(90deg);
+}
+
.mailpoet_image_resize_handle {
background: $editor-content-color;
border-radius: 6px 0 0;
@@ -78,6 +84,10 @@ $resize-handle-z-index: 2;
.mailpoet_image_resize_handle_icon {
pointer-events: none;
}
+
+ .mailpoet_image_resize_handle_container_left & {
+ cursor: nesw-resize;
+ }
}
.mailpoet_image_resize_handle_icon {
diff --git a/assets/js/src/newsletter_editor/blocks/image.js b/assets/js/src/newsletter_editor/blocks/image.js
index fdc0f4e3da..cf44715d6e 100644
--- a/assets/js/src/newsletter_editor/blocks/image.js
+++ b/assets/js/src/newsletter_editor/blocks/image.js
@@ -46,9 +46,14 @@ Module.ImageBlockView = base.BlockView.extend({
elementSelector: '.mailpoet_image',
resizeHandleSelector: '.mailpoet_image_resize_handle',
onResize: function (event) {
+ var alignment = this.view.model.get('styles.block.textAlign');
var corner = this.$('.mailpoet_image').offset();
- var width = event.pageX - corner.left;
- this.view.model.set('width', width + 'px');
+ var currentWidth = this.$('.mailpoet_image').width();
+ var newWidth = event.pageX - corner.left;
+ if (alignment === 'right') {
+ newWidth = currentWidth + corner.left - event.pageX;
+ }
+ this.view.model.set('width', newWidth + 'px');
},
},
ShowSettingsBehavior: {
diff --git a/views/newsletter/templates/blocks/image/block.hbs b/views/newsletter/templates/blocks/image/block.hbs
index 079ea6b31b..574e38d981 100644
--- a/views/newsletter/templates/blocks/image/block.hbs
+++ b/views/newsletter/templates/blocks/image/block.hbs
@@ -4,7 +4,7 @@
-