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 обложки