Битрикс. Вывести галерею изображений в детальном описании элемента инфоблока

Иногда перед контент-менеджерами стоит задача выводить в произвольной части статьи какой-нибудь элемент, например слайдер с возможностью увеличить изображение нажатием мышки.

Удобный вариант такой вставки реализован в 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.phptemplate.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".BX_UTF_PCRE_MODIFIER,
  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#. Можно добавить сниппет для удобства.

Количество просмотров: 160


Понравилась статья?

Возврат к списку