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