Audio and video tag with kirbytext

Kirby 3 Solved ✅
1

Hi

I would like to build a custom audio and video tag to allow the user to add bold or italic inside captions. Some plugins here and there doesn’t have this function. I’ve followed some topics but this one I have made is deletting some part of my text article for no reasons…

Ideally, this little plugin would wrap the video/audio inside <figure> and caption inside
Do you know how can I fix it ? Thx

<?php

Kirby::plugin('your/plugin', [
   'tags' => [
      'audio' => [
         'attr' => array(
            'caption'
         ),
         'html' => function($tag) {

            $caption = $tag->attr('caption');
            $url     = $tag->attr('audio');
            $file    = $tag->file($url);
            $url = $file ? $file->url() : url($url);
            if(!empty($caption)) {
               $audiocaption = '<p class="audio-caption">' . escape::html($caption) . '</p>';
            } else {
               $audiocaption = null;
            }
            return '<audio controls><source src="'. $url .'"'. ' type="' . $file->mime() . '"></audio>' . $audiocaption;

         }
      ]
   ]
]);
2

You need to return a single (container) html element, so wrap your audio and caption inside a figure as you want to anyway.

If you use Kirby’s Html class, things are easier to handle than concatenated strings.

3

You can also put your tags in a seperate file to avoid bloating your plugins main index.php

Kirby::plugin('your/plugin', [
   'tags'  => require __DIR__ . '/src/tags.php',
]);

in src/tags.php:

return [
 
   'audio' => [
            'attr' => array(
               'caption'
            ),
            'html' => function($tag) {

               $caption = $tag->attr('caption');
               $url     = $tag->attr('audio');
               $file    = $tag->file($url);
               $url = $file ? $file->url() : url($url);
               if(!empty($caption)) {
                  $audiocaption = '<p class="audio-caption">' . escape::html($caption) . '</p>';
               } else {
                  $audiocaption = null;
               }
               return '<audio controls><source src="'. $url .'"'. ' type="' . $file->mime() . '"></audio>' . $audiocaption;

            }
   ] 

];
4

Thanks for the reply but I don’t know how to return a single html element based on my code. I have a low level in programming PHP. Is there any example somewhere I can be inspired ?

5

Many… for example here:

It’s just a matter of concatenating strings…

You can even use a snippet…

:woman_shrugging:
That stuff is easy to look up…

6

Ok, after many tries, I’ve get to work with this code

<?php

Kirby::plugin('your/video', [
   'tags' => [
      'video' => [
         'attr' => array(
            'caption'
         ),
         'html' => function($tag) {

            $caption = $tag->attr('caption');
            $url     = $tag->attr('video');
            $file    = $tag->file($url);
            $url = $file ? $file->url() : url($url);
            if(!empty($caption)) {
               $audiocaption = kt(escape::html($caption)) ;
            } else {
               $audiocaption = null;
            }
            return '<figure class="video"><video nocontrols playsinline><source src="'. $url .'"'. ' type="video/mp4"></video><figcaption>' . $audiocaption . '</figcaption></figure>';

         }
      ]
   ]
]);

Everything is working properly on local, but when I send this plugin to the server, I get blank page with pages that doesn’t have video tag on their content…Do you know where does it come from ?
Note : I’ve used kt(escape::html($caption)) to get italic and bold into captions.

7

No, no idea why it fails on those pages, but check your server and php error logs.

On a side note, I’d only render the figure if $url is not empty. And your code as it is will also render an empty figcaption if $audiocaption is empty.