Сниппеты

Gallery3x

Компонент Gallery3x поставляется с основным сниппетом [[!Gallery3x]], который отвечает за вывод изображений на страницах сайта. Сниппет разработан с упором на гибкость и производительность, позволяя создавать галереи любой сложности.

Ключевая особенность

Сниппет не создает превью "на лету". Он работает с уже готовыми, заранее сгенерированными изображениями, которые были созданы в админ-панели при загрузке файлов. Это обеспечивает максимальную скорость загрузки страниц для посетителей вашего сайта.


Сниппет [[!Gallery3x]]

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

Документация с добавленным новым параметром.

Параметр По умолчанию Описание
&resource ID текущего ресурса ID ресурса, из которого нужно вывести изображения. Используется, если &parents и &resources не заданы.
&parents null Список ID родительских ресурсов через запятую. Выбирает картинки из этих ресурсов и всех их дочерних. 0 — выборка со всего сайта.
&resources null Список ID ресурсов через запятую. ID с минусом (-) исключает ресурс. Имеет приоритет над &parents, если указаны положительные ID.
&tplOuter ... Имя чанка-обертки для сложных галерей (например, каруселей).
&tplThumb ... Имя чанка для элемента в ленте превью (используется вместе с tplOuter, игнорируется в режиме Fenom).
&fenom 0 Если установить в 1 и на сайте установлен pdoTools, сниппет будет работать в режиме Fenom. В этом режиме он не обрабатывает чанк &tplThumb, а передает в чанк &tplOuter сырой массив со всеми данными {$files}, который вы можете обработать в цикле {foreach}.
&limit 0 Ограничение на количество выводимых изображений. 0 — без ограничений.
&sortby position Поле для сортировки изображений. Можно сортировать и по дополнительным полям, например extra_num или extra_date.
&sortdir ASC Направление сортировки (ASC или DESC).
&showInactive 0 Если установить в 1, будут выводиться также и выключенные в админке изображения.
&where '' JSON-строка с дополнительными условиями выборки. Можно фильтровать и по доп-полям, например {"extra_num:>":2000}.
&debug 0 Если установить в 1, вместо галереи на странице будет выведен массив со всеми данными, которые сниппет подготовил.
&group
Фильтр по группе
&return
Определяет формат возвращаемых данных. (data, json, ids)
&toPlaceholder
Сохраняет данные в плейсхолдер вместо вывода. Сниппет возвращает пустую строку.

Доступные плейсхолдеры

Сниппет передает в чанк все поля из таблицы компонента, а также автоматически генерирует URL для всех существующих превью.

Дополнительные поля

Начиная с версии 3.2.1 у каждого изображения есть универсальные поля для нестандартных задач, которые заполняются в окне редактирования (вкладка «Дополнительно»): extra_text, extra_text2, extra_num, extra_date. Они доступны в чанках как обычные плейсхолдеры. Названия этих полей в админке можно переопределить в системных настройках компонента (область «Доп. поля: изображения»).

Поле даты хранится в формате datetime, поэтому при необходимости форматируйте его выводным модификатором:

[[+extra_date:strtotime:date=`%d.%m.%Y`]]

Те же поля доступны и в сниппетах Gallery3xVideos, Gallery3xFiles, Gallery3xEmbeds и Gallery3xMixed — они выводятся автоматически.

сниппет Gallery3x поддерживает параметры &return и &toPlaceholder, которые позволяют получать данные галереи в виде массива или JSON вместо готового HTML. Это особенно полезно при работе с Fenom-циклами, PdoPage с ajax-загрузкой, и для создания кастомной разметки.

Gallery3xVideos

Gallery3xVideos - Сниппет для вывода видео

Сниппет для вывода видеогалерей из различных сервисов: Rutube, YouTube, VK, Vimeo, Dailymotion, Coub, OK.ru, Яндекс.Дзен.


Возможности


Базовое использование

Простой вызов

[[Gallery3xVideos]]

С Fenom (рекомендуется)

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

Параметры

Параметр Тип По умолчанию Описание
tplOuter string tpl.Gallery3x.Video.outer Внешний чанк-обертка
tplItem string tpl.Gallery3x.Video.item Чанк элемента (без Fenom)
fenom bool 0 Использовать Fenom (1 или 0)
resource int текущий ID ресурса
resources string - ID ресурсов через запятую
parents string - ID родителей (включая детей)
limit int 0 Лимит выборки (0 = все)
offset int 0 Смещение выборки
group string - Фильтр по группам
sortby string position Поле сортировки
sortdir string ASC Направление (ASC/DESC)
showInactive bool 0 Показывать неактивные
debug bool 0 Режим отладки

Доступные чанки

1. tpl.Gallery3x.Video.outer + item (БЕЗ Fenom)

Базовая сетка видео для стандартного MODX.

Использование:

[[Gallery3xVideos?
    &tplOuter=`tpl.Gallery3x.Video.outer`
    &tplItem=`tpl.Gallery3x.Video.item`
]]

Особенности:


2. tpl.Gallery3x.Video.outer.fenom (С Fenom)

Все в одном чанке с Fenom. Рекомендуется!

Использование:

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

Особенности:


3. tpl.Gallery3x.Video.grid + item (компактная)

Компактная сетка для боковых панелей.

Использование:

[[Gallery3xVideos?
    &tplOuter=`tpl.Gallery3x.Video.grid`
    &tplItem=`tpl.Gallery3x.Video.grid.item`
    &limit=`6`
]]

Особенности:


4. tpl.Gallery3x.Video.embedded.fenom (встроенные плееры)

Видео воспроизводятся прямо на странице через iframe.

Использование:

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.embedded.fenom`
]]

Особенности:


Примеры использования

Видео текущего ресурса

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

Видео из нескольких ресурсов

[[Gallery3xVideos?
    &fenom=`1`
    &resources=`10,15,20`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

Видео из группы "Промо"

[[Gallery3xVideos?
    &fenom=`1`
    &group=`Промо`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

С лимитом (6 видео)

[[Gallery3xVideos?
    &fenom=`1`
    &limit=`6`
    &sortby=`createdon`
    &sortdir=`DESC`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

С пагинацией (pdoPage)

[[pdoPage?
    &element=`Gallery3xVideos`
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
    &limit=`12`
]]

[[!+page.nav]]

Встроенные видео на странице

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.embedded.fenom`
    &group=`Уроки`
]]

Доступные поля в чанках

Поля каждого видео (в tplItem или в цикле foreach)

БЕЗ Fenom (в tplItem):

[[+id]]               <!-- ID видео в БД -->
[[+resource_id]]      <!-- ID ресурса MODX -->
[[+url]]              <!-- Полная ссылка на видео -->
[[+title]]            <!-- Название видео -->
[[+description]]      <!-- Описание видео -->
[[+thumbnail]]        <!-- Путь к превью (относительный) -->
[[+thumbnail_url]]    <!-- Полный URL превью -->
[[+service]]          <!-- Сервис: youtube, rutube, vk, vimeo, dailymotion, coub, ok, dzen -->
[[+video_id]]         <!-- ID видео на сервисе -->
[[+group]]            <!-- Группа (или группы через ||) -->
[[+position]]         <!-- Позиция сортировки -->
[[+active]]           <!-- Активность: 1 (да) или 0 (нет) -->
[[+special]]          <!-- Особое: 1 (да) или 0 (нет) -->
[[+createdon]]        <!-- Дата создания -->
[[+createdby]]        <!-- ID создателя -->
[[+updatedon]]        <!-- Дата обновления -->
[[+updatedby]]        <!-- ID обновившего -->
[[+embed_html]]       <!-- HTML-код iframe плеера -->

С Fenom (в цикле foreach):

{$video.id}               {* ID видео в БД *}
{$video.resource_id}      {* ID ресурса MODX *}
{$video.url}              {* Полная ссылка на видео *}
{$video.title}            {* Название видео *}
{$video.description}      {* Описание видео *}
{$video.thumbnail}        {* Путь к превью (относительный) *}
{$video.thumbnail_url}    {* Полный URL превью *}
{$video.service}          {* Сервис: youtube, rutube, vk... *}
{$video.video_id}         {* ID видео на сервисе *}
{$video.group}            {* Группа (или группы через ||) *}
{$video.position}         {* Позиция сортировки *}
{$video.active}           {* Активность: 1 или 0 *}
{$video.special}          {* Особое: 1 или 0 *}
{$video.createdon}        {* Дата создания *}
{$video.createdby}        {* ID создателя *}
{$video.updatedon}        {* Дата обновления *}
{$video.updatedby}        {* ID обновившего *}
{$video.embed_html | unescape}  {* HTML-код iframe плеера *}

Дополнительные поля в tplOuter

В чанке tplOuter доступны следующие плейсхолдеры:

БЕЗ Fenom:

[[+items]]            <!-- Все видео, отрендеренные через tplItem -->
[[+total]]            <!-- Общее количество видео -->
[[+first.id]]         <!-- ID первого видео -->
[[+first.title]]      <!-- Название первого видео -->
[[+first.*]]          <!-- Любое поле первого видео (см. выше) -->

С Fenom:

{$videos}             {* Массив всех видео для foreach *}
{$total}              {* Общее количество видео *}
{$first.id}           {* ID первого видео *}
{$first.title}        {* Название первого видео *}
{$first.*}            {* Любое поле первого видео *}

Пример использования в tplOuter:

<div class="video-gallery">
    <p>Найдено видео: [[+total]]</p>
    
    [[+items]]  <!-- Здесь выводятся все видео -->
</div>

Реальные примеры

Страница "Видеогалерея"

<section class="videos-section">
    <h1>Наши видео</h1>
    
    [[Gallery3xVideos?
        &fenom=`1`
        &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
        &sortby=`position`
        &sortdir=`ASC`
    ]]
</section>

Боковая панель "Популярные видео"

<aside class="sidebar-widget">
    <h3>Популярные видео</h3>
    
    [[Gallery3xVideos?
        &tplOuter=`tpl.Gallery3x.Video.grid`
        &tplItem=`tpl.Gallery3x.Video.grid.item`
        &limit=`3`
        &sortby=`createdon`
        &sortdir=`DESC`
    ]]
</aside>

Страница курса с уроками

<div class="course-lessons">
    <h2>Уроки курса</h2>
    
    [[Gallery3xVideos?
        &fenom=`1`
        &tplOuter=`tpl.Gallery3x.Video.embedded.fenom`
        &group=`Урок 1,Урок 2,Урок 3`
    ]]
</div>

Главная страница (последние видео)

<section class="latest-videos">
    <div class="container">
        <h2>Новые видео</h2>
        
        [[Gallery3xVideos?
            &fenom=`1`
            &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
            &limit=`8`
            &sortby=`createdon`
            &sortdir=`DESC`
        ]]
        
        <a href="/videos/" class="btn-more">Все видео →</a>
    </div>
</section>

Несколько разделов на странице

<h2>Обучающие видео</h2>
[[Gallery3xVideos?
    &fenom=`1`
    &group=`Обучение`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

<h2>Отзывы клиентов</h2>
[[Gallery3xVideos?
    &fenom=`1`
    &group=`Отзывы`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]



Создание своего чанка

Скопируйте любой готовый чанк и измените под себя:

{* Мой кастомный чанк *}
<div class="my-videos">
    {foreach $videos as $video}
    <div class="my-video-card">
        <a href="{$video.url}" target="_blank">
            <img src="{$video.thumbnail_url}" alt="{$video.title}">
            <h3>{$video.title}</h3>
        </a>
    </div>
    {/foreach}
</div>

Используйте:

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`myCustomChunk`
]]

Отладка

Включите режим отладки чтобы увидеть все данные:

[[Gallery3xVideos?
    &debug=`1`
]]


Пример использования видео с "родным" плеером Kinescope

Fenom-версия (полная галерея в одном чанке):

[[!Gallery3xVideos?
    &resource=`[[*id]]`
    &tplOuter=`example.Gallery3x.Video.Kinescope.fenom`
    &fenom=`1`
    &where=`{"service":"kinescope"}`
]]

Стандартный синтаксис MODX
 (отдельные чанки для обёртки и элемента):
[[!Gallery3xVideos?
    &resource=`[[*id]]`
    &tplItem=`example.Gallery3x.Video.Kinescope`
    &where=`{"service":"kinescope"}`
]]

Gallery3xMixed

Объединённая галерея: изображения + видео

Компонент Gallery3x поддерживает объединённый вывод изображений и видео в одной галерее с группировкой!

Сниппет `Gallery3xMixed`

Объединяет изображения и видео с одного ресурса и выводит через Fenom-шаблон.

Параметры:
- `&resource` - ID ресурса (по умолчанию текущий)
- `&groupBy` - Поле для группировки (`group`, `resource_id`, пустое для отключения)
- `&sortby` - Поле сортировки (`position`, `createdon`, `id`)
- `&sortdir` - Направление сортировки (`ASC` / `DESC`)
- `&limit` - Ограничение количества элементов
- `&showInactive` - Показывать неактивные (0/1)
- `&tpl` - Шаблон вывода (по умолчанию `tpl.Gallery3x.Mixed.Fenom`)

---

Примеры использования

Вариант 1: Простой вызов с группировкой


[[!Gallery3xMixed?
    &resource=`[[*id]]`
    &groupBy=`group`
    &sortby=`position`
]]



Результат:
- Все изображения и видео текущего ресурса
- Сгруппированы по полю `group`
- Каждая группа выводится отдельным блоком

---

Вариант 2: Без группировки


[[!Gallery3xMixed?
    &resource=`[[*id]]`
    &groupBy=``
]]



Результат: плоский список всех медиафайлов без группировки

---

Вариант 3: Ограничение количества


[[!Gallery3xMixed?
    &resource=`[[*id]]`
    &groupBy=`group`
    &limit=`12`
]]



Результат: только первые 12 элементов

---

Вариант 4: Свой шаблон Fenom

Создайте свой чанк и укажите его:


[[!Gallery3xMixed?
    &resource=`[[*id]]`
    &groupBy=`group`
    &tpl=`tpl.My.Custom.Gallery`
]]



Пример кастомного шаблона `tpl.My.Custom.Gallery`:


{set $gallery = $_modx->getPlaceholder('myGallery')}

{if $gallery}
<div class="my-custom-gallery">
    {foreach $gallery as $groupName => $items}
        <section class="gallery-section">
            <h2>{$groupName}</h2>
            <div class="items-grid">
                {foreach $items as $item}
                    <div class="item {$item.media_type}">
                        {* unique_id выглядит как: img_5 или video_3 *}
                        <div class="item-id">{$item.unique_id}</div>
                        
                        {if $item.media_type == 'image'}
                            <img src="{$item.thumb}" alt="{$item.title}">
                            <p>{$item.name}</p>
                        {else}
                            <img src="{$item.thumb}" alt="{$item.title}">
                            <a href="{$item.url}">▶️ {$item.title}</a>
                            <p>Сервис: {$item.service}</p>
                        {/if}
                    </div>
                {/foreach}
            </div>
        </section>
    {/foreach}
</div>
{/if}

---

Структура возвращаемых данных

Каждый элемент содержит:

Общие поля:
- `unique_id` - уникальный ID (`img_5` или `video_3`)
- `media_type` - тип (`image` или `video`)
- `title` - название
- `thumb` - URL миниатюры
- `url` - URL оригинала
- `group` - группы через `||`
- `active` - активность (0/1)
- `position` - позиция для сортировки

Только для изображений:
- `name` - имя файла
- `file` - имя файла
- `path` - путь к файлу
- `original_url` - URL оригинала
- `small_url`, `medium_url`, `large_url` - размеры

Только для видео:
- `service` - видеохостинг (`rutube`, `youtube`, `vk`)
- `video_id` - ID видео на хостинге
- `description` - описание
- `duration` - длительность
- `author` - автор
- `thumbnail_url` - URL обложки


Gallery3xFiles

Gallery3xFiles

Сниппет для вывода файловых вложений ресурса на фронтенде сайта. Отображает файлы, загруженные через вкладку «Файлы G3x» в редакторе ресурса MODX. Поддерживает фильтрацию, сортировку, группировку и вывод через Fenom или стандартный синтаксис MODX.


Параметры

Параметр Тип По умолчанию Описание
resource int ID текущего ресурса ID ресурса, файлы которого выводятся
resources string Список ID ресурсов через запятую. Отрицательное значение исключает ресурс (например: 5,10,-3)
parents string ID родительских ресурсов через запятую. Выводятся файлы всех дочерних ресурсов (глубина до 10 уровней)
group string Фильтр по группе или нескольким группам через запятую. Поддерживается мультигруппа
limit int 0 Максимальное количество файлов. 0 — без ограничения
offset int 0 Смещение выборки (для пагинации)
sortby string position Поле сортировки: position, name, size, createdon, type
sortdir string ASC Направление сортировки: ASC или DESC
showInactive int 0 Показывать деактивированные файлы. 1 — показывать
where JSON Дополнительные условия xPDO-запроса в формате JSON. Например: {"type":"pdf"}
tplOuter string tpl.Gallery3x.Files.outer Чанк-обёртка всего списка
tplItem string tpl.Gallery3x.Files.item Чанк одного файла (используется при стандартном синтаксисе MODX)
fenom int 0 Использовать Fenom для рендеринга. Требует pdoTools. При 1 весь массив передаётся в tplOuter
return string Вернуть данные вместо HTML: data — PHP-массив, json — JSON-строка, ids — массив ID
toPlaceholder string Сохранить результат в указанный плейсхолдер вместо вывода на страницу
debug int 0 Режим отладки. При 1 выводит параметры запроса и данные найденных файлов

Доступные поля в шаблонах

Каждый элемент содержит следующие поля:

Поле Описание
id ID записи в базе данных
resource_id ID ресурса MODX
file Имя файла
path Относительный путь к папке файла
url Полный URL файла через медиасорс
name Заголовок файла (заданный вручную)
description Описание файла
type MIME-тип файла
ext Расширение файла в нижнем регистре (например, pdf, zip)
size Размер файла в байтах
size_formatted Размер файла в читаемом виде: 1.2 MB, 340 KB, 512 B
group Группы через разделитель || (внутренний формат хранения)
groups_list Группы через запятую (удобно для вывода в шаблоне)
active Активность: 1 — активен, 0 — скрыт
position Порядковый номер сортировки
createdon Дата загрузки (Unix timestamp)

В tplOuter дополнительно передаются:

Поле Описание
total Общее количество найденных файлов
first Массив данных первого файла (для быстрого доступа)
files Весь массив файлов (только при Fenom)
items Готовый HTML из всех tplItem (только при стандартном синтаксисе)

Примеры вызова

Минимальный (текущий ресурс, стандартный синтаксис):

[[!Gallery3xFiles]]

С Fenom:

[[!Gallery3xFiles?
    &tplOuter=`tpl.Gallery3x.Files.outer.fenom`
    &fenom=`1`
]]

Фильтр по группе, ограничение количества:

[[!Gallery3xFiles?
    &group=`документы`
    &limit=`10`
    &sortby=`name`
    &sortdir=`ASC`
]]

Файлы нескольких ресурсов:

[[!Gallery3xFiles?
    &resources=`5,10,15`
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Files.outer.fenom`
]]

Получить JSON (для JavaScript или Fenom-обработки):

[[!Gallery3xFiles?
    &return=`json`
]]

Сохранить в плейсхолдер:

[[!Gallery3xFiles?
    &toPlaceholder=`myFiles`
]]

Фильтрация через where (только PDF):

[[!Gallery3xFiles?
    &where=`{"type":"application/pdf"}`
]]

Gallery3xEmbeds

Компонент Gallery3x начиная с версии 3.2.1 поставляется со сниппетом [[!Gallery3xEmbeds]], который выводит на страницах сайта встраиваемые объекты (embed) — карты, виджеты, плееры и любой iframe-контент, добавленный во вкладке «Embed G3x» ресурса.

Ключевая особенность

Каждый embed добавляется в админке в одном из двух режимов:

Сниппет отдаёт в чанк уже готовый HTML embed в плейсхолдере [[+embed_html]] с адаптивной обёрткой (ширина 100%, высота из поля «Высота», по умолчанию 400px).


Сниппет [[!Gallery3xEmbeds]]

Основная задача — получить все активные embed указанного ресурса, отсортировать их и передать в чанки для оформления.

Параметр По умолчанию Описание
&resource ID текущего ресурса ID ресурса, из которого выводить embed. Используется, если &parents и &resources не заданы.
&parents null Список ID родительских ресурсов через запятую. Выбирает embed из них и всех дочерних. 0 — со всего сайта.
&resources null Список ID ресурсов через запятую. ID с минусом (-) исключает ресурс. Имеет приоритет над &parents.
&tplOuter tpl.Gallery3x.Embed.outer Чанк-обёртка всего списка.
&tplItem tpl.Gallery3x.Embed.item Чанк одного элемента (игнорируется в режиме Fenom).
&fenom 0 Если 1 и установлен pdoTools — режим Fenom. Чанк &tplItem не используется, а в &tplOuter передаётся массив {$embeds} для обработки в {foreach}.
&group '' Фильтр по группе (можно несколько через запятую).
&limit 0 Ограничение количества. 0 — без ограничений.
&offset 0 Сдвиг выборки (для постраничного вывода).
&sortby position Поле сортировки.
&sortdir ASC Направление сортировки (ASC или DESC).
&showInactive 0 Если 1 — выводятся и выключенные в админке embed.
&where '' JSON-строка с дополнительными условиями выборки.
&debug 0 Если 1 — вместо вывода показывается массив подготовленных данных.

Доступные плейсхолдеры

Сниппет передаёт в чанк все поля записи embed. Главный — [[+embed_html]] (готовый к выводу HTML).

Примеры

[[!Gallery3xEmbeds]]

Вывести все embed текущего ресурса.

[[!Gallery3xEmbeds?
  &group=`maps`]]

Только embed из группы maps.

[[!Gallery3xEmbeds? &resource=`15`
  &limit=`3`]]

Три embed с ресурса №15.

[[!Gallery3xEmbeds? &fenom=`1` &tplOuter=`
  tpl.Gallery3x.Embed.outer.fenom`]]

Режим Fenom — обработка массива {$embeds} в цикле внутри чанка-обёртки.

[[!Gallery3xEmbeds? &debug=`1`]]

Отладка — показывает все подготовленные данные.