Editing image properties in Dialogue

You are able to add an image to your Dialogue wherever you see the rich text editor with the image button:

Detailed instructions on how to add an image.

This article will specifically focus on the Image Properties box which has a number of options so you can adjust certain parameters of the image. 

Alternative Text

This text box enables you to add in a description of the image. Its primary focus is to ensure a description of the image is provided for users who have images switched off on their browser or for visitors using screen readers. For that reason, it's important to describe your image as clearly as you can using this text field.

Width, Height

These two boxes are fairly self explanatory and they enable you to resize the image by entering its width and height. The image editor measures image dimensions in pixels, so the numbers correlate to the number of pixels of the dimensions.

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.

Border

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 in this field and this will add a 1 pixel border.

We would recommend - if you put a border in - that you use one which is no more than 10 pixels thick.

HSpace, VSpace

These two parameters enable you to insert a margin of empty space on either side of the image (HSpace) or above and below the image (VSpace).

Alignment

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. If your image is small enough to leave room, then any text you have put in will then sit to the other side of the image rather than above or below it.