The Thumbnail image on a news article or blog post may appear in different places. To make sure that it fits to the proportions of all those places, you will need to crop it for each place it might be displayed. You can also set alternative text, which will be read out if your visitor is using a screen reader to access your content, explaining to them what this image is.
To upload and edit your thumbnail images, first navigate to a news article or blog post.
Uploading an Image
- Insert a thumbnail image by clicking the Upload Thumbnail block. A window will appear displaying image files on your computer. It is recommended that you add a thumbnail image to make your article stand out and encourage visitors to view more. However, if you do not have an image to hand, your website will insert a default placeholder image.
- In the window, navigate to the file you would like to upload. Click on the file and press Open.
Cropping the Thumbnail
- Once you have uploaded a thumbnail image, hover your cursor over the picture to reveal a menu in the top right-hand corner.
- Crop- Opens the Crop Thumbnail window.
- Information - The 'i' icon will allow you to set alternative text for your image, to improve the accessibility of your picture.
- Replace Image - Opens the image folder on your machine so you can choose a new image.
- Remove Image - Deletes the thumbnail image.
- Click on the crop icon to open the Crop Thumbnail window.
- The thumbnail images for your article may appear in several website areas. Each version of the image could appear in different shapes, such as squares or rectangles.
- Main Thumbnail - The image appears within the article.
- List Thumbnail - Image appears within the main news feed category.
- Home Thumbnail - The image appears in the news feed on the homepage.
- Square Thumbnail - The image appears on the Newsletters (if the Add-on is enabled).
- App Thumbnail - Image appears within the News & Events app (if the Add-on is enabled).
- Use the zoom tools, and move the image in left window to adjust the thumbnail image for each area of your website. A preview of the cropped image will appear on the right.
- Repeat image cropping for each of the areas of the website where the image is used, by pressing the purple buttons at the top right of the window.
Setting Alternative Text
- Click in the 'i' icon and enter the alternative text, to describe your image to anyone viewing your content with a screen reader.
- Click Update to apply the new crop dimensions and save the alternative text description.
- Once the image has been uploaded, you can also set the Alternative Text by clicking on the 'i' symbol in the top right corner of the image area. You should enter appropriate text to describe the image, so that it can be read by a screen reader.