Actions

Template

VideoGallery: Difference between revisions

From Dune Awakening DB

← Older editNewer edit →
VisualWikitext
mNo edit summary
Tag: Reverted
mNo edit summary
Tags: Manual revert Reverted
Line 1: Line 1:
<includeonly><templatestyles src="Template:VideoGallery/styles.css" />__NOTOC__
<includeonly><templatestyles src="Template:VideoGallery/styles.css" />__NOTOC__
<!-- Header Section - Smaller -->
<!-- Header Section -->
<div class="video-gallery-header">
<div class="video-gallery-header">
<h1 class="video-gallery-title">Dune Awakening Video Gallery</h1>
  <h1 class="video-gallery-title">Dune Awakening Video Gallery</h1>
<p class="video-gallery-subtitle">Essential guides and tutorials for surviving Arrakis</p>
  <p class="video-gallery-subtitle">Essential guides and tutorials for surviving Arrakis</p>
</div>
</div>
<!-- Main Video Gallery Container -->
<!-- Main Video Gallery Container -->
<div class="video-gallery-main-container">
<div class="video-gallery-main-container">
<!-- Video Categories (Left Column - 60%) -->
  <!-- Video Categories (Left Column - 60%) -->
<div class="video-categories">
  <div class="video-categories">
<!-- Tab Navigation -->
    <!-- Search Bar -->
<div class="video-tabs-nav">
    <div class="video-search-bar">
<span class="video-tab active" data-tab="featured">◆ Featured</span>
      <input type="text" class="video-search-input" placeholder="Search videos...">
<span class="video-tab" data-tab="leveling">⬆ Leveling</span>
      <button class="video-search-button">Search</button>
<span class="video-tab" data-tab="crafting">⚒ Crafting</span>
    </div>
<span class="video-tab" data-tab="building">⌂ Building</span>
   
<span class="video-tab" data-tab="pve">⚔ PVE</span>
    <!-- Tab Navigation -->
<span class="video-tab" data-tab="pvp">⚔ PVP</span>
    <div class="video-tabs-nav">
</div>
      <button class="video-tab active" data-tab="featured">◆ Featured</button>
<!-- Scrollable Content Wrapper -->
      <button class="video-tab" data-tab="leveling">⬆ Leveling</button>
<div class="video-content-wrapper">
      <button class="video-tab" data-tab="crafting">⚒ Crafting</button>
<!-- Featured Tab -->
      <button class="video-tab" data-tab="building">⌂ Building</button>
<div class="video-tab-content active" data-content="featured" id="featured-content">
      <button class="video-tab" data-tab="pve">⚔ PVE</button>
<!-- New Player Guide Section -->
      <button class="video-tab" data-tab="pvp">⚔ PVP</button>
<div class="video-section">
    </div>
<div class="video-section-header">
   
<h3 class="section-title">New Player Guide</h3>
    <!-- Tab Content Containers -->
</div>
   
<div class="video-grid">
    <!-- Featured Tab -->
    <div class="video-tab-content active" data-content="featured" id="featured-content">
      <!-- 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
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='New Player Guide' AND visibility='public'
|where=purpose='New Player Guide' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_newplayer
}}
}}
{{#for_external_table: vg_newplayer |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
<!-- Essential Guides Section -->
     
<div class="video-section">
      <!-- Essential Guides Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Essential Guides</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Essential Guides</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=visibility='public'
|where=purpose='Essential Guides' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_essential
}}
}}
{{#for_external_table: vg_essential |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
    </div>
<!-- Leveling Tab -->
   
<div class="video-tab-content" data-content="leveling" id="leveling-content">
    <!-- Leveling Tab -->
<!-- Leveling 1-20 Section -->
    <div class="video-tab-content" data-content="leveling" id="leveling-content">
<div class="video-section">
      <!-- Leveling 1-20 Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Leveling 1-20</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Leveling 1-20</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='Leveling 1-20' AND primary_tag='Leveling' AND visibility='public'
|where=purpose='Leveling 1-20' AND primary_tag='Leveling' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_lvl_1_20
}}
}}
{{#for_external_table: vg_lvl_1_20 |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
<!-- Leveling 21-40 Section -->
     
<div class="video-section">
      <!-- Leveling 21-40 Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Leveling 21-40</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Leveling 21-40</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='Leveling 21-40' AND primary_tag='Leveling' AND visibility='public'
|where=purpose='Leveling 21-40' AND primary_tag='Leveling' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_lvl_21_40
}}
}}
{{#for_external_table: vg_lvl_21_40 |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
<!-- Leveling 41-60 Section -->
     
<div class="video-section">
      <!-- Leveling 41-60 Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Leveling 41-60</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Leveling 41-60</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='Leveling 41-60' AND primary_tag='Leveling' AND visibility='public'
|where=purpose='Leveling 41-60' AND primary_tag='Leveling' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_lvl_41_60
}}
}}
{{#for_external_table: vg_lvl_41_60 |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
    </div>
<!-- Crafting Tab -->
   
<div class="video-tab-content" data-content="crafting" id="crafting-content">
    <!-- Crafting Tab -->
<!-- Basic Crafting Section -->
    <div class="video-tab-content" data-content="crafting" id="crafting-content">
<div class="video-section">
      <!-- Basic Crafting Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Basic Crafting</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Basic Crafting</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='Basic Crafting' AND primary_tag='Crafting' AND visibility='public'
|where=purpose='Basic Crafting' AND primary_tag='Crafting' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_craft_basic
}}
}}
{{#for_external_table: vg_craft_basic |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
<!-- Advanced Crafting Section -->
     
<div class="video-section">
      <!-- Advanced Crafting Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Advanced Crafting</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Advanced Crafting</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='Advanced Crafting' AND primary_tag='Crafting' AND visibility='public'
|where=purpose='Advanced Crafting' AND primary_tag='Crafting' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_craft_adv
}}
}}
{{#for_external_table: vg_craft_adv |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
    </div>
<!-- Building Tab -->
   
<div class="video-tab-content" data-content="building" id="building-content">
    <!-- Building Tab -->
<!-- Base Building Section -->
    <div class="video-tab-content" data-content="building" id="building-content">
<div class="video-section">
      <!-- Base Building Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Base Building</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Base Building</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='Base Building' AND primary_tag='Building' AND visibility='public'
|where=purpose='Base Building' AND primary_tag='Building' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_build_base
}}
}}
{{#for_external_table: vg_build_base |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
    </div>
<!-- PvE Tab -->
   
<div class="video-tab-content" data-content="pve" id="pve-content">
    <!-- PvE Tab -->
<!-- Boss Guides Section -->
    <div class="video-tab-content" data-content="pve" id="pve-content">
<div class="video-section">
      <!-- Boss Guides Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">Boss Guides</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">Boss Guides</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='Boss Guides' AND primary_tag='PvE' AND visibility='public'
|where=purpose='Boss Guides' AND primary_tag='PvE' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_pve_boss
}}
}}
{{#for_external_table: vg_pve_boss |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
    </div>
<!-- PvP Tab -->
   
<div class="video-tab-content" data-content="pvp" id="pvp-content">
    <!-- PvP Tab -->
<!-- PVP Strategy Section -->
    <div class="video-tab-content" data-content="pvp" id="pvp-content">
<div class="video-section">
      <!-- PVP Strategy Section -->
<div class="video-section-header">
      <div class="video-section">
<h3 class="section-title">PVP Strategy</h3>
        <div class="video-section-header">
</div>
          <h3 class="section-title">PVP Strategy</h3>
<div class="video-grid">
        </div>
        <div class="video-grid">
{{#get_external_data: source=externaldb
{{#get_external_data: source=externaldb
|from=data_videos
|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
|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
|cache=yes
|where=purpose='PVP Strategy' AND primary_tag='PvP' AND visibility='public'
|where=purpose='PVP Strategy' AND primary_tag='PvP' AND visibility='public'
|order by=published_at DESC
|order by=published_at DESC
|table=vg_pvp_strategy
}}
}}
{{#for_external_table: vg_pvp_strategy |
{{#for_external_table:|<div class="video-card"  
<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|}}}">
  data-video-id="{{{video_id}}}"  
<div class="video-thumbnail" style="background-image: url('https://img.youtube.com/vi/{{{youtube_id}}}/mqdefault.jpg');">
  data-youtube-id="{{{youtube_id}}}"
{{#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>|}}
  data-title="{{{title}}}"
</div>
  data-channel="{{{channel_title}}}"
<div class="video-info">
  data-channel-id="{{{channel_id}}}"
<div class="video-title">{{{title}}}</div>
  data-author="{{{author|}}}"
<div class="video-channel">{{{channel_title}}}</div>
  data-published="{{{published_at}}}"
</div>
  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>
    </div>
</div>
  </div>
</div>
 
<!-- Video Player Panel (Right Column - 40%) -->
  <!-- Video Player Panel (Right Column - 40%) -->
<div class="video-player-panel" id="videoPlayerPanel">
  <div class="video-player-panel" id="videoPlayerPanel">
<div class="no-video-selected">
    <div class="no-video-selected">
<div class="placeholder-icon">▶</div>
      <div class="placeholder-icon">▶</div>
<p>Select a video to watch</p>
      <p>Select a video to watch</p>
</div>
    </div>
</div>
  </div>
</div>
</div>
</includeonly>
</includeonly>
<noinclude>
<noinclude>
{{Documentation}}
{{Documentation}}
== Video Gallery Template ==
== Video Gallery Template ==


This template displays the video gallery system for Dune Awakening using external data.
This template displays the video gallery system for Dune Awakening using external data.
'''IMPORTANT:''' This template has NO INDENTATION to prevent MediaWiki from wrapping content in pre tags.
=== Changes in this version ===
* Removed search functionality
* Added scrollable content wrapper
* Reduced header size by 30%
* Reduced container height by 200px
* Fixed horizontal tab layout


=== Usage ===
=== Usage ===
Line 339: Line 467:


=== Features ===
=== Features ===
* Smaller header section
* Header section with title and subtitle
* Six tabs: Featured, Leveling, Crafting, Building, PvE, PvP
* Six tabs: Featured, Leveling, Crafting, Building, PvE, PvP
* Scrollable content area for video sections
* Videos grouped by purpose within each category
* Videos grouped by purpose within each category
* Search functionality across all video metadata
* Embedded YouTube player with video notes
* Embedded YouTube player with video notes
* Responsive design
* Responsive design

Revision as of 01:37, 3 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

  • Header section with title and subtitle
  • 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
Retrieved from "https://dunedb.com/index.php?title=Template:VideoGallery&oldid=915"