How to add images to an activity

Images are a great way to liven up your activities and make the content more engaging. Using images well can transform your activity and even contribute to increased response rates. There are 3 steps to follow in Citizen Space to add and adjust an image:

Step 1: add an image 

Images can be added to an activity anywhere you see the editor toolbar in Citizen Space (for example on the Overview, activity pages and Publish Results). First select the image button on the toolbar.

This takes you to the Image Properties box, which has options for uploading, adjusting and opening an image.

To add an image to your activity you can upload it, reuse an image already uploaded to your Citizen Space site, or reuse an image already uploaded to your activity.

a) Upload an image to Citizen Space

Select the 'Upload' tab then 'Choose File' to find the image on your computer. Select 'Send it to the Server' to upload your image to Citizen Space.

b) Use an image you've already uploaded to Citizen Space

If you want to re-use an image which has already been uploaded to another Citizen Space activity, find the image in your site then right click and select 'Copy image address'. Paste this address into the URL box in Image Properties. 

c) Use an image you've already uploaded to the activity 

If you've already uploaded the image somewhere else in the same activity, select the 'Browse Server' button (to the right of the URL box).

Once select, this shows you a list of existing images you've uploaded to the activity. Choose the image you want to add and then use the 'Select' button. This will return you to the previous tab, where you can add alternative text and alter the dimensions if required.

Using 'Browse Server' won't show you all images that have been uploaded across all Citizen Space activities, just this specific activity. 

Step 2: add alternative text

Whether you import a new image or link to an existing one, the next step is to add alternative (or alt) text to the image. This enables users of assistive technology (such as screen readers) to access information on your image (opens in new tab). 

Step 3: adjust the image

You can use the Width and Height boxes to change the dimensions of your image.

Enter your chosen width and height in number of pixels (you might need to do a bit of trial and error to get it right). If the lock symbol is closed the image will stay in proportion when you change its width or height. If the lock symbol is open you can change the width and height independently of each another, and the image won't stay in proportion. You can reset the image to its original dimensions by selecting the arrow symbol. 

Entering a number of pixels in the Border box 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.

When you're happy with your image, select OK.

One more image option

Most of the time you'll want your image to just sit in the same window as your activity text. However, if you've got a detailed image and you'd like your respondents to be able to easily expand it, we'd recommend embedding a smaller version of the image (for example, 650px wide at most) on the page but also uploading a larger version of the image to a link which respondents can open in a new window. This helps to avoid the overview page or survey page having to load a larger version of the image unnecessarily, since it can only display images at a fixed maximum width.

How to link an image to another image or back to itself

1. Add the smaller version of your image following the steps above, then add some text below it such as 'Please select this link to open a bigger version of this image in a new window'.
2. Highlight the section of text that you'd like to add the link to and select the hyperlink button in the toolbar.
3. Select the 'Upload' tab and 'Choose file' to find the larger version of the image saved on your computer or device. Remember that once you have the file selected you'll also need to 'Send it to the server'.
4. Before you save the hyperlink, select the Target dropdown, choose 'New Window' then select 'OK' (the default setting here is <not set>, which opens the image in the same window).

More on images

Read more about images in How do I make images look great in Citizen Space?