I know it’s too late, but you can actually use the same code as above. You just have to create a copy of the post template inside your child theme and put the code there. You should also create the right acf fields and make them visible only in the post template.
Hello, it works just fine in my website with the latest versions of WordPress and acf pro.
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;
?>
The if-check about the uploaded videos in the wordpress library works.
But for the external videos like youtube or vimeo, I had to create a repeater field and just display it after the image gallery/video gallery field. At least it seems like it’s the same gallery now.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.