Hi all,
Just began my first project with Kirby and am building a portfolio website for a friend who is a videographer but very much learning the CMS and its template language so any help / guidance would be hugely appreciated.
I’m building out a project page in which I am hoping to show a series short videos or trailers which then play in full within a lightbox when clicked. I’m currently playing around with page / file blueprints to setup a section which contains the following:
- Short trailer (video format)
- Full length film (video format)
- Meta data (Title, description, year etc)
Can I ask what the best approach would be to achieve the above? I was thinking of using the files field to allow file uploads on the project page for each project and then setting up additional fields within the blueprint for video files to contain the URL to the full length film however in an ideal world the user would be able to upload both a trailer and full-length film into the panel for each project.
Any help on how best to achieve would be much appreciated!
Thank you,
Lewis
Will there be multiple films per project or only one trailer/full film combination?
Hey texnixe,
For now, just the trailer and full film but would be keen to know how the configuration would differ if this extended beyond the 2x clips.
Just looking at the albums section which seems to have a similar structure to what I may need?
Edit: Forgot to mention, it would be great to also have the ability to upload a poster / cover image to display as a fallback in scenarios where the video doesn’t load.
Thank you,
Lewis
For a one trailer, one full film and a fallback image, I’d probably use three different files sections (not fields) with max files set to 1 for each section and a different file template for each section. This setup could then be extended to include more files, but in that latter case you would have to use a select field to set up the relations between the files in the file meta data.
Thank you, that all makes sense! Although I presume this would leave me with three distinct / separate sections within the panel for the trailers, full length films and fallback images?
If I implement that setup, how would that work in terms of displaying the trailer on the the page via the template which can then be clicked to show the corresponding full length film as I presume this approach means each upload (trailer, full film, fallback) are not related in anyway?
Would a pages approach work where I have a blueprint for the projects page and a seperate blueprint for child pages which would contain 2x files sections for the trailer & full-length along with fields to capture all the metadata I need - Any downsides to this approach?
Thanks so much for your help, much appreciated!
Yes, exactly.
That’s also correct. This is not an issue as long as there is only one trailer/film/fallback image. As I already said, in case of multiple such combinations, they need some explicit relation, for example though a select/files field where you select the related film/image.
Alternatively, each combination could of course also live in a subpage and you would then fetch the files in parent.
As almost always, there are several ways to achieve something and sometimes it’s worth justt trying things out to see what works best in a particular situation.
Great, thank you texnixe - I’ve setup as pages and will aim to render the files in the parent page - Will let you know how I get on but many thanks for all of your help and quick responses!
Hey texnixe,
Just trying to output the files in the template, I’ve setup two nested foreach loops to loop over subpages and grab videos, however am struggling to then store the URL of the trailer and full-length films in variables which I can then output in the template / video element.
I was hoping I could filter by template to grab the URL of both the trailer and full-length film but that doesn’t seem to be working, any ideas of what I’m doing wrong?
If I change the src attribute within the video element to $videotrailer I receive an error and I also originally tried $video->template(‘film-trailer’)->url() but this also gave me an error so not sure what to try next.
Thank you,
Lewis
<!-- Fetch projects/videos from subpage -->
<?php foreach($page->children() as $subpage): ?>
<?php foreach($subpage->videos() as $video): ?>
<?php
$videotrailer = $video->template('film-trailer');
$videofull = $video->template('film-feature');
?>
<video width="100%" height="auto" loop autoplay muted poster="">
<source src="<?= $video->url() ?>" type="<?= $video->mime() ?>">
</video>
<?php endforeach ?>
<?php endforeach ?>
You cannot filter a single video by template, and in this case, I’d use findBy() to get a single element rather than a collection:
$videotrailer = $videos->findBy('template', 'film-trailer');
$videofull = $videos->findBy('template', 'film-feature');
But I’m not so sure the loop makes sense here.
<?php foreach($page->children() as $subpage): ?>
<?php
$videotrailer = $video->template('film-trailer');
$videofull = $video->template('film-feature');
?>
<?php if ( $videotrailer ) : ?>
<video width="100%" height="auto" loop autoplay muted poster="">
<source src="<?= $videotrailer->url() ?>" type="<?= $videotrailer->mime() ?>">
</video>
<?php endif ?<
<?php endforeach ?>
And then link from the trailer to the full video.
Got it, that makes sense, thank you 
I just tried your example in the template however received an error for the following line, any ideas why that may be happening?
<source src="<?= $videotrailer->url() ?>" type="<?= $videotrailer->mime() ?>">
What sort of error? Call to member function url on null? Have you replace your two lines with the ones I suggested? I forgot to copy them into your original code…
Sorry, should have been more specific! I had an ‘Undefined variable: videos’ error based on your snippet. I was thinking $videos was a native Kirby method but have just done some reading and think I’ve fixed the errors through changing the 2x variables to use the $subpage variable and the videos method:
<?php foreach($page->children() as $subpage): ?>
<!-- Store URLs in variables -->
<?php
$videotrailer = $subpage->videos()->findBy('template', 'film-trailer');
$videofull = $subpage->videos()->findBy('template', 'film-feature');
?>
<!-- Video Element(s) -->
<?php if ( $videotrailer ) : ?>
<video width="100%" height="auto" loop autoplay muted poster="">
<source src="<?= $videotrailer->url() ?>" type="<?= $videotrailer->mime() ?>">
</video>
<?php endif ?>
<?php endforeach ?>
Thanks so much for your help so far, now got the videos displaying properly on the page and looking really sharp and learnt a lot in the process!
videos() is a Kirby method which should fetch all videos from a page. But if you have an undefined variable, where would that be, I can’t see an $videosvariable in the code snippet above (unless I’m blind).
Sorry, I pasted the most recent code which I tweaked to solve the issue. I replaced the below (which threw the error based on the $videos variable):
<?php
$videotrailer = $videos->findBy('template', 'film-trailer');
$videofull = $videos->findBy('template', 'film-feature');
?>
With:
<?php
$videotrailer = $subpage->videos()->findBy('template', 'film-trailer');
$videofull = $subpage->videos()->findBy('template', 'film-feature');
?>
Now working nicely Thanks so much for your help!
1 Like