[Web] Allow sending an image's width and height

[Fabilin]

Large images currently cause resizing issues in tock-react-kit once they fully load (most apparent being the scrollbar jumping up). Specifying the width and height when sending an image from the server would ensure the corresponding img tags get the right size from the start.

[francoisno]

Hello @Fabilin good idea. As long as it remains optional of course.

How would you implement this:

• Specify size in pixels (like <img> attributes), or CSS properties enabling more units like em, %, etc.?
• Specify absolute size or max size? What happens if the image is smaller than the configured size?
• Specify size by image (programaticaly or in Tock Studio / Stories / Add Media), by bot (Settings / Application Configuration) and/or globally for the whole Tock platform instance (envvar)?

[francoisno]

cc @pi-2r @correi-f @elebescond

[Fabilin]

I had not considered setting the dimensions through CSS, it is true that this would allow for a lot more flexibility, and possibly responsiveness as well.

On the other hand, here are the benefits I can think of from specifying size for the HTML attributes :

• Easier validation and typing (kotlin API), only whole numbers would be accepted
• No risk of CSS injection
• Allows more styling in tock-react-kit (e.g. using clientside options to force all images to be the same width would work as intended and keep the aspect ratio if dimensions are specified through HTML but I believe it would be completely ignored if we specified the size in CSS)

For these reasons I would still recommend setting the HTML width and height, be it only for simplicity's sake.

I believe image size should be (optionally) specified for each image sent by the bot's backend; tock-react-kit already has options to set CSS overrides for all images displayed in the conversation.