By default, the editor does not insert height and width values for images. This is to avoid conflicts with third-party plugins that may transform the image, such as thumbnails. However, the editor does offer customizable options to add height, width, and style attributes.
Auto image resize
The editor has an auto image resizer which you can turn on by going to Components > Ark Editor > Control Panel > and click on the ‘Options’ tab. Next, you can select the Media tab, and here you will find parameters to turn on Image resizing. This is especially useful if you plan on drag and drop uploading your images which are supported by our editor.
Depending upon your preference you can set the resize type but by default, this is set to resize by the image width only. Along with resizing the physical image, the plugin will also add a ‘width’ or ‘height’ attribute to the code as well. This is done so that the resized image is reinforced otherwise, the image may not appear to change due to caching. This is especially important when editing inline, as the change must happen instantly as the browsers cannot be refreshed.
width="640" />
Please see the video for a demo of how this works: https://youtu.be/dZLYPajVc5Q
Browser-side Image resize handlers
The height and width values can happen on the browser side with the resize handlers used to resize images in your content which looks like:
This will again add a height and width attribute, as seen below:
height="300" width="500" />
Adding a img style attribute
You can also define an image style attribute in the Media Manager. There’s a parameter called ‘Styles’ which comes with a set of classes for which you can define your own including height and width.
You can also define an image style attribute in the Media Manager. There’s a parameter called ‘Styles’, which comes with a set of classes for which you can define your own, including height and width.
style="width:100%;" />
Adding a default style attribute
The editor will also allow you to default global style attribute such as a 'width' and 'height' to your images in the Ark Manager. To do this, please go to 'Components' > select 'Ark Media Manager' > navigate to 'Options' > click on the 'Interface' tab > navigate to 'Edit' > and add a 'Default Style Attribute' and the 'Save'.
This will add a 'style' attribute, as seen below:
style="width:200px;" />