Gallery3x

Компонент для MODX3
Купить и скачать можно тут: https://gallery3x.ru/

Демо сайт https://demog3x.ivan345.com/

Описание

Gallery3x — это современный компонент галереи изображений, разработанный эксклюзивно для MODX3. Он служит мощной и удобной альтернативой популярным решениям, которые не были обновлены для последней версии CMS.

Многие разработчики знают и любят отличный компонент ms2Gallery, который долгие годы был стандартом для создания галерей. Однако, он был создан для MODX2 и не имеет официальной поддержки в MODX3.

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

g3x.gif

Основные преимущества

Возможности в админ-панели (на странице ресурса)

Интерфейс галереи интегрируется в виде отдельной вкладки "Галерея G3" на странице редактирования ресурса и включает в себя:

Возможности на сайте (сниппет [[!Gallery3x]])

Компонент предоставляет один мощный и универсальный сниппет Gallery3x для вывода уже подготовленных изображений на сайте.

Установка и настройка

Быстрый старт

Это руководство поможет вам установить, настроить и вывести вашу первую галерею с помощью компонента Gallery3x за несколько простых шагов.

Шаг 1: Установка компонента

  1. Скачайте последнюю версию транспортного пакета Gallery3x.

  2. Перейдите в раздел Установщик в админ-панели MODX.

  3. Загрузите и установите скачанный пакет.

При установке компонент автоматически создаст все необходимые элементы: таблицы в базе данных, системные настройки, плагины и специальный Источник файлов "Gallery3x Source".

Обязательно должен быть установлен pdoTools

Шаг 2: Настройка

После установки нужно убедиться, что компонент будет работать на нужных страницах.

  1. Перейдите в Настройки → Системные настройки.

  2. В выпадающем списке "Пространство имен" выберите gallery3x.

  3. Найдите настройку gallery3x.templates.

  4. Впишите в неё через запятую ID шаблонов, на страницах с которыми вы планируете использовать галерею. Например: 1, 3, 5.

Важно: Если это поле останется пустым, вкладка "Галерея" не появится на страницах ресурсов.

Шаг 3: Загрузка изображений

  1. Откройте на редактирование любой ресурс, использующий один из шаблонов, указанных на предыдущем шаге.

  2. Вы должны увидеть новую вкладку "Галерея".

  3. Перейдите на неё и просто перетащите несколько изображений в область "Drop files here to upload".

  4. После загрузки вы сразу увидите сгенерированные миниатюры. Вы можете перетаскивать их, чтобы изменить порядок сортировки.

Шаг 4: Вывод галереи на сайте

Теперь выведем загруженные изображения на страницу.


Кастомизация чанков

Для изменения внешнего вида галереи рекомендуется не редактировать стандартные чанки компонента (tpl.Gallery3x...) напрямую. При обновлении Gallery3x все ваши изменения в этих файлах могут быть перезаписаны.

Самый правильный способ — создать копию стандартного чанка, дать ей уникальное имя (например, tpl.mysite.gallery.item) и уже в ней производить все необходимые изменения. Затем просто укажите имя вашего нового чанка в вызове сниппета.


Подключите библиотеки В шаблоне вашей страницы подключите стили и скрипты для галереи fancybox 

   Пример "Ленты с превью"

Пример "Ленты с превью" с fenom

Настройки компонента

Все настройки компонента Gallery3x находятся в админ-панели MODX в разделе Настройки → Системные настройки. В выпадающем списке "Пространство имен" выберите gallery3x, чтобы увидеть все доступные опции.

Настройки разделены на логические группы для удобства управления.

Основные настройки

то ключевые параметры, которые определяют, где компонент будет работать и хранить файлы.

Ключ Название Описание
gallery3x.source_id Источник файлов Укажите ID источника файлов (Media Source), где будут храниться изображения. Обычно компонент создает свой источник при установке и прописывает его ID автоматически.
gallery3x.driver Драйвер обработки Библиотека для обработки изображений на сервере.
Варианты: imagick (рекомендуется) или gd.
gallery3x.templates Активные шаблоны Список ID шаблонов через запятую (например: 1, 3, 5). Вкладка "Галерея" появится только у ресурсов с этими шаблонами. Если пусто — вкладка скрыта.
gallery3x.format Формат конвертации Формат, в который будут автоматически конвертироваться все загружаемые изображения. По умолчанию: webp.
gallery3x.filters Глобальные фильтры Строка фильтров phpThumb, применяемая ко всем изображениям.
Пример: greyscale (ч/б) или blur=5.
gallery3x.watermark_path Путь к водяному знаку Путь к файлу картинки от корня сайта. Оставьте пустым, чтобы отключить водяной знак.
Пример: assets/images/logo.png.
gallery3x.watermark_position Позиция водяного знака Расположение водяного знака на изображении.
Варианты: top-left, top-center, top-right, center, bottom-left, bottom-center, bottom-right.
gallery3x.watermark_padding Отступ водяного знака Отступ от края изображения в пикселях. По умолчанию: 10.
gallery3x.ignore_template_source Игнорировать источник шаблона Если Да, галерея всегда использует источник из настройки gallery3x.source_id, игнорируя настройки медиа-источников, привязанные к TV или контексту.
gallery3x.new_file_position Позиция новых файлов Определяет, куда добавляются свежезагруженные файлы.
end — в конец списка,
start — в начало списка.
gallery3x.per_page Элементов на странице Количество изображений, отображаемых на одной странице в админ-панели (пагинация). По умолчанию: 30.
gallery3x.collections_thumb_size Размер превью в Collections Размер миниатюры при просмотре через компонент Collections.
Варианты: small, medium, large.
gallery3x.video_enable Включить видео Активирует вкладку "Видеогалерея" для добавления ссылок с YouTube, VK, Rutube.
gallery3x.groups_per_user Изоляция групп Если Да, каждый менеджер видит и управляет только теми группами (тегами), которые создал сам. Если Нет — группы общие.

 



Генерация превью

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

Ключ Название Описание
gallery3x.format Формат превью Укажите формат, в который будут конвертироваться все превью (например, webp, avif, jpg). Оставьте пустым, чтобы сохранить оригинальный формат файла.
gallery3x.filters Фильтры изображений Позволяет применить один или несколько фильтров к превью. Фильтры перечисляются через | (Вертикальная черта)
gallery3x.watermark_path Путь к водяному знаку Путь к файлу водяного знака от корня сайта. Пример: assets/images/watermark.png. Оставьте пустым, чтобы отключить.
gallery3x.watermark_position Позиция водяного знака Расположение водяного знака. Возможные значения: top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right.
gallery3x.watermark_padding Отступ водяного знака Отступ водяного знака от краев изображения в пикселях.

Плейсхолдеры изображений

Эта группа настроек управляет функцией автоматического вывода плейсхолдеров изображений на страницах сайта (аналог функции из ms2Gallery).

Ключ Название Описание
gallery3x.set_placeholders Включить плейсхолдеры на сайте Главный переключатель. Установите в "Да", чтобы плагин начал создавать плейсхолдеры [[+g3x.0]], [[+g3x.1.url]] и т.д. Включайте, только если это действительно нужно.
gallery3x.placeholders_tpl Чанк для плейсхолдеров Имя чанка для оформления плейсхолдера [[+g3x.N]]. Если пусто, будет выведен массив данных. Поддерживается Fenom.
gallery3x.placeholders_for_templates Включить для шаблонов Список ID шаблонов через запятую, для которых будет работать эта функция. Если пусто — работает для всех.
gallery3x.placeholders_thumbs Размеры превью для плейсхолдеров Список размеров превью через запятую, которые нужно выбирать (например, small,medium). Это экономит ресурсы.

Настройки имен файлов

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

Ключ Название Описание
gallery3x.filename_as_hash Использовать хеш в качестве имени файла Если "Да", имя файла будет заменено на его MD5-хеш (например, a1b2c3d4...jpg). Гарантирует уникальность, но делает имена нечитаемыми. Имеет наивысший приоритет.
gallery3x.filename_translit Транслитерировать имена файлов Если "Да", кириллические символы будут заменены на латиницу. Пример: Фото.jpg → foto.jpg.
gallery3x.filename_sanitize Очищать имена файлов от спецсимволов Если "Да", все спецсимволы (кроме букв, цифр, - и _) будут удалены. Пробелы заменяются на дефис. Пример: мой файл (1)!.jpg → moy-fayl-1.jpg.
gallery3x.filename_lowercase Приводить имена файлов к нижнему регистру Если "Да", все имена и расширения будут преобразованы в нижний регистр. Пример: MyPhoto.JPG → myphoto.jpg.

Контроль доступа

У администраторов должны быть права на создание и сохранение (ну или "неограниченные права у администратора")

Screenshot_2.jpg



Генерация превью

Gallery3x использует продвинутый подход к обработке изображений, который обеспечивает высокую производительность сайта и отличное качество миниатюр.

Преимущество генерации в админ-панели

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

Это дает огромное преимущество в производительности:

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

Настройка генерации

Настройка разделена на две части:

  1. Основные параметры (размеры) — задаются в Источнике файлов.

  2. Глобальные эффекты (фильтры, водяной знак) — задаются в Системных настройках.

Основные параметры (в Источнике файлов)

Все размеры превью, которые должен создавать компонент, настраиваются в вашем Источнике файлов "Gallery3x Source".

  1. Перейдите в Медиа → Источники файлов.

  2. Откройте "Gallery3x Source".

  3. Перейдите на вкладку "Свойства источника файлов".

  4. Найдите параметр gallery3x_thumbnails.

Этот параметр принимает JSON-строку, которая описывает каждый необходимый размер превью.

Пример JSON:

JSON 

[
  {"name": "small", "w": 150, "h": 100, "fit": "crop-center", "q": 80},
  {"name": "medium", "w": 400, "h": 300, "fit": "contain"},
  {"name": "big", "w": 1200}
]

Параметры расшифровываются так:

Глобальные эффекты (в Системных настройках)

Эти настройки находятся в Настройки → Системные настройки, пространство имен gallery3x. Они применяются ко всем превью, которые генерирует компонент.

Наложение водяного знака (Watermark)

Фильтры и формат

Сниппеты

Сниппеты

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 — без ограничений.
&offset
Пропуск результатов с начала выборки
&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`]]

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

Плейсхолдеры изображений

Функция "Плейсхолдеры изображений" — это мощный инструмент, который позволяет выводить изображения из галереи напрямую в контенте или шаблоне ресурса, не вызывая сниппет.

Специальный плагин один раз подготавливает все данные и делает их доступными в виде простых плейсхолдеров, таких как [[+g3x.0]] или [[+g3x.1.url]].

Как это работает

При загрузке страницы на сайте плагин, работающий на событии OnLoadWebDocument, выполняет следующие действия:

  1. Проверяет, включена ли эта функция в системных настройках.

  2. Если да, он находит все активные изображения для текущего ресурса, сортируя их по полю position.

  3. Для каждого найденного изображения создается набор плейсхолдеров, которые MODX может использовать при обработке страницы.

Системные настройки

Для управления этой функцией используются четыре системные настройки в пространстве имен gallery3x.

1. Включить плейсхолдеры на сайте

2. Чанк для плейсхолдеров

3. Включить для шаблонов

4. Размеры превью для плейсхолдеров

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

Предположим, вы загрузили в галерею 3 картинки.

1. Простой вывод

Вы можете вставить эти плейсхолдеры прямо в контент ресурса или в его шаблон:

2. Вывод с форматированием (через чанк)

Это основной способ использования.

  1. Создайте чанк, например, tpl.Gallery3x.placeholderItem со следующим кодом:

    HTML 
    <a href="[[+url]]" class="image-link">
    <img src="[[+medium]]" alt="[[+alt]]" title="[[+name]]">
</a>

  2. В системной настройке gallery3x.placeholders_tpl укажите имя этого чанка: tpl.Gallery3x.placeholderItem.

  3. Теперь вы можете вставлять в контент просто [[+g3x.0]], [[+g3x.1]] и т.д., и они будут автоматически обернуты в HTML из вашего чанка.

3. Продвинутое использование (с Fenom)

Если на сайте используется Fenom, вы можете легко перебрать все изображения в цикле прямо в шаблоне:

{if $_modx->resource.g3x.0}
    <div class="product-gallery">
        <div class="main-image">
            <img src="{$_modx->resource['g3x.0.medium']}" alt="{$_modx->resource['g3x.0.alt']}">
        </div>
        <div class="thumbnails">
            {for $i = 0 to 10}
                {if $_modx->resource["g3x.{$i}.small"]}
                    <img src="{$_modx->resource["g3x.{$i}.small"]}" alt="">
                {/if}
            {/for}
        </div>
    </div>
{/if}

Примеры

Примеры

Lightgallery

Примеры

Fancybox

Демо сайт https://demog3x.ivan345.com/, примеры с Fancybox

Примеры

pdoResources

Пример использования pdoResources, выводит ресурсы MODX, а в качестве изображения используется 1 изображения из галереи.

[[!pdoResources?
    
    
    &tpl=`ListRowTpl`
    &includeContent=`1`
    &leftJoin=`{
        "Image": {
            "class": "Gallery3x\\Model\\Gallery3xFile",
            "on": "modResource.id = Image.resource_id AND Image.position = 0 AND Image.active = 1"
        }
    }`
    &select=`{
        "modResource": "*",
        "Image": "Image.id as image_id, Image.alt as image_alt"
    }`
]]

Чанк ListRowTpl

 

{* Вызываем сниппет g3xGetImage, передавая ему ID картинки *}
{set $image_url = $_pls['image_id'] | g3xGetImage : 'small'}
{set $uri = $_modx->makeUrl($_pls.id)}

<div class="catalog-item">
    {$image_url}
    {if $image_url}
        <a href="{$uri = $_modx->makeUrl($_pls.id)}">
            <img src="{$image_url}" alt="{$_pls['image_alt'] ?: $_pls['pagetitle']}">
        </a>
    {else}
        <a href="{$_pls.uri}">
            <img src="/assets/images/no-image.png" alt="{$_pls.pagetitle}">
        </a>
    {/if}

    <h3><a href="{$uri}">{$_pls.pagetitle}</a></h3>
    <p>{$_pls.introtext}</p>
</div>
Примеры

Интеграция с компонентом Collections

Вот как выводить превью первого изображения из галереи Gallery3x прямо в таблице дочерних ресурсов компонента Collections.

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

Подключение JS-рендера в системных настройках

Screenshot_1.jpg

Теперь нужно "сказать" компоненту Collections, чтобы он загружал JS-файл.

  1. Перейдите в Настройки (⚙️) → Системные настройки.

  2. В фильтре выберите пространство имен collections.

  3. Найдите ключ collections.user_js (Пользовательский JS-файл).

  4. Впишите в него путь к файлу: /assets/components/gallery3x/js/mgr/misc/renderers.js

Настройка колонки в Collections

Это финальный шаг, где мы связываем всё вместе.

  1. Перейдите на ресурс-контейнер и откройте настройки вида Collections (вкладка "Дочерние ресурсы" → ⚙️).

  2. Откройте на редактирование или создайте новую колонку со следующими параметрами:

    • Заголовок: Превью

    • Название: g3xCollectionsThumbnail

    • Рендерер: Gallery3x.renderer.image

    • Сниппет-рендер: g3xCollectionsThumbnail

    • Screenshot_2.jpg


      Результат:

      Screenshot_3.jpg


Работа из командной строки (CLI)

Работа из командной строки (CLI)

regenerate.php

Компонент Gallery3x включает в себя скрипты для выполнения задач обслуживания и массовой обработки данных напрямую из консоли (терминала) вашего сервера по SSH. Это гораздо быстрее и эффективнее для больших объемов данных, чем выполнение тех же действий через браузер.

Перегенерация всех превью

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

Для этой задачи предназначен скрипт regenerate.php.

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

  1. Подключитесь к вашему серверу по SSH.

  2. Перейдите в корневую директорию вашего сайта MODX (там, где находится папка core).

  3. Выполните следующую команду:

    Bash 
    php core/components/gallery3x/cli/regenerate.php

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

MODX Initialized. Starting regeneration...
Found 58 files to process.

Processing file ID: 1 (Resource: 2, Filename: photo1.jpg)
Processing file ID: 2 (Resource: 2, Filename: photo2.webp)
...
Processing file ID: 58 (Resource: 15, Filename: another.png)

----------------------------------------
Done! Regenerated thumbnails for 58 of 58 files.
Site cache has been cleared.

После завершения работы скрипта все превью для всех изображений в компоненте Gallery3x будут пересозданы с учетом самых последних настроек. В конце скрипт автоматически очистит кеш сайта.

Работа из командной строки (CLI)

import_ms2gallery.php

Импорт из ms2Gallery

Компонент Gallery3x включает в себя консольный скрипт для миграции изображений из старого компонента ms2Gallery. Это позволяет легко и быстро перенести все существующие галереи на новый, современный движок Gallery3x при переезде с MODX 2 на MODX 3.

Ключевая особенность: Скрипт работает, даже если вы уже удалили пакет ms2Gallery из админ-панели. Главное, чтобы его таблица (modx_ms2_resource_files) и физические файлы остались на сервере.

Использование скрипта

Подготовка к импорту

Перед запуском убедитесь, что:

  1. Старая таблица ms2Gallery (обычно префикс_ms2_resource_files) все еще существует в вашей базе данных.

  2. Физические файлы, загруженные через ms2Gallery, все еще находятся на сервере.

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

Вся настройка производится прямо в файле скрипта.

  1. Откройте файл скрипта в текстовом редакторе. Он находится по пути: /core/components/gallery3x/cli/import_ms2gallery.php

  2. Настройте параметры в самом верху файла:

    PHP 

    // ===================================================================
// --- НАСТРОЙКИ ИМПОРТА: Укажите ваши значения здесь ---
// ===================================================================

// ID ресурса для импорта. Укажите 0, чтобы импортировать для ВСЕХ ресурсов.
$resourceId = 0;

// "Сухой" запуск. 
// true  - скрипт только покажет, какие файлы он нашел, но ничего не будет импортировать.
// false - скрипт выполнит реальный импорт.
$isDryRun = true;

  3. Запустите скрипт из консоли (терминала) по SSH. Сначала всегда запускайте в "сухом" режиме, чтобы убедиться, что скрипт правильно находит ваши файлы. Для этого $isDryRun должен быть true.

    • Перейдите в корневую директорию вашего сайта.

    • Выполните команду:

      Bash 

      php core/components/gallery3x/cli/import_ms2gallery.php

    • Вы увидите в консоли отчет о том, сколько файлов найдено для импорта.

  4. Запустите реальный импорт.

    • Если "сухой" запуск прошел успешно, измените в файле скрипта $isDryRun = false;.

    • Сохраните файл и выполните ту же команду в консоли еще раз.

    Начнется процесс копирования файлов, создания записей в базе и генерации превью.


    MODX Initialized. Starting ms2Gallery import...
Found 150 files to process.

Processing file: /path/to/site/assets/images/products/12/photo1.jpg
 -> SUCCESS: Imported to Gallery3x file ID 210

Processing file: /path/to/site/assets/images/products/12/photo2.jpg
 -> SUCCESS: Imported to Gallery3x file ID 211
...
----------------------------------------
SUCCESS: Imported 150 of 150 found files.
Site cache has been cleared.

После импорта

  1. Проверьте результат: Зайдите в админ-панели на страницы ресурсов и убедитесь, что изображения появились во вкладке "Галерея" компонента Gallery3x.

  2. Проверьте сайт: Убедитесь, что галереи на сайте отображаются правильно.

  3. Очистка (опционально): Когда вы будете полностью уверены, что миграция прошла успешно, вы можете вручную удалить старую таблицу modx_ms2_resource_files из базы данных, чтобы она не занимала место.

Для разработчиков

Для разработчиков

Структура Базы Данных

Структура Базы Данных (Для разработчиков)

 

Компонент Gallery3x хранит данные в двух отдельных таблицах: одна для файлов (изображений) и одна для видео. Такое разделение позволяет гибко управлять каждым типом данных.

Вы можете взаимодействовать с этими таблицами, используя xPDO и соответствующие классы модели.

 

Таблица Файлов (gallery3x_files)

 

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

 

 

Ключ (Поле) Тип Данных Описание
id integer Уникальный ID записи
resource_id integer ID ресурса MODX, к которому привязан файл.
source_id integer ID источника файлов (modMediaSource).
parent_id integer Зарезервировано для будущих функций.
name string Название файла (может быть отредактировано).
description string Описание файла.
alt string ALT-тег изображения.
path string Путь к файлу внутри источника (напр. 15/).
file string Имя файла (напр. image.jpg).
type string MIME-тип файла (image/jpeg).
size integer Размер файла в байтах.
position integer Позиция для сортировки.
group string (Новое) Группа (тег) для файла (напр. "Интерьер").
properties json JSON-массив с данными (превью, размеры).
createdon datetime Дата создания.
createdby integer ID пользователя, создавшего запись.
updatedon datetime Дата последнего обновления.
updatedby integer ID пользователя, обновившего запись.
active boolean Статус (1 = активен, 0 = скрыт).
hash string Хеш файла для проверки на дубликаты.
special boolean (Новое) Статус "Особенное" (1 = да, 0 = нет).

 

Таблица Видео (gallery3x_videos)

 

Здесь хранятся ссылки на видео и связанные с ними данные.

 

 

Ключ (Поле) Тип Данных Описание
id integer Уникальный ID записи
resource_id integer ID ресурса MODX, к которому привязано видео.
url string Полная ссылка на видео (YouTube, VK и т.д.).
title string Название видео (вводится пользователем).
description string Описание видео.
thumbnail string Путь к файлу превью (загружается вручную).
position integer Позиция для сортировки.
group string Группа (тег) для видео.
service string На будущее: Сервис видео (youtube, vk).
video_id string На будущее: ID видео на сервисе.
createdon datetime Дата создания.
createdby integer ID пользователя, создавшего запись.
updatedon datetime Дата последнего обновления.
updatedby integer ID пользователя, обновившего запись.
active boolean Статус (1 = активен, 0 = скрыт).
special boolean Статус "Особенное" (1 = да, 0 = нет).
Для разработчиков

Группы (теги) для фотографий

Группы (теги) для фотографий

Описание

Начиная с версии **3.0.17**, Gallery3x поддерживает группировку фотографий с помощью групп (тегов). Одной фотографии можно присвоить несколько групп одновременно, что позволяет гибко организовывать и фильтровать изображения.

Ключевые особенности:
✅ Множественный выбор групп для одной фотографии
✅ Глобальные группы доступны во всех галереях компонента
✅ Быстрая фильтрация по группам в панели управления
✅ Массовое присвоение групп выбранным фотографиям
✅ Удобный интерфейс с визуальными "таблетками"

---

Создание групп

Группы создаются динамически при редактировании фотографий. Для создания новой группы:

1. Откройте контекстное меню на фотографии (правый клик)
2. Выберите "Изменить свойства"
3. В поле "Группа" начните вводить название группы (например, "Пейзаж")
4. ⚠️ ОБЯЗАТЕЛЬНО нажмите клавишу `Enter` — группа превратится в "таблетку" с крестиком
5. Повторите для добавления других групп
6. Нажмите "Сохранить"

> 💡 Важно: Без нажатия `Enter` группа не будет создана! После нажатия `Enter` вы увидите, что текст превратился в цветную "таблетку" — это означает, что группа добавлена.

---

Присвоение групп одной фотографии

Способ 1: Через свойства фотографии

1. Правый клик на фотографии → "Изменить свойства"
2. В поле "Группа" введите название и нажмите `Enter`
3. Добавьте еще группы (каждый раз нажимая `Enter`)
4. Нажмите "Сохранить"

Способ 2: Выбор существующих групп

1. Правый клик на фотографии → "Изменить свойства"
2. Кликните в поле "Группа" — откроется выпадающий список
3. Выберите существующие группы из списка (они уже созданы ранее)
4. Или введите новую группу и нажмите `Enter`
5. Нажмите "Сохранить"

---

Массовое присвоение групп

Вы можете присвоить группы сразу нескольким фотографиям:

1. Выделите несколько фотографий (удерживая `Ctrl` или `Shift`)
2. Правый клик → "Установить группу..."
3. В открывшемся окне выберите или создайте группы (не забывайте нажимать `Enter`)
4. Нажмите "Сохранить"
5. Группы будут **добавлены** к уже существующим группам этих фотографий

---

Фильтрация по группам

В верхней панели галереи находится фильтр по группам:

1. Откройте выпадающий список **"Фильтр по группе:"**
2. Выберите нужную группу
3. Галерея покажет только фотографии с этой группой
4. Для сброса фильтра нажмите кнопку **"Сбросить"**

---

Удаление групп

Удаление группы у фотографии:

1.Правый клик на фотографии → "Изменить свойства"
2. Нажмите **крестик (×)** на "таблетке" нужной группы
3. Нажмите **"Сохранить"**

Удаление группы полностью:

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

---

Где отображаются группы

- В админке: Под каждой фотографией показываются все её группы через запятую
- В базе данных: Группы хранятся в поле `group` таблицы `gallery3x_files` через разделитель `||` (стандарт MODX)

---

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

Пример 1: Организация по темам
- Создайте группы: `Природа`, `Архитектура`, `Люди`, `Животные`
- Присвойте фотографиям соответствующие группы
- Используйте фильтр для быстрого поиска нужной категории

Пример 2: Множественная классификация
- Фотографии могут иметь несколько групп: `Зима`, `Пейзаж`, `Закат`
- Это позволяет находить фото по разным критериям

Пример 3: Массовая работа
- Выделите 20 фотографий с одного мероприятия
- Присвойте им группу `Конференция 2025`
- Добавьте дополнительную группу `Корпоратив` некоторым из них

---

Часто задаваемые вопросы (FAQ)

Q: Я ввожу название группы, но она не сохраняется. Почему?
A: Вы забыли нажать клавишу **`Enter`** после ввода названия. Группа должна превратиться в "таблетку" с крестиком.

Q: Группы, созданные в одной галерее, видны в другой?
A: Да! Группы теперь глобальные и доступны во всех галереях компонента.

Q: Можно ли переименовать группу?
A: Нет, но вы можете удалить старую группу у всех фотографий и создать новую с нужным названием.

Q: Сколько групп можно присвоить одной фотографии?
A: Неограниченное количество.

---

Технические детали

- Формат хранения: Группы хранятся в поле `group` через разделитель `||` (например: `Природа||Пейзаж||Зима`)
- Компонент UI:Используется стандартный MODX SuperBoxSelect
- Процессоры: `File/GetGroups`, `File/BulkSetGroup`, `File/Update`

Для разработчиков

Кастомизация процессора получения групп (тэгов)



Как создать свой процессор: 


Пример: Фильтрация по resource_id (Что группы были для каждого ресурса свои и не повторялись в других)
Создайте файл: в core/components/gallery3x/src/Processors/GetGroupsByResource.php

<?php
namespace Gallery3x\Processors;
use Gallery3x\Model\Gallery3xFile;

class GetGroupsByResource extends GetGroupsCombined
{
    public function process()
    {
        $resourceId = $this->getProperty('resource_id');
        $allGroups = [];

        // Только для текущего ресурса
        $fileTableName = $this->modx->getTableName(Gallery3xFile::class);
        $sql = "SELECT DISTINCT `group` FROM {$fileTableName} 
                WHERE `group` IS NOT NULL 
                AND `group` != '' 
                AND `resource_id` = :resource_id
                ORDER BY `group` ASC";

        $stmt = $this->modx->prepare($sql);
        $stmt->bindValue(':resource_id', $resourceId);

        if ($stmt->execute()) {
            while ($row = $stmt->fetch(\PDO::FETCH_ASSOC)) {
                $groupsInRow = explode('||', $row['group']);
                foreach ($groupsInRow as $group) {
                    $group = trim($group);
                    if (!empty($group)) {
                        $allGroups[] = $group;
                    }
                }
            }
        }

        // То же для видео...

        $uniqueGroups = array_unique($allGroups);
        sort($uniqueGroups);

        $groups = [];
        foreach ($uniqueGroups as $group) {
            $groups[] = ['name' => $group];
        }

        return $this->success('', ['results' => $groups, 'total' => count($groups)]);
    }
}
Затем в настройках:


gallery3x.groups_processor = Gallery3x\Processors\GetGroupsByResource

API интеграции

API интеграции

API VK.com

Почему-то не всем юзерам VK выдает разрешение использовать API, предупреждаю сразу

Для работы с API VK нужно сделать
1) Создать приложение по адресу https://id.vk.com/about/business/go/ Нужно расширить свой аккаунт до  "Бизнес" я подтвердил его через гос. услуги как физ. лицо.

vk1.jpg

vk2.jpg


2) При создании приложения указываете свой базовый домен 

Домен: moydomen.ru
Доверенный Redirect URL: https://moydomen.ru/assets/components/gallery3x/vk-callback.php (нужно к домену добавить assets/components/gallery3x/vk-callback.php)

3) После создания приложения, запишите id приложение его нужно вписать в настройках компонента.

Самый главный шаг нужно написать в тех. поддержку в контакте https://vk.com/dont_panic_42

Вот пример такого запроса:

Здравствуйте, команда поддержки ВКонтакте!

Я обращаюсь к вам с просьбой рассмотреть и одобрить добавление права доступа (scope) video для моего приложения:


ID приложения: [ВАШ ID ПРИЛОЖЕНИЯ]
Сайт, на котором используется: [АДРЕС ВАШЕГО САЙТА, например: https://my-site.ru]
Обоснование (Зачем нам это нужно):
Наш сайт работает на CMS MODX Revolution, и мы используем компонент "Gallery3x" для управления фото- и видеогалереями. Этот компонент позволяет нашим контент-менеджерам легко добавлять видео из VK на страницы сайта.
Для максимального удобства наших редакторов компонент использует метод video.get.


Как это будет работать:
1.    Наш контент-менеджер вставляет в админ-панели сайта публичную ссылку на видео из VK.
2.    Наш сервер (через компонент) делает однократный вызов video.get, чтобы получить публичные метаданные этого видео: title (название), description (описание) и image (обложку).
3.    Эти данные автоматически заполняют поля в нашей админ-панели. Это избавляет редактора от необходимости копировать все вручную и сильно экономит время.
Нам требуется доступ только для чтения (read-only) метаданных публичных видео. Мы не планируем загружать, редактировать, удалять или комментировать видео от имени пользователей.


Предоставление доступа video для нашего приложения позволит нам эффективнее использовать контент из VK на нашем сайте.
Прошу рассмотреть возможность одобрения scope: 'video'.
Спасибо!




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

otvet.jpg


Как разрешение одобрят, нужно нажать кнопку "авторизироваться в vk" в отдельной вкладке возле видеогалереи

vk31.jpg