Home Forums Add-ons Gallery Field Display Images and Videos in the same Gallery field Reply To: Display Images and Videos in the same Gallery field

  • Using the acf pro gallery field:

    $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.
    		<?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']); ?>" />
    	<?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.

    // 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>';
    else :
    	// no rows found