Размер образа Microsoft Bot Framework в адаптивной карте - PullRequest
Новая
       45

Размер образа Microsoft Bot Framework в адаптивной карте

0 голосов
/ 24 мая 2019

Я пытаюсь установить высоту изображения в адаптивной карточке бота. Оно не должно быть точным, но оно должно быть близко.

Для следующей разметки 


{
"$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"
        }
      ]
    }

адаптивный визуализатор карт

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

показывает изображение высотой 200px.

Когда я запускаю приложение, отображаемая в браузере адаптивная карта показывает изображение высотой 86px.

Я знаю, что адаптивные карты не должны быть идеальными по пикселям, но я должен иметь возможность контролировать высоту изображения с помощью указанных свойств.

Что я здесь не так делаю?

Вот ссылка на бота, работающего с клиентом веб-чата

http://adamsrestaurantbot.azurewebsites.net/

Спасибо

Адам

P.S. Версии

Адаптивные карты 1.1.2 Microsoft.Bot.Builder 4.2.2

1 Ответ

2 голосов
/ 24 мая 2019

AdaptiveCard Схема изображения показывает, что высота не является опцией.

В конструкторе это находится в режиме предварительного просмотра, что означает, что оно еще официально не поддерживается:

enter image description here

Редактировать: Ширина / Высота больше не в предварительном просмотре.Однако канал / клиент по-прежнему должен его поддерживать

Это связано с тем, что клиент действительно отображает карту для настройки размера изображения.

Если выизмените размер изображения самостоятельно и укажите "size": "auto", оно сохранит истинные размеры изображения, но все равно изменит общий размер для клиентского средства визуализации.

Так что, к сожалению, вы не делаете ничего плохого.

Вот еще несколько вещей, которые вы можете попробовать:

  1. Карты героев или миниатюр вместо адаптивных карт.Это, вероятно, столкнется с похожими проблемами, но клиенты могут отображать их по-разному.Я вспоминаю, что сталкивался с этим несколько месяцев назад, и карты Героев работают достаточно хорошо.
  2. Если клиент будет использовать только WebChat, вы можете использовать пользовательские стили.Все адаптивные карты используют класс ac-image, поэтому вы можете: 
img.ac-image {
    height: 100px;
    width: 10px;
}

Я сделал это на вашей странице и получил:

enter image description here

Вам придется поиграться с CSS, чтобы получить его так, как вы хотите.

...