Actions

Template

Videos: Difference between revisions

From Dune Awakening DB

VisualWikitext
Created page with "{{#css:Template:VideoGallery/styles.css}} <div class="video-gallery-main-container"> <!-- Video Categories Section (60% width) --> <div class="video-categories"> <!-- Search Bar (Optional) --> <div class="video-search-bar"> <input type="text" class="video-search-input" placeholder="Search videos..."> <button class="video-search-button">Search</button> </div> <!-- Tab Navigation --> <div clas..."
 
mNo edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{#css:Template:VideoGallery/styles.css}}
<includeonly><!-- Simple VideoGallery Template using External Data -->
<div class="video-gallery-main-container">
<div class="video-gallery-simple">
    <!-- Video Categories Section (60% width) -->
  <h2>Video Gallery</h2>
    <div class="video-categories">
 
        <!-- Search Bar (Optional) -->
  <!-- Get all videos from database -->
        <div class="video-search-bar">
  {{#get_external_data:
            <input type="text" class="video-search-input" placeholder="Search videos...">
    source = externaldb
            <button class="video-search-button">Search</button>
  | from  = data_videos
        </div>
  | 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
        <!-- Tab Navigation -->
  | where = visibility='public'
        <div class="video-tabs-nav">
  | order by = publish_date DESC
            <button class="video-tab active" data-tab="featured">◆ Featured</button>
  | limit = 20
            <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>
  <div class="video-grid-simple">
            <button class="video-tab" data-tab="pve">⚔ PVE</button>
    {{#for_external_table:|
            <button class="video-tab" data-tab="pvp">⚔ PVP</button>
      {{#vardefine:duration_min|{{#expr:{{{Duration}}} div 60}}}}
        </div>
      {{#vardefine:duration_sec|{{#expr:{{{Duration}}} mod 60}}}}
       
      <div class="video-card-simple">
        <!-- Tab Content Containers -->
        <a href="https://www.youtube.com/watch?v={{{YouTubeID}}}" target="_blank">
        <div class="video-tab-content active" data-content="featured">
          <img src="https://img.youtube.com/vi/{{{YouTubeID}}}/mqdefault.jpg" alt="{{{Title}}}">
            {{#invoke:VideoGallery|renderVideos|category=featured}}
          <div class="video-duration">{{#var:duration_min}}:{{#ifexpr:{{#var:duration_sec}}<10|0|}}{{#var:duration_sec}}</div>
        </div>
        </a>
       
        <h3>{{{Title}}}</h3>
        <div class="video-tab-content" data-content="leveling">
         <p class="video-meta">{{{Channel}}} • {{{Tag}}}</p>
            {{#invoke:VideoGallery|renderVideos|category=leveling}}
      </div>
        </div>
     }}
       
  </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>
   
    <!-- Video Player Panel (40% width) -->
    <div class="video-player-panel" id="videoPlayerPanel">
         <div class="no-video-selected">
            <div class="placeholder-icon">▶</div>
            <p>Select a video to watch</p>
        </div>
     </div>
</div>
</div>


<!-- Store video data for JavaScript -->
<style>
<script type="application/json" id="video-gallery-data">
.video-gallery-simple { padding: 20px; }
{{#invoke:VideoGallery|getVideoData}}
.video-grid-simple {
</script>
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.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}}


<!-- Include JavaScript -->
== Simple Video Gallery Template ==
{{#widget:VideoGalleryJS}}
 
This is a simplified version of the video gallery that just displays videos in a grid without tabs or advanced features.
 
=== Usage ===
<pre>
{{VideoGallerySimple}}
</pre>
 
=== Database Requirements ===
Requires the same `data_videos` table structure as the full video gallery.
 
[[Category:Templates]]
</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"