Как я могу загрузить (изменить) изображение src с помощью AMP-Carousel? (AMP для электронной почты) - PullRequest
Новая
       50

Как я могу загрузить (изменить) изображение src с помощью AMP-Carousel? (AMP для электронной почты)

2 голосов
/ 03 октября 2019

Я пытаюсь отображать три изображения одновременно (type = "carousel"), где каждое изображение представляет категорию, где пользователь может щелкнуть изображение в карусели, чтобы загрузить / отобразить дополнительную информацию (текст иизображение) в этой категории под каруселью. Из моего первоначального изучения документации я не смог найти пример этого. Кажется, это невозможно с type = "carousel". Был бы признателен за любое подтверждение этого или если я ошибаюсь с моим предположением здесь.

ВОЗМОЖНОЕ РЕШЕНИЕ: я обнаружил, что вместо этого использую type = "slides" (карусель отображает одно изображение за раз) с AMP-Компонент привязки. Я могу использовать событие «on» для изменения / обновления содержимого в другом месте электронной почты при каждом нажатии кнопки «предыдущая / следующая». Не идеальный, но разумный альтернативный подход по сравнению с оригинальной идеей. 

<amp-carousel
   type="slides"
   on="slideChange:AMP.setState({ currentAdventure: event.index} )">

Страница документации Amp for Email для amp-bind показывает пример (немного более сложный пример) привязки [src] к ampimg, чтобы изменить путь к источнику изображения: 

<amp-state id="myAnimals">
  <script type="application/json">
    {
      "dog": {
        "imageUrl": "/img/dog.jpg",
        "style": "greenBackground"
      }
...
    }
  </script>
</amp-state>

<amp-img width="300" height="200" src="/img/dog.jpg"
    [src]="myAnimals[currentAnimal].imageUrl">
</amp-img>

AMP FOR EMAIL PLAYGROUND: Пока все хорошо, подумал я. Похоже, я могу обновить как текст, так и исходный путь изображения. В то время как я могу обновлять текст, валидатор Amp For Email пометил использование [src] в теге amp-img и, таким образом, не смог изменить изображение. : - (

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

РЕШЕНИЯ? Есть ли другой способ обновить исходный путь к изображению или это просто недопустимо ни при каких обстоятельствах? ? Является ли AMP-list возможным решением? Если это так, не знаете, как реализовать мои фрагменты кода ниже (Джейсон, Карусель и блок контента для обновления)

Приношу свои извинения за такое длинное объяснение и ценим любые идеиСпасибо, что поделились своим временем и знаниями. 

<amp-state id="myState">
  <script type="application/json">
    {
      "adventure": [
         {
          "name": "Category 1 copy...",
          "description": "Trip 1 | Trip 2 | Trip 3 | Trip 4,
          "image": "https://preview.amp.dev/static/inline-examples/images/image1.jpg"
        },
        {
          "name": "Category 2 copy...",
          "description": "Trip 5 | Trip 6 | Trip 7 | Trip 8",
          "image": "https://preview.amp.dev/static/inline-examples/images/image2.jpg"
        },
        {
          "name": "Category 3 copy...",
          "description": "Trip 9 | Trip 10 | Trip 11 | Trip 12",
          "image": "https://preview.amp.dev/static/inline-examples/images/image3.jpg"
        }
      ]
    }
  </script>
</amp-state>



<amp-carousel
    width="543"
    height="150"
    type="slides"
    on="slideChange:AMP.setState({ currentAdventure: event.index} )">

    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
        width="175"
        height="150"></amp-img>
    ....

</amp-carousel>



<div class="center">
<h1>
<span [text]="myState.adventure[currentAdventure].name">Category 1 copy..."</span>
</h1>
<p class="center" [text]="myState.adventure[currentAdventure].description">Trip 1 | Trip 2 | Trip 3 | Trip 4</p>
<amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
        width="175"
        height="150"
        [src]="myState.adventure[currentAdventure].image"></amp-img>
</div>

1 Ответ

0 голосов
/ 16 октября 2019

AMP для электронной почты не поддерживает привязку к [src] или [href] (это упоминается в AMP для компонентов, поддерживаемых электронной почтой ).

Вместо этого вы можете сделать здесьпросто добавьте все изображения (и другое содержимое) для каждой части слайда документа, а затем используйте привязку [hidden], чтобы скрыть те, которые не связаны с текущим слайдом, например: 

<amp-state id="currentAdventure">
  <script type="application/json">
    0
  </script>
</amp-state>

<amp-carousel
  width="543"
  height="150"
  type="slides"
  on="slideChange:AMP.setState({ currentAdventure: event.index} )">

  <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
    width="175"
    height="150"></amp-img>

  ....

</amp-carousel>


<div class="center">
  <div [hidden]="currentAdventure != 0">
    <h1>
      <span>Category 1 copy..."</span>
    </h1>
    <p class="center">Trip 1 | Trip 2 | Trip 3 | Trip 4</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" width="175" height="150"></amp-img>
  </div>
  <div hidden [hidden]="currentAdventure != 1">
    <h1>
      <span>Category 2 copy...</span>
    </h1>
    <p class="center">Trip 5 | Trip 6 | Trip 7 | Trip 8</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image2.jpg" width="175" height="150"></amp-img>
  </div>
  <div hidden [hidden]="currentAdventure != 2">
    <h1>
      <span>Category 3 copy...</span>
    </h1>
    <p class="center">Trip 9 | Trip 10 | Trip 11 | Trip 12</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image3.jpg" width="175" height="150"></amp-img>
  </div>
</div>

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

...