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, see Embedding and referencing videos in SPL.
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 (e.g.,rowsfrom).
- Next, place
- The
imagedecorator can also be used as a column header in sheets to link options with their image files. - Option images in questions can be formatted using either image tags or decorators. When formatting row images in tables, decorators are required.
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
Use these tags and decorators to change the default display of option images and their accompanying text:
- As tags: Include the word "option" to indicate these formatting instructions are for option images.
- As decorators: Drop the word "option" and use only the remaining part as the decorator label.
Reminder, decorators must be used when formatting images in tables.
| 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 label placement |
image label placement |
Specifies where the option text appears within the space adjacent to the image. Inputs include: |
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
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.
In the example below, decorators adjust image width, height, and placement. When applied to the optsfrom listcall, they affect all images in the list. When used on individual options, they allow for customized formatting per image.
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}
Changing the option text position
Use the option image label placement tag or image label placement decorator to control where the option text appears within the space next to the image. The designated text space differs depending on the question or table structure, but within this space, the text can be pushed into one of nine directions:
- left-top
- left-middle
- eft-bottom
- right-top
- right-middle
- right-bottom
- center-top
- center-middle
- center-bottom
A few possibilities are demonstrated below.
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 set list 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.