Thumbnail Components V2 ContainerBuilder

Hi, I have a question, how do I introduce a thumbnail into a ContainerBuilder please?

11 Replies

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - ✅ Marked as resolved by staff

Tomsoz•6mo ago

If you want to add an image then you can run .addMediaGalleryComponents on the container If you specifically want it to be a thumbnail then you need to do .addSectionComponents on the container then on SectionBuilder you can run .setThumbnailAccessory

!" 𝑱𝒂𝒎𝒆𝒔__OP•6mo ago

Like this? Here's my code:

const containeGetUserinfo = new ContainerBuilder()
  .addSectionComponents(
    new ThumbnailBuilder({
      media: {
      url: `${member.displayAvatarURL({ dynamic: true }) || "https://cdn.discordapp.com/attachments/798945891678421044/951585273324650496/discord-logo-white.png"}`,
    },
  })
)
.addTextDisplayComponents(
  new TextDisplayBuilder().setContent(`Test content`))
    .setAccentColor(Colors.White)
    .addMediaGalleryComponents(mediaGalleryComponent)
    .addActionRowComponents(ButtonGetUserinfo)

await interaction.reply({ 
  components: [containeGetUserinfo], 
  flags: [MessageFlags.IsComponentsV2],
});

const containeGetUserinfo = new ContainerBuilder()
  .addSectionComponents(
    new ThumbnailBuilder({
      media: {
      url: `${member.displayAvatarURL({ dynamic: true }) || "https://cdn.discordapp.com/attachments/798945891678421044/951585273324650496/discord-logo-white.png"}`,
    },
  })
)
.addTextDisplayComponents(
  new TextDisplayBuilder().setContent(`Test content`))
    .setAccentColor(Colors.White)
    .addMediaGalleryComponents(mediaGalleryComponent)
    .addActionRowComponents(ButtonGetUserinfo)

await interaction.reply({ 
  components: [containeGetUserinfo], 
  flags: [MessageFlags.IsComponentsV2],
});

Tomsoz•6mo ago

No, so in the .addSectionComponents you need to make a new SectionBuilder, then on that you can call .setThumbnailAccessory

d.js docs•6mo ago

:method: SectionBuilder#setThumbnailAccessory() discord.js@14.19.3 Sets the accessory of this section to a thumbnail.

!" 𝑱𝒂𝒎𝒆𝒔__OP•6mo ago

New code :

const section = new SectionBuilder()
.setThumbnailAccessory(
  new ThumbnailBuilder({
    media: {
      url: member.displayAvatarURL({ dynamic: true }) || "https://cdn.discordapp.com/attachments/798945891678421044/951585273324650496/discord-logo-white.png"
    }
  })
);

const containeGetUserinfo = new ContainerBuilder()
.addSectionComponents(section)
.addTextDisplayComponents(
  new TextDisplayBuilder().setContent(`Test content`))
    .setAccentColor(Colors.White)
    .addMediaGalleryComponents(mediaGalleryComponent)
    .addActionRowComponents(ButtonGetUserinfo)

await interaction.reply({ 
  components: [containeGetUserinfo], 
  flags: [MessageFlags.IsComponentsV2],
});

const section = new SectionBuilder()
.setThumbnailAccessory(
  new ThumbnailBuilder({
    media: {
      url: member.displayAvatarURL({ dynamic: true }) || "https://cdn.discordapp.com/attachments/798945891678421044/951585273324650496/discord-logo-white.png"
    }
  })
);

const containeGetUserinfo = new ContainerBuilder()
.addSectionComponents(section)
.addTextDisplayComponents(
  new TextDisplayBuilder().setContent(`Test content`))
    .setAccentColor(Colors.White)
    .addMediaGalleryComponents(mediaGalleryComponent)
    .addActionRowComponents(ButtonGetUserinfo)

await interaction.reply({ 
  components: [containeGetUserinfo], 
  flags: [MessageFlags.IsComponentsV2],
});

Error :

ExpectedConstraintError > s.array(T).lengthGreaterThanOrEqual()
  Invalid Array length

  Expected: expected.length >= 1

  Received:
  | []

    at Object.run (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:1045:79)
    at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:67
    at Array.reduce (<anonymous>)
    at _ArrayValidator.parse (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:29)
    at validateComponentArray (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1532:233)
    at SectionBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:2165:5)
    at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:64
    at Array.map (<anonymous>)
    at ContainerBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:35)
    at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\discord.js\src\structures\MessagePayload.js:151:46 Promise {
  <rejected> ExpectedConstraintError > s.array(T).lengthGreaterThanOrEqual()
    Invalid Array length

    Expected: expected.length >= 1

    Received:
    | []

      at Object.run (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:1045:79)
      at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:67
      at Array.reduce (<anonymous>)
      at _ArrayValidator.parse (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:29)
      at validateComponentArray (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1532:233)
      at SectionBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:2165:5)
      at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:64
      at Array.map (<anonymous>)
      at ContainerBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:35)
      at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\discord.js\src\structures\MessagePayload.js:151:46
}

ExpectedConstraintError > s.array(T).lengthGreaterThanOrEqual()
  Invalid Array length

  Expected: expected.length >= 1

  Received:
  | []

    at Object.run (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:1045:79)
    at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:67
    at Array.reduce (<anonymous>)
    at _ArrayValidator.parse (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:29)
    at validateComponentArray (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1532:233)
    at SectionBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:2165:5)
    at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:64
    at Array.map (<anonymous>)
    at ContainerBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:35)
    at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\discord.js\src\structures\MessagePayload.js:151:46 Promise {
  <rejected> ExpectedConstraintError > s.array(T).lengthGreaterThanOrEqual()
    Invalid Array length

    Expected: expected.length >= 1

    Received:
    | []

      at Object.run (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:1045:79)
      at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:67
      at Array.reduce (<anonymous>)
      at _ArrayValidator.parse (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:29)
      at validateComponentArray (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1532:233)
      at SectionBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:2165:5)
      at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:64
      at Array.map (<anonymous>)
      at ContainerBuilder.toJSON (C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\@discordjs\builders\dist\index.js:1870:35)
      at C:\Users\Teck Génération\Desktop\Bad-Protect\node_modules\discord.js\src\structures\MessagePayload.js:151:46
}

Samtino•6mo ago

A section also needs a TextDisplay component. Not just a Thumbnail/Button

!" 𝑱𝒂𝒎𝒆𝒔__OP•6mo ago

The eddedede text spoils everything how can I re-sort the text to make the embeds like before ?

Samtino•6mo ago

Just add all of the text to the Section instead of the body of the container. Anything outside of the section component will show up at minimum, under the bottom of the thumbnail/button in the component You can't overlap components

!" 𝑱𝒂𝒎𝒆𝒔__OP•6mo ago

Okey, Super it is settled thank you all 🙂 :

Steve•6mo ago

🇫🇷

Gaming

Programming

Thumbnail Components V2 ContainerBuilder

Did you find this page helpful?