Microsoft Bot Framework image size in adaptive card

Question

I'm trying to set the height of an image in a bot framework adaptive card. It doesn't have to be exact, but it should be close.

For the following markup


{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"speak": "",
"type": "Container",


          "items": [
                {
                  "type": "TextBlock",
                  "text": "Acai Bowls, Juice Bars & Smoothies, Vegan"
                },
                {
                  "type": "TextBlock",
                  "text": "11:11 Health Bar",
                  "weight": "bolder",
                  "size": "Medium",
                  "spacing": "none"
                },
                {
                  "type": "Image",
                  "url": "https://sarestlocatoreastprem.blob.core.windows.net/images/small_4_half.png?st=2019-05-22T12%3A21%3A32Z&se=2029-05-23T12%3A21%3A00Z&sp=rl&sv=2018-03-28&sr=b&sig=XHqT5Fzdrc9idAYDM9slnMvC7W84d760qM6DC%2BHRZkE%3D",
                  "size": "auto",
                  "width": "82px",
                  "height": "14px"
                },
                {
                  "type": "TextBlock",
                  "text": "(29 reviews)",
                  "isSubtle": true,
                  "spacing": "none"
                },
                {
                  "type": "TextBlock",
                  "text": "",
                  "size": "small",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "text": "87 Union St\r\nNewton, MA 02459",
                  "size": "small",
                  "wrap": true
                },
                {
                  "type": "Image",
                  "url": "https://s3-media3.fl.yelpcdn.com/bphoto/-UK0ZIiw99QtnIqljweeXw/o.jpg",
                  "size": "auto",
                  "height": "200px"
                }
              ]
          }
      ],
      "actions": [
        {
          "type": "Action.OpenUrl",
          "title": "Directions",
          "url": "https://www.google.com/maps/@42.3297699,-71.1926317,18z?hl=en"
        },
        {
          "type": "Action.OpenUrl",
          "title": "More Info",
          "url": "https://www.yelp.com/biz/11-11-health-bar-newton"
        }
      ]
    }

the adaptive card visualizer

https://adaptivecards.io/visualizer/index.html?hostApp=Bot%20Framework%20WebChat

shows a 200px high image.

When I run the app the adaptive card displayed in the browser shows an 86px high image.

I know adaptive cards aren't meant to be pixel-perfect, but I should be able to control the image height with the specified properties.

What am I doing wrong here?

Here's a link to the bot running with the web chat client

http://adamsrestaurantbot.azurewebsites.net/

Thanks,

Adam

P.S. Versions

Adaptive Cards 1.1.2 Microsoft.Bot.Builder 4.2.2

mdrichardson mdrichardson · Accepted Answer · 2019-05-24T19:19:30

The AdaptiveCard Image Schema shows that height isn't an option.

In the designer, this is in Preview, meaning that it isn't officially supported yet:

Edit: Width/Height is no longer in preview. However, it's still up to the channel/client to support it

This is because it's really up to the client displaying the card to adjust the size of the image.

If you resize the image yourself and specify "size": "auto", it will keep the image's true dimensions, but will still vary the overall size per the client renderer.

So unfortunately, you're not doing anything wrong.

Here's a couple of other things you can try:

Hero or Thumbnail cards instead of adaptive cards. This will likely run into similar issues, but clients may render them differently. I recall running into this several months ago and Hero Cards working reasonably well.
If the client will only be using WebChat, you can use custom styling. Adaptive Cards all use the class ac-image, so you could:

img.ac-image {
    height: 100px;
    width: 10px;
}

I did this on your page and got:

You'll have to play around with the CSS to get it how you want it.

Microsoft Bot Framework image size in adaptive card

1 Answers