Skip to content

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

Иногда перед контент-менеджерами стоит задача выводить в произвольной части статьи какой-нибудь интерактивный элемент, например слайдер или фотогалерею с возможностью увеличить изображение нажатием мышки. При этом контент-менеджер часто не обладает навыками вёрстки, которые позволили бы ему ограничится готовым сниппетом сладера или галереи и инструмента «медиабиблиотека». Удобный вариант такой вставки реализован в WordPress, когда в плагине фотогалереи менеджер может загрузить и отредактировать формат подготовленные фотографии, а в тело статьи в нужном месте вставить специальный код например [gallary_123] где 123 — это уникальный идентификатор той фотогалереи которую он только что создал и наполнил. Такой формат мы и реализуем на 1С Битрикс «Управление сайтом».

Создадим инфоблок фотогалерий

Итак, у меня установлено коробочное решение, «Мебельная компания» на основе редакции «Старт», на момент написания статьи, версия ядра 18.1.5. Создаём инфоблок со следующими основными настройками:

Настройки инфоблока
Основные настройки инфоблока галереи

Как видите настройки шаблонов URL адресов нам не нужны, оставляем название, символьный код и привязку к сайту. Так же обратите внимание что свойства инфоблока хранятся в отдельной таблице.

Настройки доступа

Во вкладке «Доступ» устанавливаем «Чтение» для всех пользователей, чтобы наши фотографии могли видеть все посетители сайта просматривающие новость с фотогалереей. Затем добавляем единственное свойство «Фотографии».

Свойство фотографии

Свойство должно быть множественным т.к. фотографий в галерее у нас может быть сколько угодно, а так же обязательным к заполнению (мы ведь не можем выводить пустую фотогалерею).

Дополнительные настройки свойства фотографии

В дополнительных настройках свойства «Фотографии» необходимо отметить флажёк «Выводить поле для описания значения», это нужно для того, чтобы контент-менеджер мог описать загружаемое изображение и позже пользователь мог видеть это описание при просмотре галереи. Та же я рекомендую ограничить тип загружаемых файлов, будем позволять грузить только изображение, защита от дурака так сказать. Инфоблок готов к использованию.

Давайте создадим тестовый элемент галереи для одной из существующих новостей и закинем несколько фотографий найденных в гугл по запросу «выставка мебели», у меня получилось следующее:

Тестовый элемент галереи

Если кто-то не знает как задать описание фотографии, щёлкните по значку карандаша под фото и во всплывающем окне заполните поле «Описание» вот так:

Описание фотографии

Можно готовить компонент галереи.

Готовим шаблон компонента фото-галереи

Т.к. наша галерея основана на инфоблоке, самым очевидным компонентом для её показа будет обычная детальная страница новости т.е. bitrix:news.detail. Создадим тестовый раздел и разместим там компонент  bitrix:news.detail, компонент необходимо настроить на работу с только что созданным инфоблоком «Фотогалерея», отключить все параметры устанавливающие заголовки и описания страницы, отключить показ всевозможных доп.свойств типа дата изменения элемента, детальное описание и т.п.

В свойстве «ID новости» можно сразу указать ID тестовой галереи, в моём случае это 33, это нужно для удобства настройки шаблона. В параметрах компонента в поле «Свойства», свойство MORE_PHOTO нужно указать вручную, его не будет в списке доступных свойств инфоблока т.к. это свойство типа «Файл»:

Свойство типа файл

Обязательно отключите режим Ajax в параметрах компонента!

Базовые настройки сделаны, можно сохранять и копировать шаблон компонента для последующей кастомизации. Я скопировал шаблон компонента bitrix:news.detail в дефолтный шаблон сайт и назвал его gallary, вам советую сделать так же чтобы не запутаться в дальнейшем:

Кастомизируем шаблон компонента

В качестве плагина для фотогалереи я предлагаю использовать всем хорошо знакомый Fancybox, который можно скачать с официального сайта http://fancyapps.com/fancybox/3/ в последней версии этот плагин предоставляет очень симпатичное оформление фотогалереи прямо из коробки.

Что необходимо подключить:

  • последнюю стабильную минифицированную версию JQuery
  • сам плагин jquery.fancybox.min.js
  • стили jquery.fancybox.min.css

Подключаем, файлы я предварительно раскидал по папкам css и js внутри папки шаблон /bitrix/templates/furniture_gray/

Теперь необходимо настроить сам шаблон. Идём в папку с шаблоном, у меня это /bitrix/templates/.default/components/bitrix/news.detail/gallary/ , здесь необходимо создать файл result_modifier.php в котором предварительно подготовить картинки к показу в галереи.

Всегда используйте конструкцию $this->__component->SetResultCacheKeys([‘CUSTOM_PROPERTY_KEY’]); для кеширования данных в result_modifier.php, так вы будете хранить в кеше строго-ограниченные данные, не переполняя его, чем сэкономите память и повысите быстродействие сайта.

И сам шаблон template.php:

Если вы всё подключили правильно галерея уже начнёт работать. Давайте добавим немного красоты путём стилизации наших классов gallary и gallary_item и изображений внутри. Для универсальности предлагаю использовать файл стилей компонента галереи. Пропишем следующий стиль:

 

Получается примерно такой эффект:

Стиль галереи

Внешний вид галереи после применения стилей. В реальности эффект более плавный

Ну что же, компонент готов, теперь можно заняться его вставкой в детальный текст элемента инфоблока, например новостной статьи.

Вставка галереи в тело статьи

Для начала нам нужно кастомизировать компонент 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 необходимо добавить следующий код для кеширования шаблона.

В файл component_epilog.php нужно вставить специальную конструкцию, которая будет искать в теле статьи «хеш-тег» #GALLARY_ID_123# где 123 — идентификатор галереи (элемента инфоблока) и подгружать на его место компонент галереи (который мы ранее настроили) с переданным в него ID-шником 123. Весь код выглядит так:

Обратите внимание что вместо привычного $APPLICATION использовано $GLOBALS[«APPLICATION»], это нужно для видимости объекта внутри временной функции. Так же обратите внимание на $matches[1] это динамический параметр передаваемый в параметры вызова компонента news.detail, в нём содержится ID галереи.

Осталось поправить файл шаблона template.php, на второй сточке, сразу после проверки обращения к файлу пишем код:

а в конце кода пишем:

Манипуляции с component_epilog.php сделаны чтобы обойти кеширование. Как вы уже поняли весь этот «финт» основан на манипуляции буфера вывода.

Вместо заключения

Теперь ваш контент-менеджер может без труда вставлять фото-галереи прямо в тело статьи и ему не нужно разбираться в вёрстке и стилях. Порядок действия теперь такой:

  1. Создание галереи в инфоблоке галерей, после сохранения менеджер запоминает ID элемента инфоблока ( в моём случае это ID 33)
  2. В нужном месте детального описания новости (инфоблок новости) необходимо вставить следующий код #GALLARY_ID_33#

Вставка галереи в тело статьи

Вставка галереи в тело статьи в форме редактирования элемента инфоблока. И вот результат:

Результат вставки галереи

Я думаю не надо объяснять что так можно вставлять что угодно, слайдеры, формы опроса, товарные предложения и т.д. Желаю удачи!

 

Понравилось? Поделись с друзьями:Share on VK
VK
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
ОпубликованоРазработка сайтов на 1С Битрикс

Оставьте первый комментарий!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Защита от ботов *

Оставляя комментарий на сайте, вы даёте согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
© it-svalka.ru 2013 - 2019 г. - Копирование материалов сайта запрещено.