How to Add Images
Please note: this article is only applicable to websites built after November 2018.
This article will show you how to upload, position, resize and crop an image.
In this article:
- Dos and Don’ts
- Common Problems/Mistakes
- Common Questions/FAQs
- Related Articles/See Also
Image Display Width
The image width will adjust dynamically depending on how many widgets you have in the row:
- 1 widget: the image will display across the width the page
- 2 widgets: the image will display across the width of 1 widget (1/2 of the page)
- 3 widgets: the image will display across the width of 1 widget (1/3 of the page)
- Identify where you want the image to appear.
- If necessary add a row (this article explains widgets and rows).
- Click on the + button to add a new widget
- Click on Image widget
- Once you click on the image widget it will be added to the row. Hover over the widget area, you will see an outline of the widget you have just added. Click on EDIT to open the image editor.
- Note: It does not show unless you hover over it.
- Select an icon for your image widget (optional)
- Select a title for your image widget (optional)
- Scroll down and click UPLOAD IMAGE
- Click on CHOOSE IMAGE
- Once you have chosen your image you can select the area you wish to crop.
- Important: The USE RECOMMENDED SIZE option will lock the aspect ratio of the cropping selector so the size of the selected image matches the area of the widget. I.e. if it is a single widget across the entire width then the aspect ratio of the cropping tool will only allow wider images. If you want to crop the image to any desired size then you can toggle custom cropping by clicking on USE RECOMMENDED SIZE.
- Click SAVE
- Add a link to the image (optional but often useful)
- Click "MAKE THIS WIDGET VISIBLE" to ensure the widget shows.
- Click SAVE to save all the changes
Dos and Don’ts
- Always ensure you have permission to use the image.
- Try and choose photos that have the right orientation.
- Keep staff images consistent with a plain background.
- Download an image from Google (or any other search engine) and upload it your site.
- NEVER use characters from films (i.e. for children's leaflets).
- Don’t upload a scanned image - the quality will be very poor.
My widget is not showing when I leave the editor.
Make sure that the "Make this widget visible?" checkbox is ticked in the properties for that widget.
I can’t crop my image to the correct size.
Ensure USE RECOMMENDED SIZE is not checked.
Related links/See Also
image, upload, add, crop, graphic, picture