Image tags (r8)

Images are often displayed alongside questions to provide additional information to respondents and to increase their engagement. In order to simplify how Survey Programmers (SPs) attach images to questions and options, the show_image and option_images tags were created.

To use these tags, SPs should first add the images to their survey's images folder in the File Manager applet. Any images that should be displayed with question text should then be specified via the show_image tag, which triggers the display of the image. Any images that should be displayed with option text should use the image decorator. To then trigger the display of the option images with their option text, apply the tag option_images: y to the question, or the decorator images: y on either a listcall or the individual options.

Additional image-related tags may be included to specify positioning, max height or width, or alternative text to show if the respondent’s device is incapable of displaying the images.

Try it!

See code See demo Restart demo

Syntax

show_image

To attach an image to a question's text, apply the show_image tag to the question and specify which image to display. Additional image-related tags can then be applied to specify how the image should be displayed.

# attaching an image to a question's text
1. Consider the following image...
type: radio, checkbox, etc.
show image: image_name.jpg
optsfrom: LIST_NAME

# formatting question text images
2. Here's an example of a question with a formatted image
type: radio, checkbox, etc.
show image: image_name.jpg
optsfrom: LIST_NAME
image max height: 300
image max width: 200
image placement: above
image alt text: Here's an image of a squirrel

Tags

The following tags can be used alongside show image to alter the default display settings.

option_images

To attach an image to an option, include the image decorator after the option text and specify which image to display. To then trigger the display of all options in the list, include option_images: y on the question widget. Individual options and listcalls can also use the images: y decorator to trigger the display of option images.

As with show_image, additional image-related tags can then be applied to specify how to display the images. The option images tag also allows for the usage of these tags as decorators. Note that when used as tags, the tags must include "option" in them to indicate these formatting directives are for option images, not question-text images. When used as decorators, however, the "option" part of the name can be excluded.

# attaching images to options
setlist: LIST_NAME
1. Option 1 {image: image_name.jpg}
2. Option 2 {image: imagename.png}
3. Etc...

# calling option images into a question with 'option_images: y'
1. Here's a question with some images attached to options.
type: radio, checkbox, etc.
optsfrom: LIST_NAME
option images: y

# calling option images into a question with 'images: y'
2. Here's a question with some images attached to options.
type: radio, checkbox, etc.
optsfrom: LIST_NAME {images: y}

# formatting option text images
3. Here's a question with some images attached to options.
type: radio, checkbox, etc.
optsfrom: LIST_NAME
option images: y
option image max height: 300
option image max width: 200
option image placement: above

# formatting option text images with decorators
3. Here's a question with some images attached to options.
type: radio, checkbox, etc.
optsfrom: LIST_NAME {images: y} {image max height: 300} {image max width: 200} {image placement: above}

Note SPs can mix and match image formatting tags as decorators or tags with both option images: y and images: y.

Both option_images: y and images: y will work with spreadsheets as well. Like other element decorators, the image decorator can be used as a column name in the sheet, then referenced later in the survey source. See example below for details.

setlist: ITEMS
1.This {{IMG: this.png}}
2.That {{IMG: that.png}}

1.Here's a question
type: radio
optsfrom: ITEMS {text: <img src="/survey/<survey_id>/_s/[IMG]" />}

Tags and decorators

The same tags that can be included alongside show image can be used with either option images: y or the images: y decorator. When used as tags, they must include "option" in the tag name, but as decorators, the "option" part is optional. The decorators may be included together on a listcall, or on individual options such as 3. Nike {image: nikeshoe.png} {image max height: 200} {image max width: 200} {image alt text: Nike, just do it.}.

show_row_images

In r9.2, we introduced the show row images tag to allow table rows to use images alongside their text. It is applied similarly to show image: y to trigger images being shown for a table's rows. Programmers should note that the 'show' and 's' in "images" are optional, so the tag can be shortened to row image: y. See example below for additional information.

1. Using images in table rows
type: radio table
row image: y
optsfrom: OPTLIST
rowsfrom: ROWLIST

Examples

Attaching and displaying option images

In the example below, images are attached to the individual option in the FRUITS setlist via the image decorator. To then display the images with their options in a question, include either option images: y on the question as shown in Q1, or the images: y decorator on the listcall as shown in Q1A.

Note that it is possible to include images: y directly on individual options if need be – e.g., 5. pears {image: pears.jpg} {images: y}.

See demo See code Restart demo

Attaching and displaying question images

To attach an image to a question's text, simply include the show image tag and specify which image to display.

See demo See code Restart demo

Images in tables with 'show row images: y'

Image tags are also supported in tables. In addition to show image and option images: y, images can be added to table rows using show row images: y (alias row image: y). Make sure the file names and any other decorators are included at the list items for the rows.

See demo See code Restart demo

7A. How cute do you find each of the following?
type: radio table 
optsfrom: series[1..5]
headings: Not cute at all, Extremely cute
show row images: y 
rows: 
1. Hans the Hamster       {image: hamster.jpg}    {image placement: right} {image max height: 100}
2. Earl the Squirrel      {image: squirrel.jpg}   {image placement: right} {image max height: 100}
3. Charles the Chinchilla {image: chinchilla.jpg} {image placement: right} {image max height: 100}
4. Everett the Ferret     {image: ferret.jpg}     {image placement: right} {image max height: 100}

7B. For each of the following features, select the animal that has the cutest one.
type: radio table 
show image: ferretface.jpg
image max height: 50
image placement: right
option images: y 
option image max height: 100
option image placement: above
1. Hans the Hamster       {image: hamster.jpg}     
2. Earl the Squirrel      {image: squirrel.jpg}    
3. Charles the Chinchilla {image: chinchilla.jpg} 
4. Everett the Ferret     {image: ferret.jpg}     
rows: 
1. Ears
2. Eyes
3. Nose
4. Tail

Formatting question images

Various image-related tags can be included on a widget to format how images are displayed with show image. The image max height and image max width tags can be applied to limit the max size (in pixels) for the image, and the image placement tag can specify where the image should be located in relation to the question text (above, below, right, left, or only).

Note that if image placement: only is included on a question, the image will replace the question text. In the case of option image placement: only, the option text will be replaced by the image.

See demo See code Restart demo

Formatting option images

When using image display tags for option images, "option" must be included in the tag name so that the system does not mistake them for question image modifiers. When applied as decorators to options or their listcall, the "option" portion can be dropped as shown in Q4.

See demo See code Restart demo

If need be, the option display decorators can be defined for individual options as shown below.

See demo See code Restart demo

Using images in a ranking question

The image: y decorator can also be used with ranking questions created with the type: rank tag. Notice in the example below, we recommend using mobile friendly survey themes such as Flex in order to display images in a clickable button style.

See demo See code Restart demo Note, option images: y cannot be used at this time with type: rank questions.

option_images with sheets

Spreadsheets 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.

After uploading the spreadsheet 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 with either option images: y or images: y to display the images. Include additional image formatting tags or decorators as needed.

See demo See code Restart demo

If need be, SPs can add image decorators as columns in the sheet as shown below, instead of including them locally on question widgets.