CODEWITHSUNDEEP
microsoft-teams
James Hyot
James Hyot

Reputation: 150

Teams doesn't display hero image

I've been trying to send cards to Teams channels through a connector. The cards do appear but any hero image I try to send isn't displayed. The Message Card Playground displays the image correctly but it simply doesn't show up in Teams. I have no issues with the "normal" images.

Here is the JSON that I'm sending through the webhook, but I've also tried the Twitter - Hero image sample card and it doesn't work either :

{
  "@type": "MessageCard",
  "@context": "http://schema.org/extensions",
  "summary": "Hero card testing",
  "title": null,
  "text": null,
  "themeColor": "19b5fe",
  "sections": [
    {
      "title": null,
      "activityImage": "https://pbs.twimg.com/profile_images/862653089916096512/ljJwcmFp_bigger.jpg",
      "activityTitle": "Hero image card",
      "activitySubtitle": "This is a test",
      "facts": [],
      "text": null,
      "heroImage": {
        "image": "https://pbs.twimg.com/media/DFv74A0XkAEdwQ_.jpg"
      },
      "images": []
    }
  ]
}

Am I missing something ?

Upvotes: 6

Views: 3550

Answers (3)

Raju
Raju

Reputation: 46

Hero Images ('heroImage') are currently support only in Outlook. Would be available in Teams sometime in future.

Card with a hero image

Try the sample Twitter markup for in the card playground: https://aka.ms/messagecardplayground

Upvotes: 0

Rich Moe - Microsoft
Rich Moe - Microsoft

Reputation: 572

HeroImage is not currently supported in Teams. This is on the backlog but no ETA at this point.

Upvotes: 5

David Risney
David Risney

Reputation: 4387

I hit the same problem. It looks like as a sort of workaround you can use the inline image markdown syntax in a non-section's text.

{
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "Summary",
    "title": "Title",
    "text": "![Alt text for the image](https://pbs.twimg.com/media/C8NK1XGUIAA-CJK.jpg)",
    "themeColor": "E81123"
}

I describe it as a workaround though because the image is not scaled in any way when displayed. As you can see from this example a large image is left very large and overflowing the container.

Upvotes: 7

Related Questions