Uploading images to the text area

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


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.

Related pages...

INDEX OF HELP PAGES

more Here is an index of the help pages that are available. Click on a link to go to a particular help page.

Read why a new style template has been introduced and what it involves

Why a new template?

more Here are the answers to questions you may be asking yourself regarding the new template

Tutorials and Videos ..

more Here are some links to videos and tutorials to help the club webmaster

Using tables in the text area

more Using tables in your website text area can be challenging. Here are some guidelines.

Setting your homepage style

more Guidance on homepage style settings

Avoiding squashed images on smaller screens

more Guidance on how to avoid images looking squashed on smaller screens

Uploading Photos for the Carousel

more Guidance for uploading photos for the carousel and slideshows

The 'Carousel' homepage display

more Questions relating to the Carousel on the home page

Other features of the Template

more Questions and advice relating to some of the other features of the template.

The 'Thumbnail' homepage display

more Questions relating to the static homepage thumbnail display

The 'what we do' pages

more Questions and advice relating to the "What We Do" pages.

Photo Galleries

more Questions and advice relating to photo galleries

back to page above this...

HELP PAGES

back Use the help pages to make the most of the new club website template .