Uploading images to the text area

How to upload images to the text area and make them 'responsive'.

Show related pages

Guidelines for adding images to the text area

Non-Technical
You should avoid uploading images to the text area if you are unfamiliar with the operation of the online file manager (sometimes referred to as KFM or Kae's File Manager). Instead, consider displaying images in a page slideshow or as a main pic to be used in the home page carousel. This alternative is easier to achieve and is a very effective way to display on portable devices. 

Experienced Webmasters
Here are some guidelines for the webmaster who is confident using the online file manager to upload and embed images in the text area.

Upload the image at the size you wish to display it. Do not attempt to resize it after uploading. To decide the correct display size, consider the full width of the text area to be 670 pixels wide. Choose your image size according to what proportion of the width you want it to occupy, bearing in mind whether you wish text to flow round it.

After uploading, make the image 'responsive' by removing the 'width' and 'height' settings from the image properties box before updating the page. 

Tip: Images displayed at less than 266 pixels wide will appear without distortion on small screens even if they are not made responsive. 

Tip: Do not upload images wider than 710 pixels as they exceed the width of the online editor.

Geeks
When images are uploaded using the file manager the default HTML code created is for a fixed width display. You will then eed to make the image responsive by removing the width and height display constraints. However, when these constraints are removed the image will display at the size at which it was uploaded. This may not be what you want, in which case you will need to resize the image. If you are using the online file manager resizing facility, be aware that, after resizing, the original width and height values will be temporarily retained in memory and can unexpectedly reappear in the code and the image properties box. You will need to clear these values again before updating the page. Always check that your changes have been  applied as intended.