Images can be displayed alongside options or table rows to provide additional information to respondents and to increase their engagement. To display images with option text, use the option images tag on a question widget. To display images with table row text, use the show row images tag.
For information on including images with question text, see show image.
Tip! The platform accepts a variety of image input types, such as .jpg/.jpeg, .png, and animated .gif files. If you need to add a video to your survey, contact Support or send an email to help@intellisurvey.com.
Details
- First, image files should be uploaded to your survey's images folder in the Files applet.
-
To attach an image to an option or row, include the
imagedecorator after the option text with the image file name as its input.- Next, place
option images: ydirectly on the question widget, or place theimages: ydecorator next to the listcall (e.g.,optsfrom). - To attach an image to a table row element, add the
show row images: ytag directly to the table, or place theimages: ydecorator next to the listcall.
- Next, place
- The
imagedecorator can also be used as a column header in sheets to link options with their image files. - Option images may be formatted with image tags, which also can be applied as decorators. These decorators can also be used with row images.
Tip! Most question and table types support the image decorator. If needed, you can also use option data decorators to attach images to options and rows.
Image tags and decorators
The following tags and decorators can be used alongside option images to alter the default display settings.
When used as tags, include the word "option" to indicate these formatting instructions are for option images. When using decorators, omit the word "option," and use the remaining text as the decorator label. The decorator versions of these tags must be used with show row images.
| As a tag | As a decorator | Description |
option image alt text |
image alt text |
Functions similarly to the text decorator and specifies alternate text to display in place of the image if it cannot be displayed, e.g., image alt text: Image of a [text]. |
option image max height |
image max height |
Specifies the maximum displayed height of the image in pixels, e.g., image max height: 200. |
option image max width |
image max width |
Specifies the maximum displayed width of the image in pixels, e.g., image max width: 200. |
option image placement |
image placement |
Specifies where the image should be displayed in relation to the option text. Inputs include: Note that 'only' indicates to show the image without its option text. |
Additional examples
Displaying images with table rows
Images can be added to table rows by applying show row images: y. Like option images, the image names should be added directly to the list items with the image decorator. Inline decorators can then be applied to define image placement and max sizing.
The same question above could also be programmed using the images decorator, instead of the show row images tag, as shown below.
2. How cute do you find each of the following?
type: radio table
optsfrom: series[1..5]
headings: Not cute at all, Extremely cute
rowsfrom: ANIMALLIST {images: y}{image placement: right} {image max height: 100}
Formatting option images
Option images can be formatted with either tags or decorators. Formatting decorators should be placed after the image or images: y decorators.
Defining option images with sheets
Sheets can also be used with option images: y/images: y. Add the image decorator as a column name in the sheet as shown below, and include the image file names that will be associated with each option.
| id | text | image |
| 1 | apples | apples.jpg |
| 2 | bananas | bananas.jpg |
| 3 |
grapes |
grapes.jpg |
| 4 | oranges | oranges.jpg |
| 5 | pears | pears.jpg |
| 6 | strawberries | strawberries.jpg |
After uploading the sheet to your survey, define the sheet in the survey source via the define sheet widget. Next, define a setlist with the sheet as the options. The list can then be referenced in a question's listcall, where image tags and decorators can be applied as usual.
You can also can add image decorators as columns in a sheet instead of including them locally on question widgets, as shown below. The formatting will be applied to all questions that reference these images, but can be overridden locally by adding image tags or decorators to individual questions.
| id | text | image | image_max_height | image_max_width |
| 1 | apples | apples.jpg | 200 | 200 |
| 2 | bananas | bananas.jpg | 200 | 150 |
| 3 |
grapes |
grapes.jpg |
150 |
150 |
| 4 | oranges | oranges.jpg | 125 | 125 |
| 5 | pears | pears.jpg | 150 | 125 |
| 6 | strawberries | strawberries.jpg | 150 | 200 |
Comments
0 comments
Please sign in to leave a comment.