# Gallery3xVideos

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

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

---

## Возможности

- Вывод видео из текущего или указанных ресурсов
- Поддержка 8+ видеосервисов
- Автоматическая генерация встроенных плееров (iframe)
- Фильтрация по группам
- Сортировка и пагинация
- Поддержка Fenom шаблонов
- Красивые готовые чанки с анимацией
- Адаптивный дизайн

---

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

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

```
[[Gallery3xVideos]]
```

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

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

---

## Параметры

<table id="bkmrk-%D0%9F%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80-%D0%A2%D0%B8%D0%BF-%D0%9F%D0%BE-%D1%83%D0%BC%D0%BE%D0%BB"><thead><tr><th>Параметр</th><th>Тип</th><th>По умолчанию</th><th>Описание</th></tr></thead><tbody><tr><td>`tplOuter`</td><td>string</td><td>`tpl.Gallery3x.Video.outer`</td><td>Внешний чанк-обертка</td></tr><tr><td>`tplItem`</td><td>string</td><td>`tpl.Gallery3x.Video.item`</td><td>Чанк элемента (без Fenom)</td></tr><tr><td>`fenom`</td><td>bool</td><td>`0`</td><td>Использовать Fenom (1 или 0)</td></tr><tr><td>`resource`</td><td>int</td><td>текущий</td><td>ID ресурса</td></tr><tr><td>`resources`</td><td>string</td><td>-</td><td>ID ресурсов через запятую</td></tr><tr><td>`parents`</td><td>string</td><td>-</td><td>ID родителей (включая детей)</td></tr><tr><td>`limit`</td><td>int</td><td>`0`</td><td>Лимит выборки (0 = все)</td></tr><tr><td>`offset`</td><td>int</td><td>`0`</td><td>Смещение выборки</td></tr><tr><td>`group`</td><td>string</td><td>-</td><td>Фильтр по группам</td></tr><tr><td>`sortby`</td><td>string</td><td>`position`</td><td>Поле сортировки</td></tr><tr><td>`sortdir`</td><td>string</td><td>`ASC`</td><td>Направление (ASC/DESC)</td></tr><tr><td>`showInactive`</td><td>bool</td><td>`0`</td><td>Показывать неактивные</td></tr><tr><td>`debug`</td><td>bool</td><td>`0`</td><td>Режим отладки</td></tr></tbody></table>

---

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

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

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

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

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

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

- Адаптивная сетка карточек
- Превью с анимацией Play
- Бейджи сервисов
- Клик → переход на видео

---

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

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

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

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

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

- Все то же, что в варианте 1
- Обработка пустого состояния
- Более гибкая настройка
- Градиент для видео без превью

---

### 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`
]]
```

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

- Видео встроены на страницу
- Адаптивные iframe (16:9)
- Кнопка "Открыть на сервисе"
- Полная информация под видео

---

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

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

```
[[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?  
 &amp;resource=`\[\[\*id\]\]`  
 &amp;tplOuter=`example.Gallery3x.Video.Kinescope.fenom`  
 &amp;fenom=`1`  
 &amp;where=`{"service":"kinescope"}`  
\]\]  
<span class="markdown-bold-text" style="color: rgba(228, 228, 228, 0.92); font-family: 'Segoe WPC', 'Segoe UI', sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(24, 24, 24); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; font-weight: 600;">  
Стандартный синтаксис MODX</span><span style="color: rgba(228, 228, 228, 0.92); font-family: 'Segoe WPC', 'Segoe UI', sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(24, 24, 24); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> (отдельные чанки для обёртки и элемента):</span>  
\[\[!Gallery3xVideos?  
 &amp;resource=`\[\[\*id\]\]`  
 &amp;tplItem=`example.Gallery3x.Video.Kinescope`  
 &amp;where=`{"service":"kinescope"}`  
\]\]