Increase image uploaded in the media column

Ideas
1

Dear community,

I have a form where I use a lot the "media" column to show pictures in some of the questions.
Is there a way to increase the size of the pictures displayed? Or maybe opening them in a page (a bit like the minimal appearance) when clicking on the question?

Thanks!
Emma

2

There's a big-image concept in the underlying form spec but it's not explicitly supported by XLSForm (issue here).

I think that you can add a media::big-image column and put an image file in the appropriate row, though. It would be good to check whether that works or not!

3

How did I miss this!

By default, itext “image” values are not clickable. However, if you also include a “big-image”, the image displayed by “image” will be clickable and will display a pannable, zoomable view of the file specified by “big-image”.

This is super useful to know. I will test and see if it works, having thumbs and pan/zoomable images would be extremely handy.

4

:sob:

As per the Issue, it doesn't work with XLSForm.

I tested choices with columns image & media::big-image as well as a note with the same, form doesn't upload. Changing to media::image & media::big-image fails in the same manner.

The XLSForm could not be converted: Media type: big-image not supported

I changed it to just big-image to match the format of image, and it uploads fine, but form attachments don't then require the files specified in that column, and the images specified in image do not open a pannable/zoomable image in Enketo and Collect even when the same filename is used in both columns in either notes or selects.

If this did work, how would selecting an image as the choice be differentiated from selecting the image to embiggen?

edit: It only works if you edit the XML version

:confetti_ball: Success after downloading the XML definition and editing:
I downloaded the definition, added the big-image element after the regular image element for a choice and a note, eg:

<value form="image">jr://images/cat_small.jpg</value><value form="big-image">jr://images/cat_large.jpg</value>

For both select_one and a note:
In Collect, selecting the image then gives the system dialogue 'Open with?' to let you pan/zoom in selected app, and back arrow to return to the question. (So you can't select the choice by tapping the image anymore, which means the appearance no-buttons will break (tested: selecting the images acts as a choice in Collect, no large image. no-buttons doesn't work in Enketo so clicking the small image does open large as popover and select by the label as usual.)

In Enketo, selecting the image FILLS the current browser with the large image popped over the form (scroll bar exists but does nothing), aspect is distorted to fit the frame. Can be zoomed and panned, selecting again closes it. Edit: if the browser is wider it distorts to fill the frame instead of padding white space on the side(s), if the browser is taller, it doesn't and pads with whitespace underneath

I would be happy with the current Collect functionality for now if I didn't have to edit the XML manually, as that's just not practical. The Enketo stretch display is annoying, but is only used by my team for reviewing submissions anyway.

Edit 2:

This is less than ideal, but does work:

  • Create form, but put large images under another media type column that's unused, eg video or audio
  • Upload form, download XML and edit
  • Do a find/replace as
    • "video">jr://video --> "big-image">jr://images
  • If you are using the same images for image and big-image you will need to change the filename slightly in XLSform to avoid duplicates, eg replace jpg with xyz (valid file extensions aren't checked on XLSForm upload), then you will also need to find/replace this in XML as you will get a A resource already exists with formDefId,name value(s) of ... error at XLSForm upload.
  • upload modified XML and then upload the missing large images to Form Attachments

eg
<value form="image">jr://images/cat_small.jpg</value><value form="video">jr://video/cat_big.xyz</value>
would become
<value form="image">jr://images/cat_small.jpg</value><value form="big-image">jr://images/cat_big.jpg</value>

5

Thanks @Emma_Joseph_Oudin for the question @LN for your answer and @ahblake for testing, I was starting to do so and I checked the discussion :frowning:

This would be very useful to display typologies to help the user in his choices, without using any internet hosted resource.

6

pyxform implementation https://github.com/XLSForm/pyxform/pull/635, hopefully we can get this reviewed and released soon.

Thanks for the notes on the current implementations, @ahblake, clearly there are some improvements to be made. I don't think we can prioritize these at the moment but we will try to get to them!

1 Like
7

https://getodk.org/xlsform/ now has big-image support if you want to try it out. You can download an XForm from there and upload it to Central.

This will be in the next Central release which will be out within the next two weeks.

3 Likes
8

I can't reproduce this. I used the new XLSForm support and put the same filename for image and big-image. If you can still reproduce, can you please share an XLSForm?

9

That error was specific to using a video column to author the form in excel, uploading to Central, downloading the XML, doing a find/replace then reuploading it. The duplication was of filename.ext under image as well as video.

If I change video to big-image in excel and there is a duplicated filename, this still results in a successful XForm from XLSForm Online that uploads to Central without this error.

1 Like