search

microsoft / AdaptiveCards

A new way for developers to exchange card content in a common and consistent way.
https://adaptivecards.io
MIT License
1.75k stars 550 forks source link

[MSTeams][Images in Bot Reply Conversation] [Images not getting trimmed/fit to a fix box size leaving too much empty space for small images] #4601

Closed apurva1112 closed 4 years ago

apurva1112 commented 4 years ago

Platform

What platform is your issue or question related to? (Delete other platforms).

Author or host

Author

If you're an author, who are you sending cards to? MSTeams

Version of SDK

NA What version are you using? Ex: NuGet 1.0.2, or latest main, etc...

Details

Explain your issue. If you just have a question, please post on StackOverflow instead.

We are facing a problem while posting images in reply text format from out bot to teams. The images are getting rendered in a fix size box. Any smaller image is leaving lots of blank space in the text. We tried posting image using markdown format as well as the HTML img tag.

This is an example where most of the space in the text is coming empty.

We also tried passing fixed height and width parameter in the img tag and set it to a specific pixel value, however the large images are getting cropped and the smaller ones leaving lots of empty space

image image

However when we post any image from the teams app in the channel as reply it gets rendered properly without any white space. Why is the bot behavior different than the normal reply by user? Please help us on how to show images properly here, without leaving any blank space or without cropping much.

shalinijoshi19 commented 4 years ago

@apurva1112 do you happen to have the card json you are using here for your scenario? @siduppal / @Wajeed-msft thoughts on this one?

ghost commented 4 years ago

Hi @apurva1112. We have acknowledged this issue report. Please continue to follow this issue for updates/progress/questions.

ghost commented 4 years ago

Hello @apurva1112! We need some additional information from you to process this issue. Please see discussion comments above. Thanks!

apurva1112 commented 4 years ago

@apurva1112 do you happen to have the card json you are using here for your scenario? @siduppal / @Wajeed-msft thoughts on this one?

Here's the output image

And the card


<span style="font-weight: 600;"> by </span>
<a style="font-weight: 600;" href= "https://github.com/apurva1112">@apurva1112</a><br/>
  <p>On the $photographer Catherine Opie who has “made a study of the free/ways of Los Angeles, surfers, Tea/Coffee "Party" (gatherings), America's national parks, the houses of Hills, teen-age football players, ^the personal effects of Elizabeth Taylor, the Michigan Womyn's Music Festival, Boy Scouts &amp; her friends, mini-malls, and tree stumps.”<br>

<a href="https://user-images.githubusercontent.com/42499837/91008609-5ba0b700-e5fc-11ea-8a29-01e111fb56ba.PNG" rel="nofollow">sh</a></p>

  <img src="https://user-images.githubusercontent.com/42499837/91008609-5ba0b700-e5fc-11ea-8a29-01e111fb56ba.PNG" /><br/>
'
ghost commented 4 years ago

Thanks @apurva1112 for following up on this issue. A member of our triage crew will re-engage as soon as possible to follow up. Thanks.

Wajeed-msft commented 4 years ago

@apurva1112 - This looks like HTM view. Could you please share the Adaptive Card JSON which is being sent by Bot?

ghost commented 4 years ago

Hello @apurva1112! We need some additional information from you to process this issue. Please see discussion comments above. Thanks!

apurva1112 commented 4 years ago

@apurva1112 - This looks like HTM view. Could you please share the Adaptive Card JSON which is being sent by Bot?

We are not using adpative card. We are using normal HTML message as reply

ghost commented 4 years ago

Thanks @apurva1112 for following up on this issue. A member of our triage crew will re-engage as soon as possible to follow up. Thanks.

Wajeed-msft commented 4 years ago

Thanks @apurva1112 for the information.

Could you please provide height and width to the image and try again? <img width="55" height="64" src="https://user-images.githubusercontent.com/42499837/91008609-5ba0b700-e5fc-11ea-8a29-01e111fb56ba.PNG" /><br/>

After adding height and width, there is no extra whitespace. image

Please take a look at documentation on formatting the text content. Also please take a look at Adaptive Card samples which can be easily customized as per your need.

apurva1112 commented 4 years ago

Thanks @apurva1112 for the information.

Could you please provide height and width to the image and try again? <img width="55" height="64" src="https://user-images.githubusercontent.com/42499837/91008609-5ba0b700-e5fc-11ea-8a29-01e111fb56ba.PNG" /><br/>

After adding height and width, there is no extra whitespace. image

Please take a look at documentation on formatting the text content. Also please take a look at Adaptive Card samples which can be easily customized as per your need.

If I provide the exact height and width, it will load without any additional space, but the images are arbitrary and everytime I will have to make separate API calls for dimensions of every image.

Wajeed-msft commented 4 years ago

We are able to repro this at our end and have raised bug internally. We are tracking it here: https://github.com/MicrosoftDocs/msteams-docs/issues/2012

Please follow this issue for updates/progress/questions.

Please try with Adaptive Card Images which give multiple options for image size.