Support

Account

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

    • June 4, 2021 at 6:12 pm

    @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

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.