You are able to add an image to your Dialogue wherever you see the rich text editor with the image button:
This article will specifically focus on the Image Properties box which has a number of options available for you to adjust certain parameters of the image.
This text box enables you to add in a description of the image. Its primary focus is to ensure no functionality is lost for users who have images switched off on their browser or for the visually impaired using screen readers. For that reason, it's important to describe your image as clearly as you can using this text field.
These two boxes are fairly self explanatory and they enable you to resize the image by inputting its width and height. The image editor measures image dimensions in pixels, so the numbers correlate to the number of pixels of the dimensions.
To allow an image to adjust automatically for different screen sizes, instead put in the height and width parameters as percentages. e.g. for an image which is 1000px wide and 600px high that you wish to fill the available space, put the width in as 100% and the height in as 60% and save. This will then add in the image to go across the space available and will be to scale.
Top tip: If you need to adjust the size of the image, you need only adjust one of these fields and this will automatically scale the other
You'll be able to use the preview window to have a look at how the image sits with regards to any text.
With any changes or additions, always check how it looks via the public site on the challenge admin page before publishing the challenge.
This enables you to insert a black border around the image. The box defines the thickness of the border, again measured in pixels. For example, put the number 1 n this field and this will add a 1 pixel border.
We would recommend a border no more than 10 pixels thick.
These two parameters enable you to insert empty space on either side of the image (HSpace) or above and below the image (VSpace).
This parameter has two options, 'left' or 'right'. Selecting one of these options will either align your image to the left margin or to the right margin. Any text you have put in will then sit to the other side of the image rather than above or below it.