Skip to main content

Gallery3xVideos

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

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

Возможности

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

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

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

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

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

  • Адаптивная сетка карточек
  • Превью с анимацией 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`
]]
Back to top