Trello card onebox

Feature
1

Seems like an obvious onebox but does not appear to be enabled at the moment.

Would generate the typical default trello view of a card inside a box representing the list the card is embedded in.

2 Likes
2

We are fine with a PR to add this if anyone wants to work on it.

2 Likes
3

Sorry I can’t get it. Can you explain a bit your idea?

4

Also, keep in mind that in general, oneboxes are designed not to have dynamic content in them. Once they are ‘baked’ they stay that way… So if you onebox a trello card, and then later change the title, that change won’t be reflected in the onebox.

4 Likes
5

Good point. I’d wager that for a large majority of the times a person would include a link to a trello card, it would be unlikely that the text would materially change on the title of the card. It will in some cases. The list the card is associated with is likely to be much more volatile.

Alessio, are you familiar with Trello? If not, check it out http://trello.com

6

Yes, I’m an huge fan of Trello but I can’t get where do you want use
onebox on Discourse… can you make an example of this?

7

hi, so have you guys enabled oneboxing of trello cards in discourse?
i tried to add https://trello.com in whitelist for onebox settings
yet cant see the trello card being oneboxed.

can you tell, by when I can expect this feature, if not already present

8

no one on the core team is working on this, or is planning to work on this.

You have three options

  1. Commission someone to work on this, or work on it yourself
  2. Become a customer of ours and ask us to build it, at which point it will be added to the queue
  3. Work with trello to ensure they implement opengraph properly in which case it should just work :tm:
6 Likes
9

Does Trello support OpenGraph or oEmbed yet? Can anyone with a Trello board check?

10

No, it doesn’t.

4 Likes
11

I wanted to embed a trello board, and while they don’t have any support for oembed, they do support iframes of content by changing a board url like

https://trello.com/b/nC8QJJoZ/trello-development-roadmap

into

https://trello.com/b/nC8QJJoZ.html

I’ve wrapped up that simple logic into a onebox and submitted a PR:

https://github.com/discourse/onebox/pull/359

Screenshots

A board embed looks like this:

Screen Shot 2017-07-05 at 00.08.27.png943×578 88.8 KB

And a card embed looks like this:

Screen Shot 2017-07-05 at 00.09.18.png788×371 34.9 KB

8 Likes
12

All merged in and working - thanks @eviltrout :slight_smile:

13

This is looking pretty strange the whole scrolling thing is a bit weird.

Is there a way to get a less scrolly one going?

4 Likes
14

Agreed it’s not perfect - but with the way trello boards are used (lots of lists horizontally) I don’t really see how it could be displayed without scrolling :frowning: Even opening that board in a full screen browser requires a lot of scrolling.

Links to specific cards will onebox with minimal scrolling (depending on height of card):

I guess one option is to not bother show the content of the board itself, and just show some meta-data about it instead…

3 Likes
15

Yeah I agree that oneboxing the entire board isn’t necessary. It ends up feeling like an iframe with trello.com inside it. Oneboxing individual cards looks great though!

6 Likes
16

Yeah this is really bad, on mobile there is no way to scroll it at all. We have been down this road with Google Docs and it is a trail of tears. Best to show a summary of the instance rather than heavy, ineffectual embedding.

5 Likes
17

Is it possible to make this work with private Trello boards (where obviously authentication or an API token would be required)?

18

Trello announced new support for embedding cards and boards, so maybe a better onebox is possible.

5 Likes
19

The embedding looks a lot nicer! But this bit worries me:

Now when the page loads, the script will find that card, and replace it with a fancy embedded version.

Sounds suspiciously like Twitter’s embedding, which we can’t use on discourse because it modifies the height after the page loads… :confused: Maybe we can use the “programmatic card creation” in a decorateCooked method somehow…

Edit:
Yep, their handily un-minified javascript has some iframe-resizing magic going on, so I don’t think it’ll work :frowning:

var receiveMessage = function receiveMessage(event) {
      if (!isAllowedOrigin(event.origin)) {
        return;
      }

      if (event.data.command === 'resize' && event.data.secret) {
        var card = _this.activeCards[event.data.secret];
        if (!card || !card.el) {
          return;
        }
        var newHeight = event.data.options.height;
        if (newHeight !== undefined) {
          card.el.height = newHeight;
        }
4 Likes