Video (mp4) preview in panel

Not out of the box. You could achieve that with a custom section.

Ok, thanks!
Tell me, please, where read about it?


Other than that, it’s best to check out some example section plugins, e.g. this one:

And the UI kit you can build upon:

Thanks! Will look into this.

Thank you, Texnixe!

I had the same problem and thanks to your plugin, I got his to work.

I solved it with the exec() command just using ffmpeg.
For reference, here is the hook command I set up (extracting a thumbnail from the frame at 3 seconds):

  'hooks' => [
    'file.create:after' => function ($file) {
      if($file->type() === 'video') {
        exec('ffmpeg -y -i ' . $file->root() . ' -ss 3 -t 1 ' . $file->parent()->root() . '/' . F::name($file->filename()) . '.jpg');

So, this results in a card section like this (images and videos side by side):

Nice! However, the preview section in the file’s page is still empty:


Is there any way to easily feed the already generated thumb into this preview section somehow? Via the file blueprint perhaps?



You could greate a custom file model used for these files:

And within that model overwrite the standard panelImageSource method:

Returning the preview image instead.

For having a preview player in the FileView, you would need to overwrite/extend:

Not so trivial to be honest - you would need quite some experience with Vue etc.

I’m afraid I don’t quite understand. Why do I need to create a new file model? I am basically dealing with video files, is there no way to alter the behavior for video files only?

Unfortunately I have no idea how to do that. Do you have any pointers for me? Thanks!

Maybe I find the time tomorrow to look into that. Last time I tried out file models they didn’t work as I expected them to work.

@distantnative: Just to confirm: A file model is supposed to work on a file blueprint basis, right? So if I assign a customvideos blueprint to a file, I can create a CustomvideosFile model for it and it will work anywhere I use this file?

Yes, that’s the plan. If this isn’t working right now, we have stumbled upon a bug.

No, there is no differentiation in the core between file types on that level. $file is always a normal File object, no matter if image, pdf or video. And thus follows the default code for the panel preview image.

As I already posted it here:

As far as I can see, the user model has been fixed since but the issue is still open.

Ahh, I missed in the issue that it’s for file models too.
But @texnixe can you confirm that the fix has fixed your user model porblems?

Unfortunately, I didn’t manage to test it yet. Will try tonight and let you know.

Ok, I don’t understand anything of the discussion anymore, but it is safe for me to assume that the video thumbnail as preview image is to complicated for me to achieve.

@texnixe, would this be a reasonable feature to request? If so, I would write up a feature request. Actually I think the whole video file format could need some love. In my projects, I almost always need images side by side next to videos and find it very unfortunate that with images you have a wealth of metadata and with video files almost none.

Could you explain what you mean? Not sure I understand.

Well, with images you have all this infos like a thumbnail that gets auto-generated, the resolution, the orientation and so on. I would be nice if kirby can read the most basic informations from videos as well, such as thumbnail extraction, resolution, orientation, framerate, length etc.

This is nothing that can be done without a library like ffmpeg which cannot be installed everywhere. It therefore doesn’t make sense to provide built-in functions that require something that is not available everywhere.

Extracting meta data from video files can be achieved with a plugin. As regards storing information about an associated poster for each video file, that information could be stored in the meta data file. Then you can fetch these images for display in the Panel.


hi stephan… could you show me your steps. i am a newby, i don’t get it with the file method plugin. could you show your codes? thanx