Прокачка LS версии 1. Добавляем html5 тэг

С выходом новой версии стандарта HTML5 появились новые дополнительные тэги, призванные улучшить семантическую структуру веб страницы. Как раз один из таких тэгов пятой версии — 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 комментариев

avatar
Да круто спасибо. Помогло.
avatar
avatar
В НЕКОТОРОМ СМЫСЛЕ НАТОЛКНУЛИ НА РЕАЛИЗАЦИЮ НОВОЙ ИДЕИ… СПС!
avatar
В теории можно и js-ом «обернуть» img в figure и figcaption.
P.S.: есть подозрения, что alt и название объекта (то что внутри figcaption) — не одно и то же
avatar
Вот обсуждение на стаке
avatar
1. undefined variable '$sAlt'
2. Зачем все эти теги в текстовом редакторе пользователя?
3. Пример как можно обработать.

Файл: /engine/modules/text/Text.class.php.
/**
	 * Парсит текст, применя все парсеры
	 *
	 * @param string $sText Исходный текст
	 * @return string
	 */
	public function Parser($sText) {
		if (!is_string($sText)) {
			return '';
		}
		$sResult=$this->FlashParamParser($sText);
		$sResult=$this->JevixParser($sResult);
		$sResult=$this->VideoParser($sResult);
		$sResult=$this->CodeSourceParser($sResult);
		$sResult=$this->Html5Parser($sResult);
		return $sResult;
	}
    
    /**
     * Парсит текст под HTML5 стандарт
     *
     * @param string $sText Исходный текст
     * @return string
     */
    public function Html5Parser($sText)
    {
        if (strpos($sText, '<img') !== false) {
            preg_match_all('/<img.*?src=["|\']+(.+?)["|\'].*?>+/i', $sText, $aMatches, PREG_SET_ORDER);
            $sPathRootWeb = str_replace(array('https://www.', 'http://www.', 'https://', 'http://'), '', Config::Get('path.root.web'));
            foreach ($aMatches as $aRow) {
                if (strpos($aRow[1], $sPathRootWeb) !== false and substr($aRow[1], -4) == '.jpg') {
                    preg_match( '@alt="([^"]+)"@' , $aRow[0], $aMatch );
                    $sAlt = (isset($aMatch[0])) ? $aMatch[1] : Config::Get('view.name');
                    if (isset($aMatch[0])) {
                        $sImg = str_replace($aMatch[0], 'itemtype="https://schema.org/ImageObject" ' . $aMatch[0], $aRow[0]);
                    } else {
                        $sImg = str_replace(' src', ' itemtype="https://schema.org/ImageObject" alt="' . $sAlt . '" src', $aRow[0]);
                    }
                    $sText = str_replace($aRow[0], '<figure itemprop="image">' . $sImg . '<meta itemprop="url" content="' . $aRow[1] . '"><figcaption>'.htmlspecialchars($sAlt).'</figcaption></figure>', $sText);
                }
            }
        }
        return $sText;
    }
avatar
2. Зачем все эти теги в текстовом редакторе пользователя?
Видимо потому что для тега img задается положение (align="left", class="image-center", align="right") и title.
alt необязательный параметр, и его топикстартер «дергает» из title
avatar
Имею ввиду теги разметки. Достаточно тега картинки с атрибутами.
Атрибут alt обязателен для w3c стандарта и SEO.
avatar
1. undefined variable '$sAlt'

Скорее всего описание (title) не было заполнено
avatar
Ошибка в коде.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.