Adding images to a survey

The IntelliSurvey platform allows Survey Programmers (SPs) to add and reference images in a survey in multiple ways. Images may be added to a survey's _s directory/folder in the File Manager applet, and then referenced in the code via links provided by the File Manager, or they can be directly added to source code in the Edit Survey applet via drag and drop or copying and pasting. Adding an image directly to source code automatically adds the file to that survey's images subfolder as well. 

For more information on adding files to a survey, see Survey files. 

Uploading images to the file manager

The File Manager applet can be used to upload images and other files to the survey file structure. To upload a file, first select the images subfolder, found within the _s folder. As of r8.3+, this subfolder is created automatically. When the folder is selected, click the Upload files button from the toolbar. For images, the recommended folder in r8.3+ is the images subfolder, though users with surveys on earlier releases can still use the _s folder. For all other survey file types, the _s folder is still recommended.

After clicking the Upload files button, a modal/pop-up will appear, prompting the user to add their files.

Users can drag and drop files individually, or as a collection (hold pressing Ctrl (PC) or ⌘ (Mac) if you select multiple, non-adjacent files to drag and drop all at once).

If you decide not to use the drag and drop feature, simply click the Or select files to upload button and navigate to the file(s) you wish to upload. After selecting the file(s), the filename(s) will appear in the modal. Note that the files that you wish to upload are listed in the bottom half of the Upload files dialog box, meanwhile the initial prompt stays available for additional uploads. Click OK to continue. 

When complete, the newly uploaded files will appear in the file tree.

Determining the URL for uploaded files

Absolute URL for files in the _s folder

To reference files placed in the _s folder, construct a URL following this template:

https://<domain>/s/<survey_id>/<filename>

Note, 's' is not preceded with the underscore in this URL format. Using the above template as a guide, to view the 'my_image.png' file on the hypothetical survey 'my_survey' located on the fictitious server URL 'www.your_research_company.com', you would construct this link like this: 'http://www.your_research_company.com/s/my_survey/my_image.png'.

Absolute URL for files in the images subfolder

Files in the images subfolder will use the following format:

https://<domain>/s/<survey_id>/images/<filename>

Note, the difference between the main folder and the subfolder URL is the additional 'images' folder name between '/<survey_id>/' and '/filename/'. Using the same example as above, to view the 'my_image.png' file on the hypothetical survey 'my_survey' located on the fictitious server URL 'www.your_research_company.com', within the subfolder images, you would construct this link like this: 'http://www.your_research_company.com/s/my_survey/images/my_image.png'.

Relative file URLs

The above example URL uses an absolute file path. An absolute file path describes every step you must take through the file system to end up at the file location, regardless of your starting point. Relative file paths (shorter paths that are relative to your current location in the file system) are allowed as well, and use the following format:

# for files in the _s folder:
/s/<survey_id>/<filename>

# for files in the images subfolder:
/s/<survey_id>/images/<filename>

Again, the difference between the main folder and the subfolder URL is the additional 'images' folder name between '/<survey_id>/' and '/filename/'.

# for files in the _s folder:
<img src="/s/[* appid() *]/image_name.png" />

# for files in the images subfolder:
<img src="/s/[* appid() *]/images/image_name.png" />

Copying an image to clipboard

If an image needs to be referenced in the source code, the Copy Path or Copy as <img> buttons can be used to copy the file link, which can then be pasted into the code via the survey editor. Simply click on the image for which you want to provide a link, then click either button to copy the file path, or image path with an HTML wrapper, respectively. The button will temporarily read "Copied!" once clicked upon. The link may then be pasted into the source code by pressing Ctrl+V (PC) or  ⌘+V (Mac).

Note that for other types of files, the Copy as <img> button will be grayed out.

File paths copied from the images subfolder will follow this format:

# via Copy Path button
/survey/<survey_id>/_s/images/<imagename>

# via Copy as <img> button
<img src="/survey/<survey_id>/_s/images/<imagename>"/>

Using the image file shown above ('apples.jpg' for survey 'image_tags2'), the image path and URL would be pasted into the source code as:

# via Copy Path button
/survey/image_tags2/_s/images/apples.jpg

# via Copy as <img> button
<img src="/survey/image_tags2/_s/images/apples.jpg"/>

In most cases, SPs will want to copy the file path that already contains the img src HTML wrapper, for example, to use as the input for an explain tag. 

Adding images directly to source code

Images may also be directly uploaded into survey source code via one of two methods - drag and drop, or cut and paste. For the drag and drop method, simply click on the desired image to select it wherever it is located on your device, then drag it into the survey source editor. To cut and paste an image into the source, press Ctrl+C (or ⌘+C for Macs). Then, click in the source code in the Edit Survey applet and hit Ctrl+V (or ⌘+V). A modal/pop-up will appear, showing the upload progress. A notification will let the SP know the file was successfully added, and the image's URL will be added to the code.

The URL for the image will be pasted in the editor as an HTML string, using the format:

<img src="/s/<survey_id>/images/<imagename>"/>

When an image is pasted into source code, the file will automatically be added to the survey's images subfolder in r8.3+. For surveys on earlier software versions, any drag and dropped images will be added to the _s folder.