Need help? Looking for tips and tricks?

This knowledge base contains loads of useful advice and answers to common questions.

If you're still stuck you can always submit a support request and we'll get back to you ASAP.

Editing image properties in Dialogue

Eric -

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

image showing the wysiwg editor in Dialogue with the add image button highlighted

Click here for detailed instructions on how to add an image.

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. 

image showing the add image properties pop up window providing options to resize the image, add borders and align the image

 

Alternative Text

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.

 

Width, Height

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.

 

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

We would recommend a border no more than 10 pixels thick.

 

HSpace, VSpace

These two parameters enable you to insert 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. Any text you have put in will then sit to the other side of the image rather than above or below it.