Style item media and supported possibilities of customization

[FikriMilano]

Is your feature request related to a problem? Please describe. Currently itemMedia is not customizable, implementers don't have a way let's say to: position the image on the left or center or right side of the screen, change image dimension, etc.

Describe the solution you'd like Add styling attributes for itemMedia, decides the default look and ensure the styling supports possibilities of customization.

Describe alternatives you've considered N/A

Additional context quoting from @jingtang10

add a new style to allow customization of item media
discuss with shelaghm the default look and feel (especially where it is positioned in relation to other components in a question, and the size and alignment etc) of the item media in different components

Would you like to work on the issue? N/A

[FikriMilano]

quoting from @jingtang10

add a new style to allow customization of item media discuss with shelaghm the default look and feel (especially where it is positioned in relation to other components in a question, and the size and alignment etc) of the item media in different components

[shelaghm]

@FikriMilano can you remind me what aspects of itemMedia needs to be customized? What kind of guidance can I provide to help with this?

Off the top of my mind is

1. location: below question title and before answer options. What are other location options?
2. image size? Do we default to a specific ratio or can be any ratio?
3. full width vs standard padding
4. What else?

[FikriMilano]

@shelaghm you can give some thoughts about what customization makes sense or is commonly used. then I can try to support these for itemMedia.

1. I think that's all (?)
2. I don't really have any requirements for this, what do you recommend?
3. Yeah, we make this configurable
4. Alignment, image on left or right or center (horizontally) of the screen
5. Border, @jingtang10 mentioned that we might need this; feel free to elaborate, Jing

[jingtang10]

For context, make sure to refer to the discussion here as well: https://github.com/google/android-fhir/pull/1377#discussion_r1107547535

There're some mocks in that discussion that's worth taking a look at.

[shelaghm]

Attaching some screenshots with suggestions.

1. Location: By default display the image After question title and instructions. The two other options are before question title and instructions or between question title and instructions.
2. I suggest we don't restrict the aspect ratio and just work with whatever size people upload. Maybe we can suggest a minimum size?
3. Padding: I suggest we make the default 16px border/padding which I think aligns with the current padding in SDC. Other options are full width and allowing developers to do custom padding.
4. Alignment: Default to centered. (Can also default to right alignment, I don't have a strong opinion on this)

[FikriMilano]

@shelaghm woah, looks awesome!

I'll support these customization for itemMedia.

[FikriMilano]

@khyativyasargus

[fredhersch]

@FikriMilano Is there still open items to complete?

[FikriMilano]

@fredhersch yeah, all the above mentioned items mentioned by @shelaghm and me. This ticket is not started yet. cc @f-odhiambo