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/
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article