Link Previews

*** Abandoned ***

A Flarum extension which adds a new BBcode called preview. This allows you to post a link with a maginifying glass icon to the right of the link. Hover over or tap on the magnifying glass icon and a preview will load via an iframe. Some websites will not load in iframes; they don't allow it. If you run into this, the preview simply will not load and you will see a browser error. This is your signal to edit your post and remove the preview BBcode. Better luck next time. 😉

Installation

composer require zerosonesfun/flarum-ext-link-previews

Updating

composer update zerosonesfun/flarum-ext-link-previews
php flarum cache:clear

Also, after updating, deactivate and then reactivate the extension. Go to your admin dashboard, click tools, and click clear cache. And, clear your browser cache too.

Known issue, if you want to call it an issue: You will notice that this purposely adds height to your post (some blank vertical space). This is because, if someone posts a link only (just one or two lines) then the preview was being cut off. No amount of CSS z-index or various positioning rules was fixing it for me. But, of course anyone is welcome to help me figure this out and contribute to this extension via github.

Links

An extension by Billy Wilcosky.

I already found a bug. This doesn’t work on mobile devices. At least not on my iPhone. Gosh darn it mobile devices! 😁 I’ll think of something to patch this. Maybe.

Update/Fix

  • Now works on any device
  • The loading box will now use one of your primary forum colors

tolgaaaltas This is looks much simpler

That’s basically what this extension is. But, I abandoned the display on hover part because it didn’t work on my iPhone. I tried various things to try and get the hover on my iPhone to work with no success. So, I went with a no hover version.

You could install the previous version of this extension to get the hover back. But again, it doesn’t work on iPhones and probably other mobile devices as well. 😕

      010101 Maybe you can add an option in extension settings for this? Because i can't use this version preview in articles.

      I have an idea for mobile devices; if mobile device users want to see preview, they will hold the search icon and see preview. You don't need to add a link to the search icon.

        Would it be possible, that every link is made into a link with preview without the bbbcode?

        Version 2.0 Released

        Glass Menagerie 👓️

        • Made the preview show on hover (or tap) only once again 👁️
        • Hover or tap on magnifying glass icon to show preview versus link 🔍️
        • Made CSS/Styling better 👕
        • Added hot sauce to make it spicy 🌶️

        See original post for install and update instructions.

        Known issue, if you want to call it an issue: You will notice that this purposely adds height to your post (some blank vertical space). This is because, if someone posts a link only (just one or two lines) then the preview was being cut off. No amount of CSS z-index or various positioning rules was fixing it for me. But, of course anyone is welcome to help me figure this out and contribute to this extension via github.
          2 months later

          010101 The preview window's position is wired... And when I move the mouse over the magnifying glass, the browser will automatically jump to the previewed URL. (Chrome has blocked popups) 。 【https://bbs.csur.fun/d/38-csur2】

            @jordanjay29 or any other moderator, this extension can be marked as abandoned. It somewhat works, but it needs a lot of work which I don't have time for right now.

            Plus, this was mostly just a fun experiment. I personally don't think link previews via an iframe is a good thing to do. More and more sites block you from loading their site in an iframe anyway.

              • [deleted]

              • Post #16

              010101 I personally don't think link previews via an iframe is a good thing to do. More and more sites block you from loading their site in an iframe anyway.

              Correct. It's a classic method of compromise via click jacking or malicious script injection.

                010101 It was a great little experiment. I think the only real way to make an extension like this would be to take a screenshot of the webpage using something like PhantomJS and then using that screenshot as the preview. iframes are horribly broken anymore (which in my opinion is a good thing for security reasons)

                  4 months later