[nodebb-plugin-link-preview] Rich Embeds and Link Previews

[julian]

You may have noticed me testing some rich embeds on this forum, or perhaps you've noticed that on this board, pasted links automatically expand/unfurl into a pretty little box instead of staying as a plain anchor.

This is due to the Link Preview plugin, which I started working on last month!

Link Previews

... wait, why did I just paste a boring ol' anchor like that?

https://github.com/NodeBB/nodebb-plugin-link-preview/

SHAZAM!

---

You can install this plugin by running npm install nodebb-plugin-link-preview, or via the plugin manager. It should show up on any NodeBB v3 instance.

[julian]

The original impetus for this plugin was due to IFramely starting to become unreliable and/or slow, causing topics to load slowly.

This plugin is the culmination of some discussion by @phenomlab and I, who in parallel, ended up taking different approaches to resolving the problem.

He has detailed his efforts for an IFramely replacement (using OGProxy) on his site, check it out!

[julian]

Release v1.1.0

• A framework for "special embeds" was built out, and a couple defaults added in. A special embed would be one where a third-party provides a preferred embed code for use instead of the default box that ships with this plugin.
• YouTube and Vimeo are the built-in defaults, but additional ones can be added fairly easily.
• There is also a new ACP interface that builds upon commits in v3.2.x, so that is the new minimum version required.

[FrankM]

Thanks @julian for this plugin.

I have deactivate my iframely plugin and test your plugin.

There must be a blank line above the link. Is that the way you want it? When there isn't an blank line we got no preview. Which is not so bad, see the example

And what i don't need is an preview in this code.

Sources:
* Link1
* Link2
and so on

[julian]

@FrankM the former is correct. I didn't want it to automatically capture and unfurl anchors within paragraph text, so it needs to be a link all on its own, without custom anchor text.

The latter re: list items is a valid bug, I'll have to fix that @baris also pointed it out to me yesterday

[josef]

@julian It's quite confusing that clicking on the image opens the image in a new tab, instead of the link itself...
I don't think this is expected behavior, the expected behavior is that clicking on the image opens the link, and those who want to view the image enlarged will right-click > open image in a new tab

[julian]

@josef I agree! I'll look into making this change. It's not something the ntfy plugin does, but rather core automatically wrapping images in links.

[josef]

@julian ntfy plugin? What does it have to do with nodebb-plugin-link-preview?

[julian]

@josef sorry, I meant link-preview

[baris]

@julian if you wrap the image with an anchor tag then the wrap code in core will ignore it https://github.com/NodeBB/NodeBB/blob/master/public/src/client/topic/images.js#L21

[julian]

Thanks @baris — this is now done on v1.1.1

[torn2]

Will this be updated to have the player in the card, instead of having to click on it and then go to YouTube?

Edit: just editing to regenerate the preview - @julian

[julian]

@torn2 yes, that's available now, but I'm guessing the plugin isn't updated on this forum yet

See: https://community.nodebb.org/post/94524

[baris]

@julian this forum is running 1.1.1

[julian]

@baris well... That's not good then

---

Ah, the YouTube special embed just wasn't turned on here.

[torn2]

@julian Awesome, thanks!

[PitaJ]

The YouTube embed overflows on mobile, causing the page to have empty space to the right. Probably needs a max-width.

[torn2]

Is there a setting to turn on embeds? It will not embed YouTube now that I changed to 3.2.2

[julian]

@torn2 the plugin is configurable via the ACP. Including the YouTube embed.

[torn2]

@julian said in [nodebb-plugin-link-preview] Rich Embeds and Link Previews:

@torn2 the plugin is configurable via the ACP. Including the YouTube embed.

Wher in the ACP do we find the settings for this? I do not see it in the plugin as any settings available for this plugin.