TextformatterVideoMarkup

[nbcommunication]

Render oEmbed data from YouTube/Vimeo URLs... or TextformatterVideoEmbed for power users.

https://github.com/nbcommunication/TextformatterVideoMarkup

The use case...

On an upcoming project, we want to be able to render YouTube/Vimeo URLs as thumbnail images, that when clicked open up in a (UIkit) lightbox. Additionally, we want to be able to specify the thumbnail image - as part of a RepeaterMatrix block which contains a URL field (video) and an Image field (thumb).

The result is this module, which allows you to specify the markup used to render the oEmbed data:

• The formatter can be used on any Text field e.g. Text, Textarea (CKEditor or not), URL etc.
• Global configuration options are available (e.g. rel=0), based on TextformatterVideoEmbedOptions.
• An 'empty value' can be specified for URLs that do not return data from the oEmbed endpoint
• The render method is hookable, allowing you to customise rendering on a per page, per field basis

Plenty more information here ? https://github.com/nbcommunication/TextformatterVideoMarkup/blob/master/README.md

Back to the use case... How do we render the thumbnail and then use the image from our Image field?

In the module config Markup field:

<figure data-uk-lightbox>
    <a href="{url}" data-poster="{thumbnail_url}" data-attrs="width: {width}; height: {height}">
        <img src="{thumbnail_url}" alt="{title}">
    </a>
</figure>

Then in site/ready.php

<?php

$wire->addHookBefore('TextformatterVideoMarkup::render', function(HookEvent $event) {

  	// Arguments (for info)
	$tpl = $event->arguments(0); // string: The markup template
	$data = $event->arguments(1); // array: The oEmbed data
	$url = $event->arguments(2); // string: The requested URL
	$emptyValue = $event->arguments(3); // string: The empty value used if no data is returned

  	// Object properties (for info)
	$page = $event->object->page; // Page: The page
	$field = $event->object->field; // Field: The field
	$html = $event->object->html; // bool: Is it HTML being parsed, or plain text?

	// Replace the thumbnail image
	if($field->name == 'video' && $page->hasField('thumb') && $page->thumb) {
		$data['thumbnail_url'] =  $page->thumb->url;
		$event->arguments(1, $data);
	}
});

The module requires PW >= 3.0.148 and PHP >= 7. It probably doesn't need to, but the expectation is that power users will be able to meet these requirements!

The module is also Beta - please don't use in production yet. I suspect there will be edge cases related to the changes I made to the URL regexes from TextformatterVideoEmbed - so far though they are working for me. If you come across any issues please let me know!

Cheers,

Chris

[Roych]

Hello, I just noticed some weird problem, when pasting some text inside "body" field if TextformatterVideoMarkup is applied. The site gets completely unresponsive and won't load at all. The backend works but slow. Second I remove TextformatterVideoMarkup the site works normaly again. 

Updated the module and my PW is up to date. All updated through updater.

We already had some discussion over this here: https://processwire.com/talk/topic/24182-urgent-site-went-down-after-pasting-iframe-code/?tab=comments#comment-205301

Until I noticed that this module is the one making problems. I never had problems with this module until now.

Last error I got was:

Fatal error: Allowed memory size of 536870912 bytes exhausted (tried to allocate 28672 bytes) in /wire/core/WireShutdown.php on line 392

Maybe Im missing something or is there some bug present. ?

Thank you

R

[nbcommunication]

Hi @Roych,

Thanks for letting me know, I'll look into this in the morning - likely something to do with the regex.

To aid in debugging, can you please:

1. Confirm that this is the code that was pasted into the body field using the source option:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSczjrIs47Nd9iJiPFtTNH_sRJgdBOXvw29vJFKLo20jJJwIvw/viewform?embedded=true" width="640" height="4264" frameborder="0" marginheight="0" marginwidth="0">Nalaganje …</iframe>

2. Post the Markup you are using in the module config.

3. Let me know what other textformatters are used on the body field and their order?

That should hopefully allow me to debug the problem.

Cheers,

Chris

[nbcommunication]

Hi @Roych,

Just done a test and the pasted code isn't the problem for me, so I'm the problem likely lies in #2 or #3.

I also note the error messages from the other thread, particularly the mention of WireHttp, which suggests the module is falsely parsing a URL and trying to request oEmbed data from it. 

The setup of the body field would be a massive help in debugging this - if you are able to screenshot the Details and Input tabs, that would be brilliant.

Cheers,

Chris

[Roych]

Hello,

Yes this was the code I pasted. But I also tried to paste some other text that included some normal URLS (not youtube) and it happened again.

I don't have any other textformaters added to the field. Im posting the screenshots of the Details and Input settings. I hope this would help.

If you need anything else, fell free to ask.

Thank you

R

[nbcommunication]

Thanks @Roych,

Will get a similar setup in place and see if I can get it replicated and debugged.

Cheers,

Chris

[nbcommunication]

Hi @Roych,

I've managed to replicate the problem with Multi-language enabled. Once I've figured out the issue I'll push a fix and let you know!

Cheers,

Chris

[Roych]

12 minutes ago, nbcommunication said:

Hi @Roych,

I've managed to replicate the problem with Multi-language enabled. Once I've figured out the issue I'll push a fix and let you know!

Cheers,

Chris

Great, thank you very much. ? It is the awesome module it would be shame if it wouldn't work. ?

R

[nbcommunication]

Hi @Roych,

I've pushed a fix (v0.2.1). I needed to switch output formatting off before getting the Inputfield, which is used to determine whether it's HTML or not.

Thanks for letting me know about this - must set up a multi-language install for testing!

Cheers,

Chris

[Roych]

Great, no problem ?

R

[Roych]

Hi, 

I'm having some problems it does not show me the video it just outputs pasted url, what am I missing? Textformater is set on the body field but not working.

Or if I paste the link through source code I get this (prtscr. attached)

Thank you

R

 

Edit: Sorry I was still in debug mode. ? It show videos now but only If I paste the link through source code, if I pacte it normaly in ckeditor in shows the url. Any Idea on this, maybe?

Thank you

R

[nbcommunication]

Hi @Roych,

I think I know what the issue might be, and I may add a config option to prevent it. Answers to the following should clarify:

In the Details tab of your body field is Content Type set to Markup/HTML? (it was on the screenshot you posted, but I note that the CKEditor iframe method requires this to be set to unknown).

When you paste directly into CKEditor, what source HTML is generated for that line?

Conversely, if you paste into the source code, then come out of the dialog, then go back in, what source HTML is generated for the line?

Cheers,

Chris

[Roych]

if I paste it directly into ckeditor I get:

<p><a href="https://www.youtube.com/watch?v=317Mo2fwlTk">https://www.youtube.com/watch?v=317Mo2fwlTk</a></p>

But if I paste the url through source I get: (this one works and shows the video)

<p>https://www.youtube.com/watch?v=317Mo2fwlTk</p>

R

[nbcommunication]

Hi @Roych,

Thanks - the issue is the link. Both this and TextformatterVideoEmbed don't work on <a>links</a>, only plain URLs inside <p> tags. If you remove that it'll work *hopefully*!

Cheers,

Chris

[Roych]

if I remove everything (<a href .... >and <p>) under source it works, but when I paste the same plain URL directly in ckeditor it doesnt, just show url in frontend (it gives the <a href ...> around it).

 

[nbcommunication]

Hi @Roych,

If CKEditor is automatically making a <a>link</a> when you paste in the URL, then you need to unlink it using that option from the toolbar (chain icon with the cross in the bottom right).

Cheers,

Chris

[Roych]

Hello, 

Im getting oembed code as (og:description) description when sharing my posts on Facebook, if the video link is somewhere in the article. Doesn't matter where in the article it is. I even changed the description in SEO Maestro for article but I still get this code instead of description.

Also when I show latest articles on my homepage with truncated text, I still get this code. But in articles without video links is working fine.

Any Ideas.

Thank you

R

[nbcommunication]

Hi @Roych,

What is the template (in config) that you're using to output the oEmbed data? Are you using any hooks?

Does the page have a og:description tag in the <head> and if so what does this show in the source?

Cheers,

Chris

EDIT - apologies for the late response, was on holiday last week!