Конвертація картинки img в amp-img Бітрікс
Ми вже знаємо, що спеціальні прискорені мобільні сторінки будуються на так званій 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>
?>
15 квітня 2020 (Boudybuilder) Виталий Фантич
Матеріали за темою:
- Телеграм чат Бітрікс Proger Union
- Служба доставки Нова Пошта для Бітрікс: Модуль від Proger для ефективної доставки у вашому магазині
- Багатомовність Бітрікс
- Модуль маркет для Бітрікс
- Мультимовність Бітрікс | Translator
- Красиві анімації на Бітрікс
- Замінити favicon.ico для всіх пристроїв на Бітрікс
- AMP Бітрікс - Accelerated Mobile Pages Project Bitrix