Gallery3xVideos

Gallery3xVideos — video output snippet

A snippet for video galleries from various services: Rutube, YouTube, VK, Vimeo, Dailymotion, Coub, OK.ru, Yandex Dzen, Kinescope.

The “Video G3x” tab in the resource editor is enabled by the gallery3x.video_enable setting. The video link is pasted in the tab — the service, ID, title, description and cover are detected automatically.

Features

• Output videos of the current or specified resources
• 9 video services: YouTube, Rutube, VK, Vimeo, Dailymotion, Coub, OK.ru, Dzen, Kinescope
• Automatic embedded players (iframe)
• Filtering by groups
• Sorting and pagination
• Fenom template support
• Nice ready-made chunks with animation
• Responsive design

Basic usage

Simple call

[[Gallery3xVideos]]

With Fenom (recommended)

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

Parameters

Available chunks

1. tpl.Gallery3x.Video.outer + item (WITHOUT Fenom)

A basic video grid for standard MODX.

Usage:

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

Features:

• Responsive card grid
• Thumbnail with a Play animation
• Service badges
• Click → go to the video

2. tpl.Gallery3x.Video.outer.fenom (WITH Fenom)

Everything in one Fenom chunk. Recommended!

Usage:

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

Features:

• Everything from option 1
• Empty state handling
• More flexible customisation
• Gradient for videos without a thumbnail

3. tpl.Gallery3x.Video.grid + item (compact)

A compact grid for sidebars.

Usage:

[[Gallery3xVideos?
    &tplOuter=`tpl.Gallery3x.Video.grid`
    &tplItem=`tpl.Gallery3x.Video.grid.item`
    &limit=`6`
]]

Features:

• More compact cards
• Simplified information
• Suitable for widgets

4. tpl.Gallery3x.Video.embedded.fenom (embedded players)

Videos play right on the page in an iframe.

Usage:

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

Features:

• Videos are embedded in the page
• Responsive iframes (16:9)
• “Open on the service” button
• Full information below the video

Usage examples

Videos of the current resource

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

Videos from several resources

[[Gallery3xVideos?
    &fenom=`1`
    &resources=`10,15,20`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

Videos from the “Promo” group

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

With a limit (6 videos)

[[Gallery3xVideos?
    &fenom=`1`
    &limit=`6`
    &sortby=`createdon`
    &sortdir=`DESC`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

With pagination (pdoPage)

[[pdoPage?
    &element=`Gallery3xVideos`
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
    &limit=`12`
]]

[[!+page.nav]]

Embedded videos on the page

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`tpl.Gallery3x.Video.embedded.fenom`
    &group=`Lessons`
]]

Fields available in chunks

Fields of each video (in tplItem or in a foreach loop)

WITHOUT Fenom (in tplItem):

[[+id]]               <!-- Video ID in the database -->
[[+resource_id]]      <!-- MODX resource ID -->
[[+url]]              <!-- Full video link -->
[[+title]]            <!-- Video title -->
[[+description]]      <!-- Video description -->
[[+thumbnail]]        <!-- Thumbnail path (relative) -->
[[+thumbnail_url]]    <!-- Full thumbnail URL -->
[[+service]]          <!-- Service: youtube, rutube, vk, vimeo, dailymotion, coub, ok, dzen, kinescope -->
[[+video_id]]         <!-- Video ID on the service -->
[[+group]]            <!-- Group (or groups separated by ||) -->
[[+position]]         <!-- Sort position -->
[[+active]]           <!-- Active: 1 (yes) or 0 (no) -->
[[+special]]          <!-- Special: 1 (yes) or 0 (no) -->
[[+createdon]]        <!-- Created date -->
[[+createdby]]        <!-- Creator ID -->
[[+updatedon]]        <!-- Updated date -->
[[+updatedby]]        <!-- Updater ID -->
[[+embed_html]]       <!-- HTML code of the player iframe -->

With Fenom (in a foreach loop):

{$video.id}               {* Video ID in the database *}
{$video.resource_id}      {* MODX resource ID *}
{$video.url}              {* Full video link *}
{$video.title}            {* Video title *}
{$video.description}      {* Video description *}
{$video.thumbnail}        {* Thumbnail path (relative) *}
{$video.thumbnail_url}    {* Full thumbnail URL *}
{$video.service}          {* Service: youtube, rutube, vk... *}
{$video.video_id}         {* Video ID on the service *}
{$video.group}            {* Group (or groups separated by ||) *}
{$video.position}         {* Sort position *}
{$video.active}           {* Active: 1 or 0 *}
{$video.special}          {* Special: 1 or 0 *}
{$video.createdon}        {* Created date *}
{$video.createdby}        {* Creator ID *}
{$video.updatedon}        {* Updated date *}
{$video.updatedby}        {* Updater ID *}
{$video.embed_html | unescape}  {* HTML code of the player iframe *}

Extra fields in tplOuter

The following placeholders are available in the tplOuter chunk:

WITHOUT Fenom:

[[+items]]            <!-- All videos rendered with tplItem -->
[[+total]]            <!-- Total number of videos -->
[[+first.id]]         <!-- ID of the first video -->
[[+first.title]]      <!-- Title of the first video -->
[[+first.*]]          <!-- Any field of the first video (see above) -->

With Fenom:

{$videos}             {* Array of all videos for foreach *}
{$total}              {* Total number of videos *}
{$first.id}           {* ID of the first video *}
{$first.title}        {* Title of the first video *}
{$first.*}            {* Any field of the first video *}

Example in tplOuter:

<div class="video-gallery">
    <p>Videos found: [[+total]]</p>
    
    [[+items]]  <!-- All videos are output here -->
</div>

Real-world examples

“Video gallery” page

<section class="videos-section">
    <h1>Our videos</h1>
    
    [[Gallery3xVideos?
        &fenom=`1`
        &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
        &sortby=`position`
        &sortdir=`ASC`
    ]]
</section>

“Popular videos” sidebar

<aside class="sidebar-widget">
    <h3>Popular videos</h3>
    
    [[Gallery3xVideos?
        &tplOuter=`tpl.Gallery3x.Video.grid`
        &tplItem=`tpl.Gallery3x.Video.grid.item`
        &limit=`3`
        &sortby=`createdon`
        &sortdir=`DESC`
    ]]
</aside>

Course page with lessons

<div class="course-lessons">
    <h2>Course lessons</h2>
    
    [[Gallery3xVideos?
        &fenom=`1`
        &tplOuter=`tpl.Gallery3x.Video.embedded.fenom`
        &group=`Lesson 1,Lesson 2,Lesson 3`
    ]]
</div>

Home page (latest videos)

<section class="latest-videos">
    <div class="container">
        <h2>New videos</h2>
        
        [[Gallery3xVideos?
            &fenom=`1`
            &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
            &limit=`8`
            &sortby=`createdon`
            &sortdir=`DESC`
        ]]
        
        <a href="/videos/" class="btn-more">All videos →</a>
    </div>
</section>

Several sections on one page

<h2>Training videos</h2>
[[Gallery3xVideos?
    &fenom=`1`
    &group=`Training`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

<h2>Customer reviews</h2>
[[Gallery3xVideos?
    &fenom=`1`
    &group=`Reviews`
    &tplOuter=`tpl.Gallery3x.Video.outer.fenom`
]]

Creating your own chunk

Copy any ready-made chunk and adapt it:

{* My custom chunk *}
<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>

Use it:

[[Gallery3xVideos?
    &fenom=`1`
    &tplOuter=`myCustomChunk`
]]

Debugging

Enable debug mode to see all the data:

[[Gallery3xVideos?
    &debug=`1`
]]

Example of videos with the “native” Kinescope player
Fenom version (the whole gallery in one chunk):
[[!Gallery3xVideos?
&resource=`[[*id]]`
&tplOuter=`example.Gallery3x.Video.Kinescope.fenom`
&fenom=`1`
&where=`{"service":"kinescope"}`
]]
Standard MODX syntax (separate chunks for the wrapper and the item):
[[!Gallery3xVideos?
&resource=`[[*id]]`
&tplItem=`example.Gallery3x.Video.Kinescope`
&where=`{"service":"kinescope"}`
]]