Using the acf pro gallery field:
<?php
$images = get_field('project_gallery');
if( $images ): ?>
<?php foreach( $images as $image ):
$data_type = pathinfo($image['url'], PATHINFO_EXTENSION);
if ($data_type == 'mp4') {?>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<video preload="metadata">
<source src="<?php echo $image['url'];?>#t=0.5" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<?php } else {?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="<?php echo esc_url($image['url']); ?>">
<img src="<?php echo esc_url($image['sizes']['large']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</a>
</div>
<?php } endforeach; ?>
<?php endif; ?>
So here, you check if an “image” (whatever you get from the library), comes with an .mp4 extension. If it’s true, it means you used a video, and you create an html5 video element. Else, it’s just an image.
For those who need it, here is an example on how to create a gallery of external videos using the repeater field and as a sub_field the oEmbed field.
This code came from another thread of questions somewhere. I don’t remember where, so it’s not my code, I just made some changes to meet my needs.
<?php
// check if the repeater field has rows of data
if( have_rows('external_gallery_videos') ):
// loop through the rows of data
while ( have_rows('external_gallery_videos') ) : the_row();
// get the sub field value
$sub_value = get_sub_field('gallery_external_video');
// Use preg_match to find iframe src.
preg_match('/src="(.+?)"/', $sub_value, $matches);
$src = $matches[1];
// Add extra parameters to src and replcae HTML.
$params = array(
'controls' => 1,
'byline' => 0,
'portrait' => 0,
'title' => 0,
'hd' => 1,
'autohide' => 1,
'quality' => 'auto'
);
$new_src = add_query_arg($params, $src);
$sub_value = str_replace($src, $new_src, $sub_value);
// Add extra attributes to iframe HTML.
$attributes = 'frameborder="0"';
$sub_value = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $sub_value);
// Display customized HTML.
// echo $sub_value;
echo '<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><div class="embed-container">'.$sub_value.'</div></div>';
endwhile;
else :
// no rows found
endif;
?>
