Thumbnail

type: 11 Messages

The Thumbnail is a small image shown on the right of a Section. Great for avatars, logos or product icons.

Preview

My BotAPPToday at 12:00 PM

Mystery bag

Contains random items for your character.

Price: 250 🪙

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "accent_color": 16705372,
      "components": [
        {
          "type": 9,
          "components": [
            {
              "type": 10,
              "content": "### Mystery bag\nContains random items for your character.\n**Price:** 250 🪙"
            }
          ],
          "accessory": {
            "type": 11,
            "media": {
              "url": "attachment://product.png"
            },
            "description": "Orange shop bag"
          }
        }
      ]
    }
  ]
}

Fields

Field	Type	Description
type	integer	required Always 11.
id	integer	optional Unique identifier.
media	unfurled media item	required The image: { "url": "..." }. Accepts https:// or attachment://name URLs.
description	string	optional Alt text (accessibility). Max 1024 characters.
spoiler	boolean	optional Hide as a spoiler. Defaults to false.

Caution

• Images only (including animated GIF and WebP). No video.
• Can only be used as the accessory of a Section, not on its own in the message.

Code

HTTP

{
  "type": 11,
  "media": { "url": "https://cdn.discordapp.com/embed/avatars/0.png" },
  "description": "Discord default avatar"
}

JavaScript

import { SectionBuilder } from 'discord.js';

const section = new SectionBuilder()
  .addTextDisplayComponents((text) => text.setContent('### Mystery bag'))
  .setThumbnailAccessory((thumbnail) =>
    thumbnail.setURL('attachment://product.png').setDescription('Orange shop bag'),
  );

Python

section = discord.ui.Section(
    "### Mystery bag",
    accessory=discord.ui.Thumbnail("attachment://product.png", description="Orange shop bag"),
)

Go

alt := "Orange shop bag"
section := discordgo.Section{
  Components: []discordgo.MessageComponent{
    discordgo.TextDisplay{Content: "### Mystery bag"},
  },
  Accessory: discordgo.Thumbnail{
    Media:       discordgo.UnfurledMediaItem{URL: "attachment://product.png"},
    Description: &alt,
  },
}

Using a user’s avatar

A very common case is showing someone’s avatar. Use the Discord CDN URL:

https://cdn.discordapp.com/avatars/{user_id}/{avatar_hash}.png

Libraries give you this URL directly: user.displayAvatarURL() in discord.js, user.display_avatar.url in discord.py and user.AvatarURL("256") in discordgo.