Display Images and Videos in the same Gallery field

• DigitalSM

• September 15, 2020 at 5:56 pm

Hello,
i want to display images and videos in the same gallery, but the documentation code shows only the code that you need to display images.
I can make an if and check for mp4 or other video types, but what about videos coming from youtube or vimeo? Can i do something about them?

• DigitalSM

• February 17, 2021 at 10:00 pm

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.

• handhikadsa

• March 31, 2021 at 8:22 pm

hey DigitalSM, can you please tell us the code how to display images and videos using wordpress library? thank you kind sir!

• DigitalSM

• March 31, 2021 at 11:13 pm

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;
?>