Мы уже знаем что специальные ускоренные мобильные страницы строятся на так называемой 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"]);
?>15 апреля 2020 (Boudybuilder) Виталий Фантич