Actions

Template

Videos: Difference between revisions

From Dune Awakening DB

← Older edit
VisualWikitext
mNo edit summary
mNo edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
{{TemplateStyles|Template:VideoGallery/styles.css}}
<includeonly><!-- Simple VideoGallery Template using External Data -->
<div class="video-gallery-simple">
  <h2>Video Gallery</h2>
 
  <!-- Get all videos from database -->
  {{#get_external_data:
    source = externaldb
  | from  = data_videos
  | data  = VideoID=video_id,YouTubeID=youtube_id,Title=video_title,Channel=channel_name,Duration=duration,Type=video_type,Tag=primary_tag,Description=description
  | cache = yes
  | where = visibility='public'
  | order by = publish_date DESC
  | limit = 20
  }}
 
  <div class="video-grid-simple">
    {{#for_external_table:|
      {{#vardefine:duration_min|{{#expr:{{{Duration}}} div 60}}}}
      {{#vardefine:duration_sec|{{#expr:{{{Duration}}} mod 60}}}}
      <div class="video-card-simple">
        <a href="https://www.youtube.com/watch?v={{{YouTubeID}}}" target="_blank">
          <img src="https://img.youtube.com/vi/{{{YouTubeID}}}/mqdefault.jpg" alt="{{{Title}}}">
          <div class="video-duration">{{#var:duration_min}}:{{#ifexpr:{{#var:duration_sec}}<10|0|}}{{#var:duration_sec}}</div>
        </a>
        <h3>{{{Title}}}</h3>
        <p class="video-meta">{{{Channel}}} • {{{Tag}}}</p>
      </div>
    }}
  </div>
</div>


<div class="video-gallery-main-container">
<style>
   <!-- 60 % column – categories -->
.video-gallery-simple { padding: 20px; }
   <div class="video-categories">
.video-grid-simple {
    <!-- Search -->
  display: grid;
    <div class="video-search-bar">
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      <input type="text" class="video-search-input" placeholder="Search videos…">
  gap: 20px;
      <button class="video-search-button">Search</button>
}
    </div>
.video-card-simple {
  background: #f5f5f5;
   border-radius: 8px;
  overflow: hidden;
}
.video-card-simple a {
  position: relative;
  display: block;
}
.video-card-simple img {
  width: 100%;
  height: auto;
}
.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}
.video-card-simple h3 {
  padding: 10px;
  margin: 0;
  font-size: 16px;
}
.video-meta {
  padding: 0 10px 10px;
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>
</includeonly><noinclude>
{{Documentation}}


    <!-- Tabs -->
== Simple Video Gallery Template ==
    <div class="video-tabs-nav">
      <button class="video-tab active" data-tab="featured">◆ Featured</button>
      <button class="video-tab" data-tab="leveling">⬆ Leveling</button>
      <button class="video-tab" data-tab="crafting">⚒ Crafting</button>
      <button class="video-tab" data-tab="building">⌂ Building</button>
      <button class="video-tab" data-tab="pve">⚔ PVE</button>
      <button class="video-tab" data-tab="pvp">⚔ PVP</button>
    </div>


    <!-- Tab panes -->
This is a simplified version of the video gallery that just displays videos in a grid without tabs or advanced features.
    <div class="video-tab-content active" data-content="featured">
      {{#invoke:VideoGallery|renderVideos|category=featured}}
    </div>
    <div class="video-tab-content" data-content="leveling">
      {{#invoke:VideoGallery|renderVideos|category=leveling}}
    </div>
    <div class="video-tab-content" data-content="crafting">
      {{#invoke:VideoGallery|renderVideos|category=crafting}}
    </div>
    <div class="video-tab-content" data-content="building">
      {{#invoke:VideoGallery|renderVideos|category=building}}
    </div>
    <div class="video-tab-content" data-content="pve">
      {{#invoke:VideoGallery|renderVideos|category=pve}}
    </div>
    <div class="video-tab-content" data-content="pvp">
      {{#invoke:VideoGallery|renderVideos|category=pvp}}
    </div>
  </div>


  <!-- 40 % column – player -->
=== Usage ===
  <div class="video-player-panel" id="videoPlayerPanel">
<pre>
    <div class="no-video-selected">
{{VideoGallerySimple}}
      <div class="placeholder-icon">▶</div>
</pre>
      <p>Select a video to watch</p>
    </div>
  </div>
</div>


<!-- JSON payload for JS -->
=== Database Requirements ===
<script type="application/json" id="video-gallery-data">
Requires the same `data_videos` table structure as the full video gallery.
{{#invoke:VideoGallery|getVideoData}}
</script>


<!-- Load the VideoGallery gadget -->
[[Category:Templates]]
{{#tag:script|mw.loader.load('ext.gadget.VideoGallery');}}
</noinclude>

Latest revision as of 04:08, 2 June 2025

Template:Documentation

Simple Video Gallery Template

This is a simplified version of the video gallery that just displays videos in a grid without tabs or advanced features.

Usage

{{VideoGallerySimple}}

Database Requirements

Requires the same `data_videos` table structure as the full video gallery.

Retrieved from "https://dunedb.com/index.php?title=Template:Videos&oldid=854"