Video button in textarea

The CMS Questions
1

Hi there,

From the textarea docs it seems there’s no “video” button available for a textarea out of the box. But since the (video: ) tag does work there, I was wondering if there’s a simple way to extend the textarea field or a plugin to add a video button with its respective dialogue box for filling in the video URL.

Thanks!

2

The markdown field plugin let’s you create custom buttons:

3

Thanks @pixelijn! Once again the Markdown Field is the solution to my problems.

I managed to make it work for my use case. However, since I added that button, the file button stopped working. Any idea why? I do have my own plugin in place for the (image: )tag to output srcset+lazyloading, but that shouldn’t be in the way of the file button opening the dialogue window to choose images from my files, right? Any ideas why this could be happening? Thanks!

4

Code?

5

This is my plugin for the file button:

// From: https://forum.getkirby.com/t/srcset-and-the-kirby-image-tag-what-about-file-names-and-sizes/17061/8

$originalTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('chinochano/image', [
	'tags' => [
		'image' => [
			'attr' => array_merge(
				$originalTag['attr'],
				[
					'srcset',
					'sizes'
				]
			),
			'html' => function($tag) use ($originalTag)  {

				$file    = $tag->file($tag->value());
				$srcset  = $tag->srcset;
				$srcset  = option('thumbs.srcsets.' . $tag->srcset ) ?: option('thumbs.srcsets.default');
				$sizes   = option('srcset-sizes.' . $tag->sizes ) ?: option('srcset-sizes.default');
				$result  = $originalTag['html']($tag);

				if (! $file === true || is_null($srcset) === true || is_null($sizes) === true) {
					return $result;
				}

				$pattern = '/<img.*?>/i';

				// src image with sizes and quality (if any) in filename
				$src = $file->thumb('pixel')->url();

				// build a new image tag with the srcset and sizes
				$image = Html::img($src, [
					'width'  => $tag->width,
					'height' => $tag->height,
					'class'  => $tag->imgclass . ' lazyload',
					'title'  => $tag->title,
					'alt'    => $tag->alt ?? ' ',
					'data-src' => $file->thumb('default')->url(),
					'data-srcset' => $file->srcset($srcset),
					'data-sizes'  => $sizes
				]);

				// replace the old image tag
				$result = preg_replace($pattern, $image , $result);

				return $result;
			}
		]
	]
]);

EDIT:

To add other relevant pieces of code…

The concerning piece of the blueprint:

fields:
      textbody:
        label: Body
        type: markdown
        size: large
        font:
          family: sans-serif
        required: true
        maxlength: 2000
        buttons:
          - bold
          - italic
          - link
          - file
          - video
        files: page.images
        uploads: false

The markdown plugin is in /site/plugins/markdown-field/.

I’ve added the custom button to the markdown fields in /site/plugins/markdown-field-video/ (chose that folder name to make sure it would be loaded after the markdown field plugin, as explained on the documentation).

In there I have two files:

index.php with the standard:

Kirby::plugin('community/markdown-field-video', []);

And index.js:

markdownEditor.button('video', {
extends: 'default',
data: function() {
	return {
		label: 'This is a video button',
		icon: 'video',
		type: 'video'
	}
},
methods: {
	action() {
		this.insert('(video: '+ this.selection +')')
	}
}
});
6

But that’s your Kirbytag code, not your code for the video button?

7

Indeed, that’s the Kirbytag code, because I thought that was the thing that was getting in the way. I’ve edited my previous answer with other relevant pieces of code.

8

In the meantime, I’ve discovered the file button works again if I remove the uploads: false option I had. Looks like a bug. I guess this is something to post on the plugin page.