Please note: while the written guidance in this article should be up to date, the screenshots may not be. Please bear with us. We’re carrying out work to update all the screenshots in the Knowledge Base for Citizen Space 7 and (hopefully) to automate the process for future. Thank you for your patience!
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:
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:
First select the image button on the toolbar (it looks like a little polaroid photo or framed pic):
You will be presented with a pop-up like this:
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:
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:
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.
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:
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, 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.