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

  • Hi @digitalsm this is pretty old, but I’m trying to implement that snippets and always breaks the site.

    Is there anything that changed in the recent WordPress updates?

    Thanks!

  • Hello, it works just fine in my website with the latest versions of WordPress and acf pro.

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

  • @digitalsm thank you so much for your insight!

    I was trying to use it as a code snippet (facepalm)
    The thing is I use oxygen, so I’ll investigate how can I make this work with posts.

    Thanks for your guide! 🙂

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

You must be logged in to reply to this topic.