Documentation

Below you will find documentation on how to use our software. This contains easy-to-use steps by step guides with helpful screenshots on how to configure and get the best results.
 

Categories

Troubleshooting - Image height & width

By default the editor and media manager does not insert height and width values for its images and will insert something like this:

<img alt="" id="" src="/files/images/myimage.jpg " style="" title="" />

This was decided so that the height and width wouldn’t conflict with other 3rd party plugins which could be doing some sort of transformation to the image such as thumbnails etc… however; there are quite a few customizable options within the editor for which you can add a height, width and style attribute.

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 is 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.

<img alt="" id="" src="/files/images/modules/table.jpg" style="" title="" width="640" />

Please see video for a demo on 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:

<img alt="" id="" src="/files/images/modules/table.jpg" style="" title="" height="300" width="500" /> 

This is done in many popular browsers (IE, FF etc.…) except for those using Webkit. So if you use Google Chrome will notice that the image resize handlers are not present. We have a plugin that mimics how Firefox works to make up for the lack of support in Webkit-based browsers, to add this back you can download this plugin: http://arkextensions.com/downloads/ark-editor/plug-ins#document-webkit-drag-and-resize-v1-0.

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.

<img alt="" id="" src="/files/images/modules/usb.jpg" title="" style="width:100%;" /> 

Adding a default style attribute

The editor will also allow you to default globle 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:

<img alt="" id="" src="/files/images/modules/usb.jpg" title="" style="width:200px;" />

To learn more about this please see: http://arkextensions.com/documentation/ark-media-manager/207-adding-a-default-class-and-style-to-your-image

WebxSolution Ltd is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Copyright © 2009 - 2016 WebxSolution Ltd
Powered by JoomlaWired