How do I add an image to my Dialogue?

This article tells you how to add images to your Dialogue and the different ways to upload them. Images can be added to your challenges and your static pages, in fact...

Images can be added to Dialogue anywhere you see a text editor bar.

Step 1

Select the button which looks like a little image of mountains and a sun:

You will be presented with a pop-up image editor, like this:

Step 2

From here you have three options of how to upload your image, depending on where that image is stored. Please choose the most appropriate option for you:

• I'd like to add an image that has been uploaded elsewhere (such as a website)
• I'd like to upload an image from my computer (only available for site admins adding images to a challenge overview).
• I'd like to use an image I've previously uploaded to Dialogue

We'll talk you through these options and then the ways to add these to your overall Dialogue and challenges.

Add an image that is uploaded somewhere else (such as from a website)

Before you start adding in images from other websites, there are a few things to consider:

• Do you have permission/licence to use the image(s)? If not, please don't use them
• Some photos/images ask to have their source credited, please remember to do so if this is the case
• If you use the URL of an image from another website, remember that if this is deleted by that website it will disappear from your Dialogue (possibly without notice)
• The best source of images from elsewhere will be from a site you control e.g. your own website/Flickr account/Tumblr account/etc.

1. If you're happy with the above and want to add an image that you have already uploaded somewhere else, go to the site where the image is, right click the image and select 'Copy image location' or 'Copy image URL'. Then paste that into the URL box.

Dialogue sites are protected with SSL Certification - this means that your site has extra security. As a result, any images that sit within the site also need to be from a site with this security. All this means is that when you add an image the URL will have to start with 'https' rather than just 'http' or 'www'.

2. Remember to put in the 'Alternative Text' for your image - this is the description of the image that will be used to explain what it contains for your visitors using assistive technologies such as screen readers.
3. You can adjust the size of the image if required - we recommend that your image is no wider than 600 pixels. Bear in mind that the taller your image is, the farther down the page your text will appear.
4. Select OK, and you will see how your image will appear on the page.  To finalise adding your image to your challenge, select the Save button.

Add a new image from your computer

1. If you want to add an image that is stored on your computer, you first need to select the 'Browse Server' button in the image properties pop up, as shown below:

2. This will take you to this images admin screen and you will need to select the 'files quick upload' option, circled below:

3. A second 'Images Quick Upload' box will open on the right - select 'Browse' (this will open up a new window with your files), select the image file you wish to upload, and select 'Open':

4. You will now be prompted to give your image a title and then you can upload it to Dialogue using the button 'Upload Files':

Your image will now appear (alongside any others you have previously uploaded) in the window. You just need to click on your desired image and this will take you back to the 'Image Properties' pop up so that you can adjust the size and add your alternative text.

Select OK, and you will see how your image will appear on the page:

To finalise adding your image to your challenge, select the Save button.

Use a previously uploaded image

1. If you have already uploaded the image you wish to use into Citizen Space, select the 'Browse Server' button to the right of the URL box:

2. This will take you to the images admin screen and will show you your existing images. Click on the image you wish to use. This will return you to the previous image properties box, where you can add your alternative text and alter the dimensions if required.
3. Select OK, and you will see how your image will appear on the page:
4. To finalise adding your image to your challenge, select the Save button.

Adjusting the size of an image

If you want to resize an image, highlight it & then select the button which looks like a little image of mountains and a sun (the one you used to originally embed the image):

This will bring up the pop-up image editor, and you can use the 'width' and 'height' fields to edit the dimensions of your image:

The Preview section shows you how your image will appear on the page. Enter your desired dimensions in number of pixels (you may need to do a bit of trial & error to get it right). Be aware that if the lock symbol is closed, it means that the image will stay in proportion when you change one of the dimensions (either width or height). If the lock symbol is open, it means that the dimensions can be changed independently of one another and the image will not stay in the same proportion. The rounded green arrow symbol allows you to reset the image to its original dimensions.

Entering a number of pixels in the 'Border' field will add a thick black line around the image. The 'HSpace' and 'VSpace' fields allow you to enter a number of pixels of space that you'd like to keep between the image and other content such as text. The 'Alignment' dropdown allows you to choose where on the page you'd like the image to appear, such as to the left or the right of the other content.

Deleting an image

To delete an image, either highlight it and press the delete key on your keyboard, or right click it and select 'Cut' from the menu that appears.