Rich Embeds

clarkwinkelmann

Price: 20 USD lifetime license
Bundled translations: English
Flarum compatibility: 1.2+
See and purchase on Extiverse

Rich Embeds is a Flarum extension that adds previews to links posted in discussions.
The previews are generated from OpenGraph data or an optional fallback method.

The data crawling is performed by the Flarum server without any external service and is cached for fast retrieval and minimal impact on page load times.

Images and favicons can optionally be proxied through the server to protect the visitor's privacy.

A whitelist or blacklist of websites can be configured to control which websites are previewed and prevent abuse of the proxy script.

Post with 2 different styles of embed

See full documentation and installation instructions at https://kilowhat.net/flarum/extensions/rich-embeds

luceos

@Dark34983428 please let us know what you think of it 😃

Hari

luceos it would be nice if Extiverse offers some kind of trial* (1day or a week)

luceos

Hari it does. It's up to the author to set one per subscription. There are some serious risks of abuse with trials though, that's why no one has used them.

Darkle

Pretty cool from what I've tested so far, do you think ianm/synopsis could be supported to show Rich Embeds inside the <div inert>? would be nice.

clarkwinkelmann

Darkle I can try to take a look. But wouldn't this take a lot of space on the homepage? The embeds are quite large (visually) at the moment.

Because all of the data is stored in the database, it shouldn't hurt performance too much to load the embeds of every first post in the discussion list. But currently the embeds are only loaded when browsing the full discussion.

The way the extension is implemented, the content of notifications, emails and excerpts is intentionally not modified as it would look bad if the embed was converted to plain text without any way to tell it was part of an embed and not the post itself.

Darkle

clarkwinkelmann Yeah, it would be similar to how Twitter or Reddit embeds, I guess it should be something optional or only when Synopsis is on, so you can access the links directly from the discussion list.

Valeyard

Awesome. I don't think I will need this myself, but a lot of people will like this as it's one of the nice features that both Discourse and XenForo offer.

Teddan

wow it's a very needed extension! how it will look in mobile ?

Justoverclock

Teddan interested too for Flarum.it 🤟🏻

clarkwinkelmann

Teddan Justoverclock the current version doesn't have any mobile-specific styling, but the default styling is made to be responsive.

Block previews will be automatically resized to fit on the screen if the page is too narrow.

Inline previews will look the same, but the preview on hover might not appear on all mobile browsers because it's based on CSS :hover selector. Long clicking the link on mobile should reveal the preview.

I could add an icon/button to the right of a link on mobile to open the preview of inline links without having to click the link and risk accidentally navigating to it. Or I could add an optional modal that appears with the preview and asks for confirmation to navigate to the external URL.

I will probably make the text inside previews smaller on mobile because previews take a lot of space at the moment. Any styling suggestion is welcome! I'm planning to add more customization options in the future, but I didn't want to add too many in the first release since I wasn't sure what people would be interested in.

010101

You got my attention with “cached.” Because there are other link preview options now. But, the cache part is nice. I think I will purchase this.

Would you consider one day adding a setting to change the layout? The current way looks fairly large. I kind of like a smaller type preview.

clarkwinkelmann

010101 there are currently 2 display styles, but only the first is visible in the screenshot.

The second mode available right now is "horizontal" with the image to the right of the text.

I will probably add some sort of "compact" preview with a much smaller footprint as well, I'm not sure how to design it yet though.

Custom CSS can be used to reduce the font size or embed width already if wanted. I can provide help writing custom CSS if someone has a specific design in mind.

talli

Will this extension work with Google Workspace documents (slides, sheets, docs)?

Thanks!

Talli

clarkwinkelmann

talli Will this extension work with Google Workspace documents

I have not tested that website yet. If it includes OpenGraph tags, it should work.

It would likely never work for private documents in any case since Google would not leak information about such a document via its URL.

010101 Suggestion for future… some way to show the user that an embed is on its way

I'll check this out.

Right now it's supposed to show the preview in inline mode until the full preview is loaded, and then switch to the design configured in the layout setting.

I think I still need some improvements to make the extension work correctly if an asynchronous queue is configured in Flarum.

I haven't entirely decided how to show links being processed. The frontend doesn't know whether a link can be embedded until it makes a request to the API, so I didn't want to show the embed loading if it ends up not being embeddable. Similar concern after a link has been validated. Even if it's whitelisted, it might not end up having any OpenGraph data. I was thinking of showing a blank block preview while it loads, but it doesn't look very user friendly if the block is then removed once the preview fails.

I will try to show a spinner icon next to links that are being processed, then switch back to either plain link if not embeddable, or to the rich preview if successful.

I'm also thinking of adding an option to show a preview for all links, even if everything failed. In that case the preview will show a blank image and a text that says no preview could have been created (for 404 or invalid links for example).

010101

I have obtained this and it installed fine. No errors in browser console. But so far I can’t get a preview to show. At times it somewhat shows with images missing.

Update: I got a cnn.com URL to convert. But not flarum.org. Maybe flarum.org blocks such things.

But also, although it ended up working for the cnn.com URL it took multiple refreshes. I guess maybe to save resources/bandwidth it must not be instant?

Suggestion for future… some way to show the user that an embed is on its way. Not sure if that can be done. Like after you post, there’s a loading spinner next to the URL until the preview is ready?

Overall, it’s working and looks nice:

🥳

Another update: So far, this seems to struggle with some URLs. For example, a user shared the URL to their “weebly” website, and it didn’t convert. Even if a site has no open graph tags and even if it’s poorly coded, I think the backup scraper should get something. Even if it’s only the website title and favicon.

And I don’t say these things to criticize, I’m grateful for the time you put into this, and that you made it a one time fee! I’m just hoping that future versions might be able to convert more URLs and faster, or show a loading spinner.

010101

clarkwinkelmann I will try to show a spinner icon next to links that are being processed, then switch back to either plain link if not embeddable, or to the rich preview if successful.

I'm also thinking of adding an option to show a preview for all links, even if everything failed. In that case the preview will show a blank image and a text that says no preview could have been created (for 404 or invalid links for example).

I like these ideas. I’m thinking weebly.com blocks scrapers. I’ve now tried a few weebly website links, and this can’t get any information on them. Which isn’t a big deal. Some websites are going to block this type of activity. Or be designed in a weird way.

Side note unrelated to this extension: Flarum.org should stop blocking this type of activity. Shoutout to those who have control over this site. We should encourage other sites with the capability to make pretty previews pointing to flarum.org. The free link preview extension that’s out there also had a hard time with flarum.org links. Security may be a little too good? 🤷‍♂️

clarkwinkelmann

010101 Flarum.org should stop blocking this type of activity

Flarum doesn't have OpenGraph tags out of the box, so it won't be rendered by my extension (without fallback mode). I believe this (work in progress) extension adds such tags https://discuss.flarum.org/d/27092-blomstra-meta-an-open-graph-and-schemaorg-extension-with-cards

010101 Rich embeds seem to work more often and faster if the URL ends with a forward slash

I'll do some tests, but what probably happens is that if you enter a non-canical URL, the crawler might have to do multiple requests to follow the redirects before downloading the final page. So links entered with http:// instead of https:// or missing www. when the website uses such a domain will take longer to crawl. The ending slash on a website homepage should be automatically added by the crawler because you can't make a request without a path, but I'll check what is happening.

010101

I might have discovered something worth looking into. Rich embeds seem to work more often and faster if the URL ends with a forward slash. For example: https://google.com/ instead of https://google.com

010101

clarkwinkelmann Flarum doesn't have OpenGraph tags out of the box, so it won't be rendered by my extension (without fallback mode).

I have fallback mode on. I was talking about the actual Flarum.org homepage which I assume isn’t Flarum since it’s just a webpage of some sort. It also may not have open graph tags. But, I would think the fallback would grab something. Unless… there’s some sort of strict security set up? Or, I’m guessing the fallback scraper needs some sort of adjustments?

luceos

010101 flarum.org is built with Laravel, it has no open graph.

clarkwinkelmann

Version 1.0.2 - April 10, 2022

Fixed image proxy toggle not being applied.

pkernstock I'd like to use the proxy feature, but if I'm not mistaken it's not working as expected

Sorry about this, I completely messed up the proxy feature just before release it seems. The setting value was completely ignored by the frontend. This is fixed in version 1.0.2.

010101 I have fallback mode on. I was talking about the actual Flarum.org homepage which I assume isn’t Flarum since it’s just a webpage of some sort

The Flarum.org homepage actually does have OpenGraph tags. This is what I see with fallback mode either enabled or disabled:

Can you share the exact link you are having trouble with?

010101 I've been trying to add CSS which will only allow 1 image to show

Can you provide an example link so I can test it with a future release to maybe improve the built-in CSS?

To hide all images except the first, this custom CSS should work:

.rich-embed-images img:not(:first-child) {
    display: none;
}

010101 Here's the ending slash issue

Thanks. I'll fix that and other small issues I've noticed in an update very soon 👍️