Иногда перед контент-менеджерами стоит задача выводить в произвольной части статьи какой-нибудь элемент, например слайдер с возможностью увеличить изображение нажатием мышки.
Удобный вариант такой вставки реализован в WordPress, когда в плагине фотогалереи контент-менеджер может загрузить и отредактировать формат подготовленные фотографии, а в тело статьи в нужном месте вставить специальный код, например [gallery_123], где 123 — это уникальный идентификатор той фотогалереи, которую он только что создал и наполнил.
Сделаем подобный вариант на 1С-Битрикс.
Как видно настройки шаблонов URL адресов не нужны, оставляем название, символьный код и привязку к сайту. Так же обратите внимание, что свойства инфоблока хранятся в отдельной таблице.
Во вкладке Доступ устанавливаем Чтение для всех пользователей, чтобы наши фотографии могли видеть все посетители сайта просматривающие новость с фотогалереей. Затем добавляем единственное свойство Фотографии.
Свойство должно быть множественным т.к. фотографий в галерее может быть сколько угодно.
В дополнительных настройках свойства «Фотогалерея» необходимо отметить флажок «Выводить поле для описания значения», это нужно для того, чтобы контент-менеджер мог описать загружаемое изображение и позже пользователь мог видеть это описание при просмотре галереи.
Создадим тестовый элемент фотогалереи для одной из существующих новостей и загрузим несколько фотографий:
Подготовка шаблона компонента для фотогалереи
В свойстве «ID новости» можно сразу указать ID тестовой галереи, это нужно для удобства настройки шаблона. В параметрах компонента в поле «Свойства», свойство MORE_PHOTO нужно указать вручную, его не будет в списке доступных свойств инфоблока т.к. это свойство типа «Файл»:
В качестве плагина для фотогалереи можно использовать всем хорошо знакомый Fancybox, который можно скачать с официального сайта http://fancyapps.com/fancybox/3/ в последней версии этот плагин предоставляет очень симпатичное оформление фотогалереи прямо из коробки.
Что необходимо подключить:
- последнюю стабильную минифицированную версию JQuery
- сам плагин jquery.fancybox.min.js
- стили jquery.fancybox.min.css
Подключаем, файлы предварительно разнесены по папкам css и js внутри папки стандартного шаблона /bitrix/templates/furniture_gray/.
<?
use Bitrix\Main\Page\Asset;
//Подключаем и выводим CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH. '/css/jquery.fancybox.min.css' );
//Подключаем пользовательские и выводим стандартные js скрипты
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH."/js/jquery-3.2.1.min.js");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH."/js/jquery.fancybox.min.js");
Теперь необходимо настроить сам шаблон. Переходим в папку с шаблоном, у меня это /bitrix/templates/.default/components/bitrix/news.detail/gallery/ , здесь необходимо создать файл result_modifier.php в котором предварительно подготовить картинки к показу в фотогалереи.
<? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();
// Подготовка изображений
if($arResult['PROPERTIES']['MORE_PHOTO']['VALUE']){
$photos = [];
foreach ($arResult['PROPERTIES']['MORE_PHOTO']['VALUE'] as $key => $photoId) {
$arPhoto = CFile::ResizeImageGet($photoId, ["width" => 150, "height" => 150], BX_RESIZE_IMAGE_EXACT, true, false, false, 100);
$arPhotoBig = CFile::ResizeImageGet($photoId, ["width" => 800, "height" => 600], BX_RESIZE_IMAGE_PROPORTIONAL, true, false, false, 100);
$photos[] = ['SRC'=>$arPhoto['src'], 'SRC_BIG' => $arPhotoBig['src'], 'ALT'=>$arResult['PROPERTIES']['MORE_PHOTO']['DESCRIPTION'][$key]];
}
// И сохраняем в кеш только нужные данные
$arResult['GALLERY_PHOTOS'] = $photos;
$this->__component->SetResultCacheKeys(['GALLERY_PHOTOS']);
}
Всегда используйте конструкцию $this->__component->SetResultCacheKeys([‘CUSTOM_PROPERTY_KEY’]); для кеширования данных в result_modifier.php, так вы будете хранить в кеше строго-ограниченные данные, не переполняя его, чем сэкономите память и повысите быстродействие сайта.
И сам шаблон template.php:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$this->setFrameMode(true);
if($arResult['GALLERY_PHOTOS']) { //А есть ли вообще картинки?>
<div class="gallery">
<? foreach ($arResult['GALLERY_PHOTOS'] as $key => $photo) { ?>
<div class="gallery_item">
<a href="<?=$photo['SRC_BIG'];?>" class="fancybox" data-fancybox="images" data-caption="<?=$photo['ALT'];?>" >
<img src="<?=$photo['SRC'];?>" alt="<?=$photo['ALT'];?>">
</a>
</div>
<?}?>
</div>
<?}?>
Если вы всё подключили правильно галерея уже начнёт работать. Стили добавляем согласно верстки и дизайна шаблона.
Вставка Фотогалереи в документ
Для начала нужно кастомизировать компонент news.detail новостного раздела, не важно отдельный это компонент или входит в состав комплексного.
Потребуется отредактировать файл result_modifier.php, template.php и component_epilog.php, начнём с result_modifier.php.
Первым делом скопируйте шаблон компонента на основе которого сделан раздел новостей, в моём случае это комплексный компонент bitrix:news, копируем шаблон компонента в дефолтный шаблон сайта, я назвал его news_block. Далее идём в папку компонент news.detail, т.е. /bitrix/templates/.default/components/bitrix/news/news_block/bitrix/news.detail/.default/ и создаём файлыresult_modifier.php иcomponent_epilog.php.
В result_modifier.php необходимо добавить следующий код для кеширования шаблона.
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
//Кешируем данные после обновления буфера шаблона
$this->__component->SetResultCacheKeys(array("CACHED_TPL")); ?>
В файл component_epilog.php нужно вставить специальную конструкцию, которая будет искать в теле статьи «хеш-тег» #GALLERY_ID_122#, где 122 — идентификатор галереи (элемента инфоблока) и подгружать на его место компонент галереи (который мы ранее настроили) с переданным в него ID 122.
Весь код выглядит так:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
//Заменяем хеш-тег GALLERY_ID на компонент
echo preg_replace_callback(
"/#GALLERY_ID_([\d]+)#/is".<em>BX_UTF_PCRE_MODIFIER</em>,
create_function('$matches', 'ob_start();
$GLOBALS["APPLICATION"]->IncludeComponent("bitrix:news.detail", "gallary", Array(
"ACTIVE_DATE_FORMAT" => "d.m.Y",
"ADD_ELEMENT_CHAIN" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"AJAX_MODE" => "N",
"AJAX_OPTION_ADDITIONAL" => "",
"AJAX_OPTION_HISTORY" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "N",
"BROWSER_TITLE" => "-",
"CACHE_GROUPS" => "N",
"CACHE_TIME" => "36000000",
"CACHE_TYPE" => "A",
"CHECK_DATES" => "N",
"DETAIL_URL" => "",
"DISPLAY_BOTTOM_PAGER" => "N",
"DISPLAY_DATE" => "N",
"DISPLAY_NAME" => "N",
"DISPLAY_PICTURE" => "N",
"DISPLAY_PREVIEW_TEXT" => "N",
"DISPLAY_TOP_PAGER" => "N",
"ELEMENT_CODE" => "",
"ELEMENT_ID" => $matches[1], // ID галереи найденный в теге #GALLARY_ID_xxx#
"FIELD_CODE" => array(
0 => "",
1 => "",
),
"IBLOCK_ID" => "5", //Код инфоблока галери
"IBLOCK_TYPE" => "news", //Тип инфоблока
"IBLOCK_URL" => "",
"INCLUDE_IBLOCK_INTO_CHAIN" => "N",
"MESSAGE_404" => "",
"META_DESCRIPTION" => "-",
"META_KEYWORDS" => "-",
"PAGER_BASE_LINK_ENABLE" => "N",
"PAGER_SHOW_ALL" => "N",
"PAGER_TEMPLATE" => ".default",
"PAGER_TITLE" => "Страница",
"PROPERTY_CODE" => array( // Свойства
0 => "",
1 => "MORE_PHOTO",
2 => "",
),
"SET_BROWSER_TITLE" => "N",
"SET_CANONICAL_URL" => "N",
"SET_LAST_MODIFIED" => "N",
"SET_META_DESCRIPTION" => "N",
"SET_META_KEYWORDS" => "N",
"SET_STATUS_404" => "N",
"SET_TITLE" => "N",
"SHOW_404" => "N",
"STRICT_SECTION_CHECK" => "N",
"USE_PERMISSIONS" => "N",
"USE_SHARE" => "N",
),
false
);
$retrunStr = @ob_get_contents();
ob_get_clean();
return $retrunStr;'),
$arResult["CACHED_TPL"]);
?>
Обратите внимание что вместо привычного $APPLICATION использовано $GLOBALS[«APPLICATION»], это нужно для видимости объекта внутри временной функции. Так же обратите внимание на $matches[1] это динамический параметр передаваемый в параметры вызова компонента news.detail, в нём содержится ID галереи.
Осталось поправить файл шаблона template.php, на второй сточке, сразу после проверки обращения к файлу добавляем:
<? ob_start(); ?>
а в конце кода:
<?
$this->__component->arResult["CACHED_TPL"] = @ob_get_contents();
ob_get_clean();
?>
Манипуляции с component_epilog.php сделаны чтобы обойти кеширование.
Теперь можно вставлять Фотогалерею в прямо в текст статьи или новости использую хештег #GALLERY_ID_122#. Можно добавить сниппет для удобства.
Количество просмотров: 533