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


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:

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