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

У цій статті я не буду докладно розповідати про те, що таке AMP, оскільки інформація тут розрахована для тих хто вже знайомий з технологією і вже зайнявся її впровадженням. Йтиметься про картинки для AMP шаблону сайту Бітрікс.

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

Здавалося б у чому проблема, що нам варто отримати адресу картинки на php і правильно сформувати по ній розмітку на Бітрікс. Звичайно, тут ніяких проблем бути не може. Беремо 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"]);<< br> ?>