Конвертация картинки img в amp-img Битрикс

В этой статье я не буду подробно рассказывать о том что такое AMP, так как информация тут рассчитана для тех кто уже знаком с технологией и уже занялся ее внедрением. Речь пойдет о картинках для AMP шаблона сайта Битрикс.

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

Казалось бы в чем же проблема, что нам стоит получить адрес картинки на php и правильно сформировать по ней amp-html разметку на Битрикс. Конечно тут никаких проблем быть не может. Берем DETAIL_PICTURE, PREVIEW_PICTURE или же картинки с какого то PROPERTY_ , и грамотно ее выводим, указав layout, haight, width, title и alt атрибуты нашей AMP картинки на Битрикс. Да, и не забудем за главный атрибут src или srcset, если используем несколько изображений для разных размеров экранов. Но при создании шаблона, я столкнулся с одной проблемой. Многие картинки находятся уже в html разметке детального текста (DETAIL_TEXT) наших статей и описаний товаров. Как тут быть? Порылся на американских сайтах и нашел хорошее решение.

Замена img в amp-img на Битрикс

А решение оказалось очень простым. Хотя может сам бы я его не написал, так как не дружу с регулярными выражениями без шпаргалки. Вся суть заключается в том чтобы подменить стандартные теги на новые. Ну и так как img не имеет закрывающего тега, то добавить в конце закрывающий тег </amp-img> для нашей модернизированной картинки.

Покажу на примере компонента news.detail. В шаблоне компонента создаем фал result_modifier.php если его нет, и наполняем его следующим кодом.

<?
$arResult["DETAIL_TEXT"] = _img_to_amp($arResult["DETAIL_TEXT"]);

function _img_to_amp ($html) {
  preg_match_all("#<img(.*?)\\/?>#", $html, $matches);
  foreach ($matches[1] as $key => $m) {
    preg_match_all('/(alt|title|src|width|height)=("[^"]*")/i', $m, $matches2);
    $amp_tag = '<amp-img ';
    foreach ($matches2[1] as $key2 => $val) {
      $amp_tag .= $val .'='. $matches2[2][$key2] .' ';
    }
    $amp_tag .= 'layout="responsive"';
    $amp_tag .= '>';
    $amp_tag .= '</amp-img>';
    $html = str_replace($matches[0][$key], $amp_tag, $html);
  }
  return $html;
}
?>

Все, готово! Теперь когда будет выводится детальная страница элемента новости, то все картинки в детальном тексте будут заменены на AMP-IMG.

А вот в тексте анонса мы захотели вовсе убрать эти картинки, если где то они были. Ну так на всякий случай. Для этого мы воспользовались следующей строчкой кода:

<?
  $arResult["PREVIEW_TEXT"] = preg_replace('/<img(?:\\s[^<>]*)?>/i', '', $arResult["PREVIEW_TEXT"]);
?>