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