New image cropping tool
Ensure you are logged into the website and on the page where you would like to add your image, with your cursor in the specific page area where you wish to display your image, then follow this step by step guide:
Before you start you need to be logged in and on the page you would like to add an image.
Open the editor by clicking on the ‘Edit content’ link for the area you would like to add the image.
1. In the editor, click on the position you would like the image (the cursor should flash in that location)
2. Select the picture icon on the toolbar
3. Upload image form
- “Browse” to find the image you would like to upload
- Enter your “Alt” text – this should be a short piece of descriptive text about your image to help speaking browsers for the visually impaired.
- If you would like to add a caption to the bottom of your image, enter the text in the “Caption” field.
- Select “Upload”. This will open the image crop tool selection area.
4. Image crop tool selection
- Select one of the placement options for your image. This opens the Image cropping tool.
Note: The image crop tool is context sensitive and so the options here are limited to the area on the web page you want the image
5. Choose your size and position on page
- When you click on your chosen image positioning and size the image the image cropping tool will open. This will import your selected image into the cropping tool. You should see the image you have selected fill the screen.
6. Adjust your image
- You can adjust your image to make it fit the selected final size by using the “image size” slider at the bottom of the screen:
Tip! If you move the slider too quickley it will not be able to adjust fast enough to capture your whole image. Move the slider at a steady pace.
7. Adjust image height
- You can adjust the height of your final image by using the arrows at the top and bottom of the preview rectangle or by mannually setting the hieght at the bottom of the screen. You can also move thie preview rectangle one pixel at a time with the arrow keys on your keyboard.
8. Rest your image or return to image size and position selection
- The “reset” button will clear all of the image sizing changes that you have made in the image cropping window (using the slider, the prview rectangle and the manual height adjustment). The “Go back” button will take you back to the image size and position area, allowing you to choose a different set size and position.
9. Generate you image
- When you are happy with your size and position selection and any adjustments you have made, click on “Generate”. This will add the image you have created into your webpage with the correct size and position.
10. Edit your image
- If you would like to edit the image after you have added it to your page, click on the image in the editor view, and the select the picture icon. This will open the cropping tool and load up the existing image – you can then make adjustments. When you have completed any adjustments, click on “Generate”.
