Support

Account

Register Login

Home › Forums › Add-ons › Gallery Field › Display Images and Videos in the same Gallery field

Solving

Display Images and Videos in the same Gallery field

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

  • 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.

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

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

  • @digitalsm Hello there. How can I make an image gallery and youtube gallery for a carousel?

    In a carousel, an image from the gallery should be shown, and if there is a video, it should be shown.

    There is a cpt like this: artwork

    Image gallery: artwork_gallery

    Youtube link (artwork_video:repeater): embed_video

  • Hello guys, I am looking to create a repeater field and video subfields to display them in the post page. Any idea how to implement that? thanks

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.