Редактирование контента

Поскольку разметка AMP-страниц несколько различается с обычной HTML-разметкой, стоит знать, как вставлять изображения на страницы и (если есть такая необходимость) iframe.

Оглавление 


Тег <img> запрещён

В AMP-разметке тег <img>, отвечающий за изображения, запрещён. 
В теме этот тег "вырезается". Т.е. если даже вы его вставите в редакторе, то на страницах темы вы его не увидите. 
Вместо него нужно размещать тег <amp-img>. 

У данного тега (как и у всего AMP) есть ряд особенностей. 
Одна из них заключается в том, что вы должны знать размеры изображения.

 

Узнаём размеры изображения

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

Загрузите изображение

 

Затем смотрите размеры

Там же можете изменить размер, оптимизировать изображение или произвести с ним другие манипуляции. 

 

Загружаем изображение в редакторе

Вставляйте изображения уже после того, как отформатируете ваш текст, потому что понадобится переключиться в HTML-режим редактора. 

Выберите курсором место в тексте, где должно располагаться изображение. И нажмите на иконку загрузки изображения. 
Загрузите изображение. Если нужно, загрузите сразу несколько изображений. 

Изображение загружено.

 

Если открыть страницу на данном этапе, то вы не увидите изображения, т.к. все теги <img> нещадно вырезаются темой.

Меняем <img> на <amp-img>

Теперь переключитесь в HTML-режим редактора и найдите тег изображения <img>.

 

Теперь вам нужно заменить вашу строку:

<img src="ссылка_на_изображение.png">

На строку:

<amp-img src="ссылка_на_изображение.png" width="ширина" height="высота"></amp-img>

  

Теперь изображение появилось на странице.


СОВЕТ!
Не загружайте изображения по ширине большие, чем 250px.
Т.к. AMP-изображения имеют фиксированные атрибуты ширины и высоты и не масштабируются на узких экранах. 


Вставляем карту (iframe)

Откройте google.ru/maps/ выберите на карте фрагмент, который хотите встроить. 
Затем вызовите бокой сайдбар и нажмите на ссылка/код.

 

В появившемся окне выберите вкладку встраивание карт.
Скопируйте код. 


Далее, вставьте его в редакторе в режиме HTML.

 

Из этого кода вам понадобится только значение атрибута src, выделенное на скриншоте.

Затем вставьте туда же в редактор страницы следующий код:

<amp-iframe src="src_карты" width="160" height="90" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0">
    <h4 placeholder="">Загрузка карты...</h4>
</amp-iframe>

Вместо src_карты вставьте значение, которое выделено на скриншоте выше. 
Затем код, который начинается с <iframe, удалите.

  

 

Вставляем видео (iframe)

Теги <iframe>, при помощи которых всех привыкли вставлять видео, также запрещены.
Вместо них догадайтесь какой тег должен быть вставлен... правильно <amp-iframe>. 

Чтобы вставить видео на страницу скопируйте id видео на youtube в строке браузера.


Затем переключите редактор в режим HTML и в  нужном месте вставьте код:

<amp-iframe width="160" height="90" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation" allowfullscreen="" frameborder="0" src="//www.youtube.com/embed/id_видео?rel=0">
  <amp-img layout="fill" src="//img.youtube.com/vi/id_видео/maxresdefault.jpg" placeholder=""></amp-img>
</amp-iframe>

 

Должно получиться вот так:


  

Экранируем AMP-теги в теме основного сайта

Если вы добавляете изображения в товары или используете одни и те же страницы на двух темах (и добавляете туда AMP-теги), то может возникнуть ситуация, когда обычный HTML-валидатор будет "ругаться" на AMP-теги, которые вы добавили для AMP-версии. 

Чтобы экранировать AMP-теги, иными словами, чтобы они не выводились в вашей основной теме, вам нужно внести некоторые правки в теме основного сайта. 

 

Экранирование на текстовых страницах темы основного сайта

Откройте файл page.html темы вашего основного сайта. 
Найдите строку: 

{$page.content} 

или 

{$page.content|escape}

И замените на: 

{$page.content|regex_replace:'/<amp-img([\w\W]+?)><\/amp-img>|<amp-iframe([\w\W]+?)>*<\/amp-iframe>/':''}


 

Экранирование на страницах товара темы основного сайта

Откройте файл product.html темы для Магазина вашего основного сайта.
Найдите строку: 

{$product.description}

или

{$product.description|escape}

И замените на: 

{$product.description|regex_replace:'/<amp-img([\w\W]+?)><\/amp-img>|<amp-iframe([\w\W]+?)>*<\/amp-iframe>/':''}


Экранирование на страницах записей блога темы основного сайта

Откройте файлы stream_posts.html, stream_search.html и post.html темы для Блога вашего основного сайта. 
Найдите (где найдёте) строку: 

{$post.text}

И замените на:

{$post.text|regex_replace:'/<amp-img([\w\W]+?)><\/amp-img>|<amp-iframe([\w\W]+?)>*<\/amp-iframe>/':''}

Сергеев Владимир
Last update: March 25, 2020
Was this article helpful?YesNo

11 comments

  • Вячеслав
    January 1, 2019 18:35

    Правильно ли я понял: нужно продублировать картинки в амп-варианте и обычном и настроить описанное экранирование. Тогда на обычных страницах выведутся обычные, а амп - экранируются. А в амп-версии выведутся амп-варианты, а обычные автоматом будут вырезаны?

  • Юрий
    May 24, 2019 14:16


    В теме этот тег "вырезается". Т.е. если даже вы его вставите в редакторе, то на страницах темы вы его не увидите.

    В товарах да, тег <img> вырезается, а в описании категориях?

  • Иван
    March 25, 2020 10:31

    Сергей, у меня по какой-то причине не сработало с блогом. Картинки не появляются в амп-версии.

    • Иван, я Владимир. =) 

      Ссылку на страницу, где "не сработало" можно? 
      И ещё скриншот окна редактора в режиме HTML.

      • Иван
        March 25, 2020 13:18

        Извините, Владимир :)

        https://bison-media.ru/idei-dlya-podarkov/tovary-dlya-uyutnoy-kukhni/

        https://amp.bison-media.ru/idei-dlya-podarkov/tovary-dlya-uyutnoy-kukhni/

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

        • Иван, вам нужно в теме proStore для блога найти файлы файлы stream_posts.html, stream_search.html и post.html

          Найдите (где найдёте) строку:

          {$post.text}

          И замените на:

          {$post.text|regex_replace:'/<amp-img([\w\W]+?)><\/amp-img>|<amp-iframe([\w\W]+?)>*<\/amp-iframe>/':''}

          И затем теги img в редакторе записи нужно заменить на <amp-img> таким образом:

          <amp-img src="ссылка_на_изображение.png" width="ширина" height="высота"></amp-img>

          Add comment
          To add a comment please sign up or login
          We receive and process personal data of visitors to our site in accordance with the official privat policy.
          If you continue to use the site, we will assume that you agree.
          Subscribe and get discount!