Прокачка LS версии 1. Добавляем html5 тэг
С выходом новой версии стандарта HTML5 появились новые дополнительные тэги, призванные улучшить семантическую структуру веб страницы. Как раз один из таких тэгов пятой версии — figure, я и решил добавить в проект.
Для этого нужно внести изменения в два файла лайвстрита.
Можно конечно, пойти более сложным путем и модифицировать редактор добавить отдельную кнопку или поставить более новую версию редактора, где возможно есть такие опции. Но пример который я предлагаю, более простой, плюс дополнительно содержит код для микроразметки изображений. Если эта опция не нужна, можете удалить код тега meta из примера.
Инструкция.
Первым делом нам нужно исправить файл модуля обработки изображений image.class.php, по пути engine/modules/image изменять будем функцию которая встраивает изображения в текстовом редакторе, на 407 строчке находим public function BuildHTML и модифицируем код который возвращает функция, заменив простой тэг img на код из примера.
Кода функции добавил в гист.
После этих манипуляций, у нас будет в тексте нужный код для вывода тэга в тексте. Но парсер jevix будет вносить смуту, и вырезать часть текста или пытаться закрыть тэг meta. Поэтому надо будет дополнить и его. Код модифицированных инструкций для парсера, с чистой версии ЛС залил на гист. Ссылка в комментарии, из-за спам защиты не пускает. Так что если у вас на сайте проводились его модификации, придется вручную дополнить. Надо будет через поиск по тексту тегов: figure, meta, figcaption, в моем примере, добавить в свой файл эти теги. Потом проверить, какой результат получится.
Справка по тегам figure и figcaption.
HTML-теги figure и figcaption появились в стандарте HTML5 для формирования блока с картинкой и описания к ней. Кроме того, эти теги могут оборачиваться применять для оборачивания не только изображений, но и блоков кода, рекламы, видео или аудио.
Тэг figure может использоваться для блоков с несколькими изображениями, но с общим описанием. Плюс мне попалось интересное использование тэга для карточек товара на юле,
для чего было это сделано не совсем понятно, может для сео, но в поиске что-то особо статей по этой теме не нашлось.
Плюс можно дополнительно стилизовать вывод изображений и описания в теге figure, и для этого не надо прибегать к дополнительному оборачиванию изображений в другие блоки. В сети полно примеров
Для этого нужно внести изменения в два файла лайвстрита.
Можно конечно, пойти более сложным путем и модифицировать редактор добавить отдельную кнопку или поставить более новую версию редактора, где возможно есть такие опции. Но пример который я предлагаю, более простой, плюс дополнительно содержит код для микроразметки изображений. Если эта опция не нужна, можете удалить код тега meta из примера.
Инструкция.
Первым делом нам нужно исправить файл модуля обработки изображений image.class.php, по пути engine/modules/image изменять будем функцию которая встраивает изображения в текстовом редакторе, на 407 строчке находим public function BuildHTML и модифицируем код который возвращает функция, заменив простой тэг img на код из примера.$sText='<figure itemprop="image"><img itemtype="https://schema.org/ImageObject" src="'.$sPath.'" '; if (isset($aParams['title']) and $aParams['title']!='') { $sText.=''; /** * Если не определен ALT заполняем его тайтлом */ if(!isset($aParams['alt'])) $aParams['alt']=$aParams['title']; } if (isset($aParams['align']) and in_array($aParams['align'],array('left','right','center'))) { if ($aParams['align'] == 'center') { $sText.=' class="image-center"'; } else { $sText.=' align="'.htmlspecialchars($aParams['align']).'" '; } } $sText.=$sAlt.'/><meta itemprop="url" content="'.$sPath.'"><figcaption>'.htmlspecialchars($aParams['alt']).'</figcaption></figure>'; return $sText;
Кода функции добавил в гист.
После этих манипуляций, у нас будет в тексте нужный код для вывода тэга в тексте. Но парсер jevix будет вносить смуту, и вырезать часть текста или пытаться закрыть тэг meta. Поэтому надо будет дополнить и его. Код модифицированных инструкций для парсера, с чистой версии ЛС залил на гист. Ссылка в комментарии, из-за спам защиты не пускает. Так что если у вас на сайте проводились его модификации, придется вручную дополнить. Надо будет через поиск по тексту тегов: figure, meta, figcaption, в моем примере, добавить в свой файл эти теги. Потом проверить, какой результат получится.
Справка по тегам figure и figcaption.
HTML-теги figure и figcaption появились в стандарте HTML5 для формирования блока с картинкой и описания к ней. Кроме того, эти теги могут оборачиваться применять для оборачивания не только изображений, но и блоков кода, рекламы, видео или аудио.Тэг figure может использоваться для блоков с несколькими изображениями, но с общим описанием. Плюс мне попалось интересное использование тэга для карточек товара на юле,
для чего было это сделано не совсем понятно, может для сео, но в поиске что-то особо статей по этой теме не нашлось.
Плюс можно дополнительно стилизовать вывод изображений и описания в теге figure, и для этого не надо прибегать к дополнительному оборачиванию изображений в другие блоки. В сети полно примеров
10 комментариев
Ссылка на гист с модифицированным jevix-ом
Интересный пример оформления
codepen.io/hkfoster/pen/QPobba
img
вfigure
иfigcaption
.P.S.: есть подозрения, что
alt
и название объекта (то что внутриfigcaption
) — не одно и то же2. Зачем все эти теги в текстовом редакторе пользователя?
3. Пример как можно обработать.
Файл: /engine/modules/text/Text.class.php.
img
задается положение (align="left"
,class="image-center"
,align="right"
) иtitle
.alt
необязательный параметр, и его топикстартер «дергает» изtitle
Атрибут alt обязателен для w3c стандарта и SEO.
Скорее всего описание (
title
) не было заполнено