How do I add an image to a text block widget?

First you will need to create a text block widget for the page node, then following these steps:

• Select the tree icon located next to the anchor and table icon

• You can now browse through the media and select your image or choose to upload a image from your desktop

• You will now need to click on the button "Insert"
• Once you have inserted your image you will need to update the html so that it is optimised for mobile's and tablets

• Once in the html locate your image the string will look something like "<img src="/media/371041/why-choose-us.jpg" alt="Why -choose -us" title="Why -choose -us" width="500" height="360" rel="817,588" />"
• You will need to change this line and add class="img-responsive" and ?width=xxx and set the width to 100% at the end of the image url, this will ensure the optimised image is displayed and that it will adapt to any screensize.
• The string will now look something like this. "<img class="img-responsive" src="/media/371041/why-choose-us.jpg?width=370" alt="Why -choose -us" title="Why -choose -us" width="100%"  />"

IMPORTANT

To ensure that your site remains well optimised and Google mobile friendly, it is ESSENTIAL that you always optimise and compress your images before you upload them to the I-Pro CMS.

We recommend using the following programs:

Windows

PixResizer

This tool will easily scale your images down to the recommended 1920 x 1080, any images smaller than this will be skipped.  Please read the instructions carefully to ensure you resize the images correctly.

download: http://pixresizer.en.softonic.com/

File Optimiser

Once you have resized your images, you will need to run them through this tool which will remove any unrequired content i.e. date time, camera model, location, etc..

download: http://sourceforge.net/projects/nikkhokkho/files/latest/download?source=files

Mac Only

Image Size Reducer

This tool will easily scale your images down to the recommended 1920 x 1080, any images smaller than this will be skipped.  Please read the instructions carefully to ensure you resize the images correctly.

Available from the App Store

ImageOptim

Once you have resized your images, you will need to run them through this tool which will remove any unrequired content i.e. date time, camera model, location, etc..

download: https://imageoptim.com/

Please ensure you test your webpage here, this will ensure the mobile aspect is correct - https://www.google.co.uk/webmasters/tools/mobile-friendly/