Support

Account

Home Forums Add-ons Gallery Field acf Gallery field and Vimeo movies

Solved

acf Gallery field and Vimeo movies

  • Does anybody have an idea how I could integrate a Vimeo Video in the acf Gallery field?

    It would be so nice to mix up images and movies (from vimeo or youtube) in one gallery.

    • Elliot

    • December 6, 2013 at 9:16 am

    Hi @nilssanders

    Currently, it is possible to uploade and select a ‘thumbnail’ image into the gallery field and then edit it to paste your vimeo code into either the description, caption or even a custom field (if you create a field group for attachments).

    Then, in your loop, you can find this extra data for each $image!

    Hope that helps.

    Thanks
    E

  • ah, cool. I’ll try it. Thanks!

  • when I use the standard vimeo iFrame code I double the image. The first (image) one opens my popup overlay and the second is the video.

    Right now I try to use the old blank gif way to avoid that but then I have an extra row.

    Is there an much more elegant way to avoid that?

    • Elliot

    • December 8, 2013 at 8:57 am

    Hi @nilssanders

    Perhaps you can post the code you are using and I’ll take a look to see why the double image is appearing.

    As a guess, could it be that you are outputting the image for the video, as well as the video?

    In your code, you will need a conditional statement to decide whether or not to display the image. This would be based on the existence of the video value.

    Thanks
    E

  • You’re right. I just start to go deeper in php… it’s fun.

    Here’s my code for now:

    <?php foreach( $images as $image ): ?>
     <div class="project_image">
      <a href="<?php echo $image['url']; ?>">
       <img src="<?php echo $image['sizes']['large']; ?>" />
      </a>
      <?php if( $image['description'] ): ?>
       <div class="vimeo"><?php echo $image['description']; ?></div>
      <?php endif; ?>
      <p class="caption"><?php echo $image['caption']; ?></p>
    </div>
    <?php endforeach; ?>

    And in the description I use the standard Vimeo embed code like this:

    <iframe src="//player.vimeo.com/video/81101774?title=0&byline=0&portrait=0&color=ffffff" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  • but sadly it doesn’t work in Chrome. Just a black hole and no video.

    Any idea?

  • Here’s the new code that don’t double the image. But there’S still the Vimeo Embed bug with Chrome…

    <?php $images = get_field('gallery'); 
      if( $images ): ?>
    
    <?php foreach( $images as $image ): ?>
    	<div class="project_image twocolumn">
    		      			
    	<?php if( $image['description'] ): ?>
    	<div class="vimeo"><?php echo $image['description']; ?></div>
    	<p class="caption"><?php echo $image['caption']; ?></p>
    	<?php endif; ?>
    
    	<?php if( !$image['description'] ): ?>
    	<a href="<?php echo $image['url']; ?>"><img src="<?php echo $image['sizes']['large']; ?>" /></a>
    	<p class="caption"><?php echo $image['caption']; ?></p>
    	<?php endif; ?>
    		      				
    	</div>
    <?php endforeach; ?>
    
    <?php endif; ?>
Viewing 8 posts - 1 through 8 (of 8 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.