Rich Embeds

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.

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.

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

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.

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 👍️

pkernstock

Thanks for the great extension, @clarkwinkelmann!

I'd like to use the proxy feature, but if I'm not mistaken it's not working as expected. When loading the discussion, I can see a request to githubassets.com directly, instead of being proxied through the server. (The domain can't be resolved as it's blocked in some blocklists in my environment I guess)

Here's a screenshot:
Bug?

And I made sure the proxy feature is enabled (and also cleared the cache):
Feature

And I'd like one additional layout: The same as "Inline", but leaving the link text untouched. (No icon, no title change, etc)

010101

Sometimes multiple images are scraped. I've been trying to add CSS which will only allow 1 image to show. I haven't been successful. img:first-child img:first-of-type hides all of the images.

010101

Here's the ending slash issue. I'm guessing you'll have to force the code at some point to add an ending slash? Previews only show if I add the ending slash.

pkernstock

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

Thanks for the quick fix! Works now!

Just one concern: Obviously the proxy must use a public reachable API, in this case it is domain.tld/api/kilowhat-rich-embeds/proxy?url=<URL>. However I'm a bit concerned that the proxy API can be used for all addresses and queried outside from discussions.

Or to put it in a question/feature request: Would it be possible appending the discussion id to the API call and verify the proxied URL before crawling the URL to prevent abuse of the API for other purposes?

010101

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

It was that ending slash thing causing that too.

I’ll email you the link.