93 lines
2.8 KiB
PHP
93 lines
2.8 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: video page
|
|
|
|
*/
|
|
get_header(); ?>
|
|
<section class="section-top">
|
|
<div class="container">
|
|
<div class="col-lg-10 offset-lg-1 text-center">
|
|
<div class="section-top-title">
|
|
<h1>Explore Our Gallery</h1>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li class="ms-1"> / Videos</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="custom-gallery-container">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<?php
|
|
$args = array(
|
|
'post_type' => 'video',
|
|
'posts_per_page' => -1,
|
|
'post_status' => 'publish'
|
|
);
|
|
|
|
$result = new WP_Query($args);
|
|
|
|
if ($result->have_posts()) :
|
|
while ($result->have_posts()) : $result->the_post();
|
|
|
|
$video_url = get_field('youtube_video'); // SINGLE ACF field
|
|
$title = get_the_title();
|
|
$desc = get_the_content();
|
|
|
|
if (!$video_url) continue;
|
|
|
|
// Extract YouTube Video ID
|
|
if (preg_match('/(?:youtube\.com\/.*v=|youtu\.be\/)([^"&?\/\s]{11})/', $video_url, $matches)) {
|
|
$video_id = $matches[1];
|
|
} else {
|
|
continue;
|
|
}
|
|
?>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3 custom-gallery-item gallery-item">
|
|
<a href="#"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#videoModal"
|
|
data-video="https://www.youtube.com/embed/<?php echo esc_attr($video_id); ?>"
|
|
data-type="youtube">
|
|
|
|
<div class="custom-gallery-img">
|
|
<img src="https://img.youtube.com/vi/<?php echo esc_attr($video_id); ?>/mqdefault.jpg"
|
|
class="img-fluid"
|
|
alt="<?php echo esc_attr($title); ?>">
|
|
|
|
<div class="play-icon">
|
|
<i class="fas fa-play"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="video-description">
|
|
<h3><?php echo esc_html($title); ?></h3>
|
|
<p>
|
|
<?php
|
|
echo esc_html(mb_substr(wp_strip_all_tags($desc), 0, 50));
|
|
echo (mb_strlen($desc) > 50) ? '...' : '';
|
|
?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<?php
|
|
endwhile;
|
|
wp_reset_postdata();
|
|
endif;
|
|
?>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<nav class="mt-4">
|
|
<ul class="pagination justify-content-center" id="pagination"></ul>
|
|
</nav>
|
|
<?php get_footer(); ?>
|