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 an activity

Stan -

Images are a great way to liven up your consultation and engagement activities 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 activity 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 an activity anywhere you see the rich text (or WYSIWYG) editor in Citizen Space:

WYSIWYG editor toolbar

For example, it's possible to add images to the overview page or within the online survey itself. Adding images to activities 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):

WYSIWYG editor toolbar with image button highlighted

 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 activity 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 activities. 


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:

WYSIWYG editor toolbar with image button highlighted

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.