attachment-thumbnail

Sometimes, your Power-Up can provide additional information about an attachment, but it doesn't really require being pulled out into its own section. A great example of this is for files coming from storage services like Google Drive. To Trello, those are just URLs, but the Google Drive Power-Up can get thumbnail images, the real file name, as well as when the file was created, and last modified.

This is perfect for attachment-thumbnail:

In the case of Google Drive, you need to be authenticated before Google Drive can retrieve the additional metadata, so it can include a prompt to get the user to authorize.

Once the user is authorized, Google Drive can return much richer content:

Example Code

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var formatNPSUrl = function (t, url) {
  if (!/^https?:\/\/www\.nps\.gov\/[a-z]{4}\//.test(url)) {
    return null;
  }
  var parkShort = /^https?:\/\/www\.nps\.gov\/([a-z]{4})\//.exec(url)[1];
  if (parkShort && parkMap[parkShort]) {
    return parkMap[parkShort];
  } else {
    return null;
  }
};

window.TrelloPowerUp.initialize({
  'attachment-thumbnail': function (t, options) {
    var parkName = formatNPSUrl(t, options.url);
    if (parkName){
      // return an object with some or all of these properties:
      // title, image, modified (Date), created (Date),
      // createdBy, modifiedBy
      return {
        title: parkName,
        image: {
          url: './images/nps.svg',
          logo: true // false if you are using a thumbnail of the content
        }
      };
    } else {
      throw t.NotHandled();
    }
  }
});

If you need to provide the authorization prompt you can do so like this:

1
2
window.TrelloPowerUp.initialize({
  'attachment-thumbnail': function (t, options) {
    var parkName = formatNPSUrl(t, options.url);
    if (parkName){
      // return an object with some or all of these properties:
      // title, image, modified (Date), created (Date),
      // createdBy, modifiedBy
      return {
         title: parkName,
        image: {
          url: './images/nps.svg',
          logo: true // false if you are using a thumbnail of the content
        },
        initialize: {
          type: 'iframe',
          url: t.signUrl(TrelloPowerUp.util.relativeUrl('authorize-link.html'))
        }
      };
    } else {
      throw t.NotHandled();
    }
  }
});

Where authorize-link.html is just an anchor tag <a> and you can handle the click of that to open an authorization window.