Inserting a video into a gallery of images

The CMS Questions
1

Dear Kirby community,

I’m building a simple portfolio that has a home page with a list of all the projects + a page for each project.

On the project page I have a gallery of images that works well, but I would like to also add some videos using the video() function to embed links from Vimeo.

I’ve been browsing the forum and the documentation but I cannot understand how to do it.

Ideally I could see the video among the other images in the blueprint and be able to change the order as I like.

This is my code:

<section class="project__gallery">
        <?php foreach ($page->images()->sortBy('sort', 'asc') as $image): ?>
                <figure class="project__item <?= $image->class() ?>">
                    <img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
                    <figcaption>
                        <?php if ($image->caption()->isNotEmpty()): ?>
                            <span class="project__itemCaption"><?= $image->caption() ?></span>
                        <?php endif ?>
                        <?php if ($image->photographer()->isNotEmpty()): ?>
                            <span class="project_itemCredits">(&#169; <?= $image->photographer() ?>)</span>
                        <?php endif ?>
                    </figcaption>
                </figure>
        <?php endforeach ?>
</section>

Any tips or link to the right part of the documentation?

Many, many thanks!
A

2

A video link from vimeo is not a file, so you cannot address it as such.

What you could do, is create a structure field, with fields for conditionally entering a vimeo link or a file.

Then you can mix the stuff and sort as you like.

3

Many thanks for the reply.
And yes, regarding Vimeo I meat the link, not the file.

I’m trying to implement the structure field, but I’m not sure I can make it work as I thought.
Maybe with the link embed I cannot do what I need?
For me is also an option to upload the video file directly.

I try to reframe the question:

I need to mix images and videos in one gallery.
What I don’t understand is: how, in the loop I posted previously, can I return images and videos?

I know I can call the video files with $page->videos(), but I somehow cannot call both in the same loop?
I’m trying to develop a solution that allows me to sometimes only have images, sometimes only videos, sometimes both.

I hope the question is now more clear.

Best, A

4

You only query images, you could use $page->files() instead, or filter all files by type image & video.

5

Thanks again for helping - you are right.

I found this other post and managed to make it working.

Now I have another problem (ehehe): I see the video player, but the video doesn’t play.

This is my template:

<?php if ($page->files()->isNotEmpty()): ?>
  <?php foreach ($page->files()->sortBy('sort', 'asc') as $file): ?>
    <figure class="project__item <?= $file->class() ?>">
      <?= snippet($file->type(), ['file' => $file]) ?>
      <figcaption>
        <?php if ($file->caption()->isNotEmpty()): ?>
          <span class="project__itemCaption"><?= $file->caption() ?></span>
        <?php endif ?>
        <?php if ($file->photographer()->isNotEmpty()): ?>
          <span class="project_itemCredits">(&#169; <?= $file->photographer() ?>)</span>
        <?php endif ?>
      </figcaption>
    </figure>
  <?php endforeach ?>
<?php endif ?>

Which loads this snippet for the video:

<video width="100%" height="100%" autoplay controls loop>
  <source src="<?= $file->url() ?>" type="video/quicktime">
</video>

Any idea why the videos are not working?
I was reading this post but I couldn’t really find a solution.

Best, A

6

Is the video actually copied to the media folder (Kirby copies all files from the content folder to the media folder)? An is the resulting video intact? Are you testing this locally or on a remote server?

You might want to prevent this if you have problems with copying huge files on shared hosting (as explained in the thread you linked to).

7

Mmmh good call, I can only see the images in the media folder.
Do you have any idea what could be the problem? The video files are small, under 1mb.

I’m testing on a local environment using valet.

8

According to your mime type, you are trying to use .mov files in the browser? I don’t think that mime type is supported in browsers.

9

you are right! switched to .mp4 and now everything is working.
may thanks for your support @pixelijn !

for future reference the opening issue of topic has been solved here: Sorting of different file types - Kirby 3 / Solved :white_check_mark: - Kirby

the issue about videos not loading has been solved by switching from .mov to .mp4