Jump to content
nbcommunication

TextformatterVideoMarkup

Recommended Posts

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

  • Like 9

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Details-body.jpg

Input-body.png

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

YTmarkup.jpg

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...