Is it possible to customize the size of received images and GIFs in Teams via Microsoft Bot Framework

Question

I'm trying to get my bot to send a user an image via teams. I am able to do this using an adaptive card and an activity + attachment. It works well, but I want to be able to change the size of the image box that is returned. I saw that there is a "size" property on the Image feature within adaptive cards, but this only changes the size of the image and not the box that is sent back on teams. An example can be seen here:

Here is how I add the image:

var happyBot = "https://i.imgur.com/W7tHV41.gif";
var botActivity = stepContext.Context.Activity.CreateReply();
botActivity.AddHappyBotAttachment(happyBot);
await stepContext.Context.SendActivityAsync(botActivity, cancellationToken);

public static void AddHappyBotAttachment(this Activity activity, string videoUrl)
{
     activity.Attachments = new List<Attachment>() { CreateHappyBotAttachment(videoUrl) };
}

private static Attachment CreateHappyBotAttachment(string videoUrl)
{
     var adaptiveCard = File.ReadAllText($@"{System.Environment.CurrentDirectory}\Dialogs\HappyBot.json");
     adaptiveCard = adaptiveCard.Replace("URL", videoUrl);
     return new Attachment
     {
          ContentType = "application/vnd.microsoft.card.adaptive",
          Content = JsonConvert.DeserializeObject(adaptiveCard),
     };
}

HappyBot.json:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "Image",
          "horizontalAlignment": "Center",
          "spacing": "Large",
          "url": "URL",
          "size":"small"
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

Is there a better way for my bot to send images to the user? Or is it possible to resize the adaptive card box that is returned? Any help is appreciated.

Answer 1

Unfortunately, there is no way to alter the width of an adaptive card, at this time. First, it's not an option in their schema. But, second, how elements are rendered is almost exclusively handled by the channel in question.

For example, in BotFramework Web Chat, you can alter the CSS (not too surprising there). So, while adjusting the width of an adaptive card is not in their specs, there is a workaround. This is not the case for Teams.

I would suggest you visit the Adaptive Card Designer where you can play with the various elements. While you may not be able to affect the width, you can alter the alignment of the image and potentially the visibility of the card, itself, so less whitespace is viewable.

Hope of help!