Module: TextformatterOEmbed

[felix]

So you've developed this shiny new website but your editors and marketing guys keep complaining they need more "native embedded content" with shiny share and retweet buttons because otherwise their text will look like ...text?
Look no further: This processwire module has you covered!

 

TextformatterOEmbed for processwire

 

What it does

At this point this module basically wraps the fabolous Essence PHP library by Félix Girault and adds some processwire magic to parse your boring Textareas and make your content look more bling blingthan ever before.
Disclaimer: This Module is heavily inspired by TextFormatterVideoEmbed by the awesome guy who created processwire: RyanCramer.

 

Requirements

• php 5.4+
• curl and/or allow_fopen on

Features

• Supports the following 32 providers out of the box

23hq Dipity Official.fm Ted
Bandcamp Flickr Polldaddy Twitter
Blip.tv FunnyOrDie Prezi Vhx
Cacoo HowCast Qik Viddler
CanalPlus Huffduffer Revision3 Vimeo
Chirb.it Hulu Scribd Yfrog
Clikthrough Ifixit Shoudio Youtube
CollegeHumor Imgur Sketchfab
Dailymotion Instagram SlideShare
Deviantart Mobypicture SoundCloud

(That's a lot of Hanna-Codes you can get rid of now, eh?):

• Add your own providers in the blink of an eye (if you're not good at regex - like me - it will propably take you a cup of coffee and a google search)
• Easy styling: Wraps embedded items with customizable BEM-Style classes including modifiers for every provider and embedtype. Choose to either add CSS directly in the modules configuration or to your existing stylesheets
• Choose to add pre defined Fluid Video CSS for your responsive design (or - again - feel free to add your own)

Usage

• Click check for new modules in ProcessWire Admin Modules screen. Click install for the module labeled: "oEmbed for processwire".
• Install the module
• Open the modules Settings page
• Add css classes either within the "Custom CSS" field or in a seperate CSS file. Every provider is wrapped with the following markup:

<div class="pw-oembed pw-oembed--providername pw-oembed--embedtype">
<div class="pw-oembed__inner pw-oembed__inner--providername pw-oembed--embedtype"></div>
</div>

If you're not happy with the "block" class .pw-oembed you can rename it to something you like better using the modules config. Every embedded media item and it's respective inner wrapper has two modifier classes: One for the provider (i.e. youtube, twitter...) and one for the media type (one of photo, video, link or rich according to the OEmbed specification). This should be enough classes to add some fancy icons, adjust widths per provider or whatever else you like to do.

• If you're missing a provider don't hesitate to open a pull request (see roadmap first) and I'll do my best to add it as soon as possible. In the meantime you can extend the available providers found in lib/essence/providers.php in the modules settings using the following JSON-Format (remember that you'll have to properly escape the regex):

[{
"23hq" : {
"class" : "OEmbed",
"filter" : "#23hq\\.com/.+/photo/.+#i",
"endpoint" :"http://www.23hq.com/23/oembed?format=json&url=%s"
}
}]

Roadmap

• Add moaaar providers:
  • Facebook (currently not providing a "native" oEmbed API)
  • Google Plus (currently not providing a "native" oEmbed API)
  • support for more fancy integration of Instagram posts (currently there are "just" images without fancy sharing stuff that will be embedded)
• Render only one javascript (i.e. ) when there are multiple items of the same provider
• Propably make this module more generic and add services as submodules at some point
• World domination

[netcarver]

@felix, @Beluga, @Martijn Geerts, @JoZ3, @WinnieB, @benbyf (and any other interested parties),

My apologies for messing up this thread - I inadvertently kicked off my link checker when I was reading this thread last night. This ended up visiting all the links on the page, including the topic moderation, "like this" and other buttons. I've undone as much damage as I can, but have basically messed-up the page.

I've un-installed my link checker to prevent this from happening again and offer my apologies.

To preserve the state of this thread at the point of disaster, I attach a screenshot of Google's cache for the page, starting with the first reply.

[Macrura]

i'm trying to get this to work for some soundcloud links - but nothing is happening; haven't started toubleshooting yet, but not sure where to start;

[gmclelland]

Ya @Macrura, I'm seeing this as well on my PW3 3.0.52 install.

I get the following error when trying to embed a soundcloud.com track.

PHP Notice: Trying to get property of non-object in .../TextformatterOEmbed/TextformatterOEmbed.module:131

Here is the stack trace

exception 'ErrorException' with message 'Trying to get property of non-object' in /Users/glenn/websites/pw3/wwwroot/site/assets/cache/FileCompiler/site/modules/TextformatterOEmbed/TextformatterOEmbed.module:131
Stack trace:
#0 /Users/glenn/websites/pw3/wwwroot/site/assets/cache/FileCompiler/site/modules/TextformatterOEmbed/TextformatterOEmbed.module(131): Tracy\Bar->Tracy\{closure}(8, 'Trying to get p...', '/Users/glenn/we...', 131, Array)
#1 /Users/glenn/websites/pw3/wwwroot/site/assets/cache/FileCompiler/site/modules/TextformatterOEmbed/TextformatterOEmbed.module(244): TextformatterOEmbed->getEmbedCode('https://soundcl...')
#2 /Users/glenn/websites/pw3/wwwroot/wire/core/Textformatter.php(60): TextformatterOEmbed->format('<h2>Si lobortis...')
#3 /Users/glenn/websites/pw3/wwwroot/wire/modules/Fieldtype/FieldtypeText.module(94): ProcessWire\Textformatter->formatValue(Object(ProcessWire\Page), Object(ProcessWire\Field), '<h2>Si lobortis...')
#4 /Users/glenn/websites/pw3/wwwroot/wire/modules/Fieldtype/FieldtypeTextarea.module(119): ProcessWire\FieldtypeText->___formatValue(Object(ProcessWire\Page), Object(ProcessWire\Field), '<h2>Si lobortis...')
#5 [internal function]: ProcessWire\FieldtypeTextarea->___formatValue(Object(ProcessWire\Page), Object(ProcessWire\Field), '<h2>Si lobortis...')
#6 /Users/glenn/websites/pw3/wwwroot/wire/core/Wire.php(376): call_user_func_array(Array, Array)
#7 /Users/glenn/websites/pw3/wwwroot/wire/core/WireHooks.php(698): ProcessWire\Wire->_callMethod('___formatValue', Array)
#8 /Users/glenn/websites/pw3/wwwroot/wire/core/Wire.php(402): ProcessWire\WireHooks->runHooks(Object(ProcessWire\FieldtypeTextarea), 'formatValue', Array)
#9 /Users/glenn/websites/pw3/wwwroot/wire/core/Page.php(1376): ProcessWire\Wire->__call('formatValue', Array)
#10 /Users/glenn/websites/pw3/wwwroot/wire/core/Page.php(1376): ProcessWire\FieldtypeTextarea->formatValue(Object(ProcessWire\Page), Object(ProcessWire\Field), '<h2>Si lobortis...')
#11 /Users/glenn/websites/pw3/wwwroot/wire/core/Page.php(1307): ProcessWire\Page->formatFieldValue(Object(ProcessWire\Field), '<h2>Si lobortis...')
#12 /Users/glenn/websites/pw3/wwwroot/wire/core/Page.php(1069): ProcessWire\Page->getFieldValue('body')
#13 /Users/glenn/websites/pw3/wwwroot/wire/core/Page.php(1552): ProcessWire\Page->get('body')
#14 /Users/glenn/websites/pw3/wwwroot/site/assets/cache/FileCompiler/site/modules/TracyDebugger/panels/ProcesswireInfoPanel.php(296): ProcessWire\Page->__get('body')
#15 /Users/glenn/websites/pw3/wwwroot/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-master/src/Tracy/Bar.php(133): ProcesswireInfoPanel->getPanel()
#16 /Users/glenn/websites/pw3/wwwroot/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-master/src/Tracy/Bar.php(89): Tracy\Bar->renderPanels()
#17 /Users/glenn/websites/pw3/wwwroot/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-master/src/Tracy/Debugger.php(254): Tracy\Bar->render()
#18 [internal function]: Tracy\Debugger::shutdownHandler()
#19 {main}

 

[gmclelland]

Other embeds like youtube and twitter work fine.  Just make sure you link the pasted url.

If I use TracyDebugger to bd($embed); on line 130, it shows $embed = NULL.

That looks strange.  It should have a php object.  I'm not sure why it is failing.

Maybe @felix knows more?

[gmclelland]

Strange... I tried a different song on soundcloud.com and the module worked fine.

This works:

https://soundcloud.com/centricitymusic/jordan-feliz-the-river

but this doesn't (throws the error)

https://soundcloud.com/thirdday/i-need-a-miracle-1

[Macrura]

basically the module is not working in terms of the string replace;

it can't find the anchor to replace, so that probably needs to be reworked.

For example, if i put [replace-me] in the content and then change the search string to that, then the soundcloud embed shows up;

also string comparing the whole anchor element that the module predicts it will find, with the actual one on output is also always false, but haven't figured out why yet

[Macrura]

ok i fixed my issue, it was another textformatter that was interfering somehow with the module's ability to find the part to replace; all good now, just had to move that one last...

[gmclelland]

Hrmm... I only have one text formatter on the body field.  Textformatter OEmbed

Can you try embedding https://soundcloud.com/thirdday/i-need-a-miracle-1 and see if you get an error?

If I try the following on line 130 it gives the error because $test is NULL

$test = $this->essence->extract("https://soundcloud.com/thirdday/i-need-a-miracle-1");
bd($test);

However, if I try the following it works

$test = $this->essence->extract("https://soundcloud.com/centricitymusic/jordan-feliz-the-river");
bd($test);

This makes me think that it is something wrong with the essence php library and not the textformatter-oembed module.

I started an issue at https://github.com/essence/essence/issues/127

It looks like textformatter-oembed is running 3.2.0.  The latest essence library is at 3.3.0 maybe that will fix it?

 

 

[Macrura]

yes, that url doesn't work for embedding for some reason, did you try upgrading the essence lib?

Also, i still think that that the module's way of replacing is not going to be reliable enough, because it assumes that the user will not inadvertently have attributes on the anchor element, like rel, or target; therefore those will always fail - i think the only fullproof way for the module to do the replacement is to possibly use the essence built in replace, or use a domdocument and cycle through the anchor tags...

[gmclelland]

No, I haven't tried upgrading the Essence lib.  The essence library creator did answer me at https://github.com/essence/essence/issues/127.  He basically said it was a problem with that page on soundcloud.com.

That makes me wonder if this module also needs a check for if ($embedCode=NULL) { continue } around line 130... in case there is a problem with the embedded object's oembed site not returning anything. In that case do nothing and just leave the link the way it is.  At least that would keep the page from throwing an error.

[Macrura]

yes, the module should do that for sure...

[gmclelland]

Here is a pull request for the problem mentioned above https://github.com/felixwahner/TextformatterOEmbed/pull/7

[thlinna]

I get the following error message:

Error: Exception: Data too long for column 'embed_code' at row 1 (in xx/core/Database.php line 125) #0 [internal function]: ProcessWire\Database->query('INSERT INTO tex...') #1 xx/core/DatabaseMysqli.php(38): call_user_func_array(Array, Array) #2 xx/site/assets/cache/FileCompiler/site/modules/TextformatterOEmbed/TextformatterOEmbed.module(148): ProcessWire\DatabaseMysqli->__call('query', Array) #3 xx/site/assets/cache/FileCompiler/site/modules/TextformatterOEmbed/TextformatterOEmbed.module(247): TextformatterOEmbed->getEmbedCode('https://www.ins...') #4 xx/core/Textformatter.php(60): TextformatterOEmbed->format('<p></p>\n<ul>\n<l...') #5 xx/modules/Fieldtype/FieldtypeText.module(94): ProcessWire\Textformatter->formatValue(Object(ProcessWire\Page), Object(ProcessWire\Field), '<p></p>\n<ul>\n<l...') #6 xx/wire/modules/Fieldtype/FieldtypeTextarea.module

[gmclelland]

What is the URL you are embedding?

[thlinna]

The URL is a previous instagram embed code.

[gmclelland]

Can you share the url so we can try it on our installs?

[hellomoto]

I'm trying this out in PW 3. I have in my TextFormatterOembed field:

Quote

Extracted from

{{SOUNDCLOUD TRACK URL HERE sans brackets; can't put it HERE because it actually DOES OEMBED IMMEDIATELY}}

Nothing happens in CKEditor or displayed output on page. Should this not work for PW 3 or am I doing something wrong?

EDIT: Never mind, all I had to do was make it a link (& without target blank).

[Noel Boss]

Would be great if the plugin could handle links without surrounding a-tag. I have a link-field for urls and i have to first convert it into a tag before converting it to the oembed code:

$modules->get('TextformatterMakeLinks')->format($page->linkfield);
$modules->get('TextformatterOEmbed')->format($page->linkfield);

Also an option to only get the src would be great (for usage in lighboxes for example). Right now I need to extract it again:

$xpath = new \DOMXPath(@\DOMDocument::loadHTML($page->linkfield));
$src = $xpath->evaluate('string(//iframe/@src)');

 

[Noel Boss]

Hi Felix, again thanks for your awesome Plugin! It's really handy! I think i found a bug tough; 

This link is not correctly converted:
`https://www.youtube.com/watch?v=Vbw3dGbWsEM&amp;t=3s`

This link works:
`https://www.youtube.com/watch?v=Vbw3dGbWsEM&amp;`

Added an issue on github: https://github.com/felixwahner/TextformatterOEmbed/issues/9

Keep up the great work!

[hellomoto]

I installed this on the latest dev PW version and didn't touch any CSS for it; enabled it for a CKEditor field (and plain textarea without CKEditor); tried YouTube, Vimeo, and SoundCloud URLs and they all just output the URLs wrapped in plain <p/> tag(s).

What am I missing?

[gmclelland]

You need to enable the textformatter in the field’s settings.

[hellomoto]

18 hours ago, gmclelland said:

You need to enable the textformatter in the field’s settings.

It's enabled, that's why I'm confused. (curl is also enabled)

[gmclelland]

Did you install the library with Composer?

Here is what my body field settings look like:

Maybe the order of the formatters matters in your setup?

[hellomoto]

On 7/15/2020 at 7:23 AM, gmclelland said:

Did you install the library with Composer?

I had not. It works fine now, thank you.