Hello! How can we help?

Search our knowledge base for 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

Images - how to add images to a consultation

Stan -

Images are a great way to liven up your consultation and make the content more accessible and engaging to respondents. We're not exaggerating when we say that good and appropriate use of images can totally transform your consultation and its response rates.

We hope you will find reading this article in conjunction with our other article, How do I make images look great in Citizen Space?, really helpful. It may seem like a lot of information to take in but if you have the time you can achieve some excellent results and increase respondent rates/engagement if you get this bit right! 

So, how do I add images?

Images can be added to a consultation anywhere you see the rich text (or WYSIWYG) editor in Citizen Space:

The text editor toolbar. Screenshot.

For example, it's possible to add images to your consultation overview or within the actual survey itself. Adding images to consultations is a two step process:

Step 1

First select the image button on the toolbar (it looks like a little polaroid photo or framed pic):

The text editor toolbar with the image icon circled. Screenshot.

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

A popup has options for a URL, Alternative Text and size. It shows a preview of the image. Screenshot.

Step 2

There are 3 options:

1) Add an image that is uploaded somewhere else

If you want to add an image that you have already uploaded somewhere else in Citizen Space, go to the site where the image is, right click the image and click "Copy image location". Then paste that into the URL box. Add your alternative text, and adjust the size of the image if required, using the boxes you see in the above screenshot.


2) Upload an image to Citizen Space

If you wish to upload an image yourself, click the "Upload" tab. You will be presented with a view like this:

The upload tab is selected, it has a choose file upload option and a send it to the server button. Screenshot.

Click the "Choose File" button to find the image on your computer. Then click the "Send it to the Server" button. This will upload your image and then return you to the previous tab, where you can add your alternate text and alter the dimensions if required.


3) Use a previously uploaded image

If you have already uploaded the image somewhere in the same consultation and you wish to use it again on another page, click the "Browse Server" link to the right of the URL box:

The URL bar and browse server buttons. Screenshot.

This will show you a list of the existing images. Choose one and click the "select" button. This will return you to the previous tab, where you can add your alternative text and alter the dimensions if required.

NB. Using the 'Browse Server' option will not show you all images that have been uploaded across all Citizen Space consultations. 


Top tips

Please be careful with referencing images. Ensuring you have the correct copyright rights to use an image is paramount.

All images must also have alternative text. Screen readers read this out for people with visual disabilities. When determining appropriate alternative text for images, context is everything. When you hover over the image, a box will appear with a brief, accurate description of the image. In an ideal world, this should be around 15 words and not repeat the image title.

Adjusting the size of an image

If you want to resize an image, highlight it & then select the button you used to originally embed the image:

The WYSIWYG menu bar with image button highlighted. Screenshot.

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 image editor pop-up window with the width and height fields. Screenshot.

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, e.g. to the left or the right of the other content.

Deleting an image

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