Allow Alloy Editor to set one dimension when resizing an image

[blzaugg]

From: https://issues.liferay.com/browse/LPS-68536

User Story:

As a developer, integrating Alloy Editor, I'd like a configuration option, to allow me to set image dimensions with width|height|both.

This would allow me better control, in how image scaling behaves in the resulting output. Without resorting to !important overrides.

Background:

See discussion: https://in.liferay.com/web/support/forums/-/message_boards/message/25343702

When resizing an image's height or width or both, height and width dimensions are set as inline styles on the image element.

When the resulting output image is displayed in a container smaller than the set static width, the image breaks out of the container.

This is typically fixed by setting max-width: 100% on the image, forcing it to resize.

An issue arises, that because height is set, the original ratio is not kept, causing the image to squish.

To further fix this, height must to set to auto, to allow the original ratio to remain intact. But because height as be set as an inline style, !important must be used to override the inline height.

[blzaugg]

Possible solution, minus config option setup:

I'm pretty sure the code, that would need to change, would be:

https://github.com/liferay/alloy-editor/blob/master/src/plugins/dragresize.js#L428-L431

    function resizeElement(el, width, height) {
        el.style.width = String(width) + 'px';
        el.style.height = String(height) + 'px';
    }

I may be simplifying this, but I believe all it would take is to check for some config value: 

    function resizeElement(el, width, height) {
        if (config.resize === 'both') {
            el.style.width = String(width) + 'px';
            el.style.height = String(height) + 'px';
        }
        else if (config.resize === 'width') {
            el.style.width = String(width) + 'px';
        }
        else if (config.resize === 'height') {
            el.style.height = String(height) + 'px';
        }
    }

[ipeychev]

Thanks for opening this issue. @jbalsas, could you please take a look?

[jbalsas]

Yes, we'll take a look at this.

Right now, however, it would have lower priority than creating some small, medium and full-width buttons to simplify setting sizes to images.

I'm also concerned about how different handles should behave (maybe some of them shouldn't even appear) with the different settings for this.