Actions

Template

VideoGallery: Difference between revisions

From Dune Awakening DB

Created page with "<includeonly><templatestyles src="Template:VideoGallery/styles.css" />__NOTOC__ <!-- Main Video Gallery Container --> <div class="video-gallery-main-container"> <!-- Video Categories (Left Column - 60%) --> <div class="video-categories"> <!-- Search Bar --> <div class="video-search-bar"> <input type="text" class="video-search-input" placeholder="Search videos..."> <button class="video-search-button">Search</button> </div> <!-- Tab Nav..."
 
mNo edit summary
Line 21: Line 21:
      
      
     <!-- Tab Content Containers -->
     <!-- Tab Content Containers -->
   
    <!-- Featured Tab -->
     <div class="video-tab-content active" data-content="featured" id="featured-content">
     <div class="video-tab-content active" data-content="featured" id="featured-content">
       {{#invoke:VideoGallery|renderFeaturedVideos}}
       <!-- New Player Guide Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">New Player Guide</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='New Player Guide' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
     </div>
     </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
     
      <!-- Essential Guides Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Essential Guides</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Essential Guides' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
    </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
    </div>
   
    <!-- Leveling Tab -->
     <div class="video-tab-content" data-content="leveling" id="leveling-content">
     <div class="video-tab-content" data-content="leveling" id="leveling-content">
       {{#invoke:VideoGallery|renderCategoryVideos|category=Leveling}}
       <!-- Leveling 1-20 Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Leveling 1-20</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Leveling 1-20' AND primary_tag='Leveling' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
    </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
     
      <!-- Leveling 21-40 Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Leveling 21-40</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Leveling 21-40' AND primary_tag='Leveling' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
    </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
     
      <!-- Leveling 41-60 Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Leveling 41-60</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Leveling 41-60' AND primary_tag='Leveling' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
    </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
     </div>
     </div>
   
    <!-- Crafting Tab -->
     <div class="video-tab-content" data-content="crafting" id="crafting-content">
     <div class="video-tab-content" data-content="crafting" id="crafting-content">
       {{#invoke:VideoGallery|renderCategoryVideos|category=Crafting}}
       <!-- Basic Crafting Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Basic Crafting</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Basic Crafting' AND primary_tag='Crafting' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
     </div>
     </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
     
      <!-- Advanced Crafting Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Advanced Crafting</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Advanced Crafting' AND primary_tag='Crafting' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
    </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
    </div>
   
    <!-- Building Tab -->
     <div class="video-tab-content" data-content="building" id="building-content">
     <div class="video-tab-content" data-content="building" id="building-content">
       {{#invoke:VideoGallery|renderCategoryVideos|category=Building}}
       <!-- Base Building Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Base Building</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Base Building' AND primary_tag='Building' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
    </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
     </div>
     </div>
   
    <!-- PvE Tab -->
     <div class="video-tab-content" data-content="pve" id="pve-content">
     <div class="video-tab-content" data-content="pve" id="pve-content">
       {{#invoke:VideoGallery|renderCategoryVideos|category=PvE}}
       <!-- Boss Guides Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">Boss Guides</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='Boss Guides' AND primary_tag='PvE' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
     </div>
     </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
    </div>
   
    <!-- PvP Tab -->
     <div class="video-tab-content" data-content="pvp" id="pvp-content">
     <div class="video-tab-content" data-content="pvp" id="pvp-content">
       {{#invoke:VideoGallery|renderCategoryVideos|category=PvP}}
       <!-- PVP Strategy Section -->
      <div class="video-section">
        <div class="video-section-header">
          <h3 class="section-title">PVP Strategy</h3>
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
|from=data_videos
|data=video_id=video_id,youtube_id=youtube_id,title=title,channel_title=channel_title,channel_id=channel_id,author=author,published_at=published_at,duration_sec=duration_sec,purpose=purpose,primary_tag=primary_tag,secondary_tag=secondary_tag,description=description,video_notes=video_notes,video_internal_link=video_internal_link
|cache=yes
|where=purpose='PVP Strategy' AND primary_tag='PvP' AND visibility='public'
|order by=published_at DESC
}}
{{#for_external_table:|<div class="video-card"
  data-video-id="{{{video_id}}}"
  data-youtube-id="{{{youtube_id}}}"
  data-title="{{{title}}}"
  data-channel="{{{channel_title}}}"
  data-channel-id="{{{channel_id}}}"
  data-author="{{{author|}}}"
  data-published="{{{published_at}}}"
  data-duration="{{{duration_sec}}}"
  data-purpose="{{{purpose|}}}"
  data-primary-tag="{{{primary_tag}}}"
  data-secondary-tag="{{{secondary_tag|}}}"
  data-description="{{{description|}}}"
  data-notes="{{{video_notes|}}}"
  data-internal-link="{{{video_internal_link|}}}">
    <div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
      {{#if:{{{duration_sec|}}}|<span class="video-duration">{{#expr: floor({{{duration_sec}}} / 60)}}:{{#ifexpr: ({{{duration_sec}}} mod 60) < 10|0}}{{#expr: {{{duration_sec}}} mod 60}}</span>|}}
    </div>
    <div class="video-info">
      <div class="video-title">{{{title}}}</div>
      <div class="video-channel">{{{channel_title}}}</div>
    </div>
</div>
}}
        </div>
      </div>
     </div>
     </div>
   </div>
   </div>
Line 55: Line 455:
== Video Gallery Template ==
== Video Gallery Template ==


This template displays the video gallery system for Dune Awakening.
This template displays the video gallery system for Dune Awakening using external data.


=== Usage ===
=== Usage ===
Line 70: Line 470:
* Template:VideoGallery/styles.css - Styling
* Template:VideoGallery/styles.css - Styling
* Gadget-VideoGallerySystem.js - JavaScript functionality
* Gadget-VideoGallerySystem.js - JavaScript functionality
* Module:VideoGallery - Lua module for rendering videos
* External Data extension - For database queries


=== Database ===
=== Database ===
This template pulls data from the `data_videos` table.
This template pulls data from the `data_videos` table using the external data extension.
 
=== Purpose Categories ===
Videos are grouped by the "purpose" field:
* '''Featured''': New Player Guide, Essential Guides
* '''Leveling''': Leveling 1-20, Leveling 21-40, Leveling 41-60
* '''Crafting''': Basic Crafting, Advanced Crafting
* '''Building''': Base Building
* '''PvE''': Boss Guides
* '''PvP''': PVP Strategy


[[Category:Dune Templates]]
[[Category:Dune Templates]]
[[Category:Interactive Templates]]
[[Category:Interactive Templates]]
</noinclude>
</noinclude>

Revision as of 18:23, 2 June 2025


Template:Documentation

Video Gallery Template

This template displays the video gallery system for Dune Awakening using external data.

Usage

Simply add {{VideoGallery}} to any page where you want the video gallery to appear.

Features

  • Six tabs: Featured, Leveling, Crafting, Building, PvE, PvP
  • Videos grouped by purpose within each category
  • Search functionality across all video metadata
  • Embedded YouTube player with video notes
  • Responsive design

Dependencies

  • Template:VideoGallery/styles.css - Styling
  • Gadget-VideoGallerySystem.js - JavaScript functionality
  • External Data extension - For database queries

Database

This template pulls data from the `data_videos` table using the external data extension.

Purpose Categories

Videos are grouped by the "purpose" field:

  • Featured: New Player Guide, Essential Guides
  • Leveling: Leveling 1-20, Leveling 21-40, Leveling 41-60
  • Crafting: Basic Crafting, Advanced Crafting
  • Building: Base Building
  • PvE: Boss Guides
  • PvP: PVP Strategy