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
Styling your Images via the "Style" Option (Responsive Images)
There's a couple of options to think about when you add images and they work slightly differently. When you upload an image you'll see a section called "Style" with the following options:
Options: Image on top/right/left, circular image, default and basic.
All of them apart from basic will make the image responsive, meaning that when the device is viewed on a smaller device, the web browser will read the code and try to reduce the image as best as possible. Usually, the centre of the image is the focal point. This is common in modern web design.
If you have an image which you feel is cutting off too much of the left and right when it's viewed on a small device, what you can do is set the image style as "basic". What this does is ensure that the full image is on show at all times.
I'd recommend using the responsive styles for images where it's not important to see the full image such as below:
If you have an image which needs to have the full image showing at all times, use the style "Basic". An example of this could be a staff photo where you don't want any staff cutting off from either side, or an image which has text on where you need all the text to show at all times, such as the econsult banner.
Example of different styles:
TIP: Set the style as "basic" if it's important for the full image to show. For other images that are there for aesthetic purposes, use a different style.
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