# Dynamic images loaded to an image widget from a choice/CSV selection

**URL:** <https://forum.getodk.org/t/dynamic-images-loaded-to-an-image-widget-from-a-choice-csv-selection/41921>\
**Category:** Showcase\
**Tags:** enketo, odk-collect\
**Created:** [June 14, 2023, 11:31am UTC](https://forum.getodk.org/t/dynamic-images-loaded-to-an-image-widget-from-a-choice-csv-selection/41921 "2023-06-14T11:31:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahblake](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/ahblake/32/22392_2.png) [@ahblake](https://forum.getodk.org/u/ahblake)\
**Post date:** [June 14, 2023, 11:31am UTC](https://forum.getodk.org/t/dynamic-images-loaded-to-an-image-widget-from-a-choice-csv-selection/41921/1 "2023-06-14T11:31:58Z")

</div>

Thanks to @Xiphware for listening to me talk about this and setting off a lightbulb in my head with a way to make it work. It's still not a true workable dynamic default image (no Enketo, and currently no repeats), but it's closer. Here's the example form for your similar use case @chrissyhroberts.

* * *

## [Dynamic\_image\_test.zip](https://forum.getodk.org/uploads/short-url/cCxNEvrb7l20W57lHPPywynPTR3.zip) (476.7 KB)

* * *

## 

I have been stuck on this [previously](https://forum.getodk.org/t/annotate-one-of-many-possible-fixed-images/38305), wanting to serve up one/many images to the user based on a previous selection.

Eg: Pick an item, then show a list of drawings associated with it, then select one and load it to an image widget for annotation. Or, pick an item, then lookup the associated particular reference image, then load that to the image widget.

What doesn't work:

- Putting ${the\_filename} in the `calculation` field of an `image` widget
- Putting ${the\_filename} in the `default` field of an `image` widget - this will not even upload

What does work but is messy:

- Putting a static `filename.ext` in the `default` column of an `image` widget and then using relevance to make it visible (With the filename here, Central will ask for the image.)
  - This **works in Collect & Enketo**.
  - With many images this means equally many fields. You may want to then `concat(${image1}, ${image2}, ... ${imagen})` into a field to return the filename in a single known field.

What does work, **but only in Collect** :

- prepend `filename.ext` with `'jr://images/` and place this string in the `calculation` column
  - The filename must be mentioned elsewhere that Central can see and then ask for it as an attachment, eg an `image` column in a choice list or non-relevant `note` in the survey

- You can get the filename in an number of ways, the easiest is to make the `name` value for a simple choice the filename but this is not practical for most cases. Better to store the filename in another column and use an instance lookup to get it and then build the string.

What _might_ work in Collect but I haven't figured it out

- Using a `select-multiple`, pick many items,
- Create a repeat with count equal to `count-selected`
- In the repeat, pull the item filename using `selected-at`, _remember to subtract one from `position` to zero-index_
- build the `jr://images/filename.ext` string and place in the image `calculation` field
  - This partially works - the repeat count is correct, the selected item is identified for each element of the repeat and the filename path is constructed correctly. The annotation constraint can see _image content_ but the image is not there. The string is the same as in the non repeat example, so 🤷🏻‍♂️

Here be dragons 🐉

- The calculated dynamic default only works in Collect, not in Enketo. If you only use Enketo to view/edit that's ok, but it can't be the data entry path. If you need Enketo to enter, the messy relevance approach works.
- If you do not put a constraint to force markup of the image, then the image will not be uploaded to Central (` {"message":"Could not find the resource you were looking for.","code":404.1}"`
  - This will force annotation: `not(contains(${default_image_field}, 'jr://'))`

- If you do put a constraint to force markup, but do not also put a `trigger` on the calculated image field to prevent it recalculating, then it will replace the markup with the default and the form will also not be able to be completed

---

<div class="post-metadata">

**Author:** ![Grzesiek2010](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/grzesiek2010/32/2881_2.png) [@Grzesiek2010](https://forum.getodk.org/u/Grzesiek2010)\
**Post date:** [June 14, 2023, 8:01pm UTC](https://forum.getodk.org/t/dynamic-images-loaded-to-an-image-widget-from-a-choice-csv-selection/41921/2 "2023-06-14T20:01:49Z")

</div>

Hi @ahblake  
could you attach that whole form here too?

---

<div class="post-metadata">

**Author:** ![ahblake](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/ahblake/32/22392_2.png) [@ahblake](https://forum.getodk.org/u/ahblake)\
**Post date:** [June 15, 2023, 2:41pm UTC](https://forum.getodk.org/t/dynamic-images-loaded-to-an-image-widget-from-a-choice-csv-selection/41921/3 "2023-06-15T14:41:46Z")

</div>

It's there again. I made an error in the zip before.

---

<div class="post-metadata">

**Author:** ![ahblake](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/ahblake/32/22392_2.png) [@ahblake](https://forum.getodk.org/u/ahblake)\
**Post date:** [July 4, 2023, 4:04am UTC](https://forum.getodk.org/t/dynamic-images-loaded-to-an-image-widget-from-a-choice-csv-selection/41921/4 "2023-07-04T04:04:19Z")

</div>

# Dynamic images for **notes**

After selecting an item with an associated image filename, is it possible to show a dynamic image under a note, to provide visual reference information? I tried using the image, calculation & default columns with and without jr://images/ and triggers, not expecting most to work.

✅ The safe option is a row for every image and use relevance to make it/them show, as it works in Enketo & Collect.  
🐉✅ The workable option if _only_ using Collect for submissions is to put the variable with the filename in the image column for the note.

- Image column
  - ✅ Static `filename.ext` in the image column, one entry for each option, use relevance to show
    - Works in Collect & Enketo, image shown between label and hint
    - Side benefit: Can display \>1 images if select\_multiple used
    - Downside, need a row for every image

  - Static `jr://images/filename.ext` in the image column, one entry for each option, use relevance to show
    - Works in Enketo, image shown between label and hint
    - **Doesn't work** in Collect, no image shown, instead the text of the path is shown _under the hint_ \*eg `jr://images/prettyphoto.jpg`

  - Put variable in `image` column, eg `${selected_image}`
    - 🐉✅ _Works in Collect_
    - **Doesn't work in Enketo, broken image icon plus 'image'**

  - Calculate prepended variable in `image` column, eg `concat('jr://images/',${selected_image})`
    - _wasn't expected to work with a calc in an image column_
    - **Doesn't work in Collect** `File: /storage/emulated/.../media/concat('jr://images/',filename.ext) is missing.` shown between label and hint.
    - **Doesn't work in Enketo, broken image icon plus 'image'**

  - Calculate jr://images/filename.ext in a calculate and place result in image field as calculate variable field
    - Doesn't work in Collect (File is missing error) or Enketo (broken image)

- Default column
  - Put variable in `default` column, eg `${selected_image}`
    - Doesn't work in Collect or Enketo (no image or error in both)

  - Put prepended variable in `default` column, eg `jr://images/${selected_image}`
    - Doesn't work in Collect or Enketo (`jr://images/` shown in both if no trigger, blank if trigger, filename not included from calculation in both cases)

  - Put static filename in default column
    - Doesn't work in Collect or Enketo, filename shown as text under hint

  - Put prepended static path in default column
    - Doesn't work in Collect or Enketo, prepended filename shown as text under hint

- Calculation column
  - Put static filename in calculation column
    - Doesn't work in either. filename shown as text under hint

  - Put prepended static filename in calculation column
    - Doesn't work in either. prepended filename shown as text under hint

  - Put variable in `calculation` column, eg `concat('${selected_image}')`
    - Doesn't work in either, shows filename under hint

  - Put prepended variable in `calculation` column, eg `concat('jr://images/',${selected_image})`
    - Doesn't work in either, shows nothing under hint. (If trigger used, shows prepended path under hint)

# Select\_one image _appearance_ differences in Collect / Enketo:

Unrelated, just testing differences;

- Using the `columns-pack` appearance with choices that have an image, in Collect the **images are suppressed** , however in Enketo the images appear **larger and actually less packed** than with simply a `columns` appearance (this shows as 3 columns in Enketo with columns-pack)
  - Using `columns-5` (so n \> 3) does shrink the images under the selections in Enketo (and Collect, making it unusable in portrait on a handset for obvious reasons)

- Using `autocomplete` or `minimal` creates essentially a default (one column) appearance in Collect with large images under the text entry filter, but a drop-down/autocomplete appearance in Enketo with **no images**

---

<div class="post-metadata">

**Author:** ![ahblake](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/ahblake/32/22392_2.png) [@ahblake](https://forum.getodk.org/u/ahblake)\
**Post date:** [July 5, 2023, 5:13am UTC](https://forum.getodk.org/t/dynamic-images-loaded-to-an-image-widget-from-a-choice-csv-selection/41921/5 "2023-07-05T05:13:09Z")

</div>

Another chapter in the increasingly inaccurately named _Dynamic images loaded to an image widget_ thread... (Apologies to Douglas Adams). Perhaps this thread should be renamed 'Dynamic Images in image/select/note widgets' or something...

# Dynamic SVGs for a select-one with `image-map` appearance

It's not currently possible to use an SVG as an image in a question or a note _that will let you zoom/pan it_ like `image-map` will. `big-image` also can't be used easily as the default image viewer usually can't handle SVGs, and the SVG viewers that I have tried aren't great ([see previous post](https://forum.getodk.org/t/select-one-multiple-with-images-for-choices-big-image-choice-filtering-labels-images-not-shown-enketo-images-repeated-collect/40655/2))

## Image column solution (Collect)

However it is possible to create a `select-one` question that has no valid choices and isn't mandatory nor read only ([see another previous post](https://forum.getodk.org/t/displaying-svg-in-collect-not-image-map/36197/4)) and use the `image-map` appearance to render the SVG in a form that can be zoomed and panned for reference.

Extending this, it is possible to dynamically change the displayed SVG using form selections by using a field in the `image` column for the select-one.

Again, this is like a dynamic image for a note (or a dynamic image against a question that puts the variable in the `image` column) in the prior post;

- ✅ A static SVG eg `filename.svg` in the `image` column **works in Collect and Enketo.**
  - Not actually dynamic, this would require a select for every SVG and relevance to display the correct one.

- 🐉✅ A dynamic SVG filename like `${my_selected_SVG}` in the `image` column **works in Collect** but in Enketo returns **SVG image could not be found**.
  - So this is only usable if not creating submissions in Enketo
  - SVG Filenames also must be detailed somewhere else (eg choice list) so that Central will require their upload.