forked from UKSOURCE/cms.hailearning.edu.vn
76 lines
3.4 KiB
Plaintext
76 lines
3.4 KiB
Plaintext
<!-- Video Gallery Tab -->
|
|
<div class="tab-pane fade" id="videogallery" role="tabpanel">
|
|
<div class="row g-4">
|
|
<div class="col-md-12">
|
|
<div class="card border shadow-sm mb-1">
|
|
<div class="card-header bg-white d-flex justify-content-center align-items-center">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="videoGalleryEnabled"
|
|
<%=(data.videoGallery?.enabled !==false ) ? 'checked' : '' %>>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card border shadow-sm">
|
|
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-video me-2"></i>Video Gallery
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Heading</label>
|
|
<input type="text" class="form-control" id="videoGalleryHeading"
|
|
value="<%= data.videoGallery?.heading || '' %>" placeholder="e.g., VIDEO PLAY GALLERY"
|
|
maxlength="32" data-maxlength="32" data-maxwords="4" />
|
|
<small class="text-muted d-block mt-1">Limit this title to 4 words and 32 characters so it stays readable on the homepage.</small>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Video URL</label>
|
|
<input type="text" class="form-control" id="videoGalleryVideoUrl"
|
|
value="<%= data.videoGallery?.videoUrl || '' %>" placeholder="https://example.com/video.mp4"
|
|
maxlength="255" data-maxlength="255" />
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Thumbnail Image</label>
|
|
<small class="text-muted d-block mb-1">If no video is provided, this image fills a desktop area of about 1552x906px. Recommended minimum upload: 1920x1120px.</small>
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" id="videoGalleryThumbnail"
|
|
value="<%= data.videoGallery?.thumbnail || '' %>" maxlength="255" data-maxlength="255" />
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image"
|
|
data-target-input="videoGalleryThumbnail" data-image-type="home">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
<% if (data.videoGallery?.thumbnail) { %>
|
|
<div class="mt-2">
|
|
<img src="<%= data.videoGallery.thumbnail %>" class="img-thumbnail"
|
|
style="height: 200px; width: 100%; object-fit: cover;" alt="Thumbnail preview" />
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Register scraper to collect Video Gallery data before form submit
|
|
window.homeScrapers = window.homeScrapers || {};
|
|
window.homeScrapers.videoGallery = () => {
|
|
const getVal = (id) => (document.getElementById(id)?.value || "").trim();
|
|
|
|
const enabled = document.getElementById("videoGalleryEnabled")?.checked === true;
|
|
return {
|
|
heading: getVal("videoGalleryHeading"),
|
|
videoUrl: getVal("videoGalleryVideoUrl"),
|
|
thumbnail: getVal("videoGalleryThumbnail"),
|
|
enabled
|
|
};
|
|
};
|
|
</script>
|