discord.js - Imagine an app•4mo ago

Large image on display components

Guys, with this example code in the Display Components tab on the discord.js website, how do I add an image like .setImage did in the previous version? I saw some bots here that have large images, in addition to the thumbnail, how do I do it? Example I mentioned above:

const { AttachmentBuilder, SectionBuilder, MessageFlags } = require('discord.js');

const file = new AttachmentBuilder('../assets/image.png');

const exampleSection = new SectionBuilder() 
.addTextDisplayComponents( 
textDisplay => textDisplay 
.setContent('This text is inside a Text Display component! You can use **any __markdown__** available inside this component too.'), 
) 
.setThumbnailAccessory( 
thumbnail => thumbnail 
.setDescription('alt text displaying on the image') 
.setURL('attachment://image.png'), // Supports arbitrary URLs such as 'https://i.imgur.com/AfFp7pu.png' as well. 
);

await channel.send({ 
components: [exampleSection], 
files: [file], 
flags: MessageFlags.IsComponentsV2,
});

const { AttachmentBuilder, SectionBuilder, MessageFlags } = require('discord.js');

const file = new AttachmentBuilder('../assets/image.png');

const exampleSection = new SectionBuilder() 
.addTextDisplayComponents( 
textDisplay => textDisplay 
.setContent('This text is inside a Text Display component! You can use **any __markdown__** available inside this component too.'), 
) 
.setThumbnailAccessory( 
thumbnail => thumbnail 
.setDescription('alt text displaying on the image') 
.setURL('attachment://image.png'), // Supports arbitrary URLs such as 'https://i.imgur.com/AfFp7pu.png' as well. 
);

await channel.send({ 
components: [exampleSection], 
files: [file], 
flags: MessageFlags.IsComponentsV2,
});

I know the .setThumbnailAcessory is for adding a thumbnail, but what about the large image, how do I do it?

27 Replies

d.js toolkit•4mo ago

d.js docs•4mo ago

:class: MediaGalleryBuilder discord.js@14.21.0 A builder that creates API-compatible JSON data for a container. :method: ContainerBuilder#addMediaGalleryComponents() discord.js@14.21.0 Adds media gallery components to this container.

! ViniOP•4mo ago

@monbrey I looked everywhere for how I can put the large image, like .setImage did in the previous version, but I can't find it :/

monbrey•4mo ago

I literally just linked it above Add a media gallery to the container

! ViniOP•4mo ago

I know that, I can already add media gallery to the container, but I can only put thumbnails, I'm still having trouble finding how to put a large image, but thanks, I'll try to find it here.

monbrey•4mo ago

No, media gallery is not thumbnails That's a large as you'll get in a container

! ViniOP•4mo ago

To make it easier for me to understand and find, to add a thumbnail is with .setThumbnailAccessory, and for a large image? Just to make it easier to find and understand here.

monbrey•4mo ago

Large images aren't accessories... they're media galleries container.addMediaGallery(gallery => gallery.addItems(images))

d.js docs•4mo ago

:guide: Popular Topics: Display Components - Media Gallery read more

! ViniOP•4mo ago

I understand, but unfortunately, even doing what is shown in the example, I am not able to get the large image to stay inside the embed, it always comes as an attachment, outside the embed.

monbrey•4mo ago

That's generally an issue with the attachment referencing, not the component

! ViniOP•4mo ago

What am I probably doing wrong?

Samtino•4mo ago

You're not putting the media gallery in the container. Of course it's separate You're sending it separate

d.js docs•4mo ago

:method: ContainerBuilder#addMediaGalleryComponents() discord.js@14.21.0 Adds media gallery components to this container.

! ViniOP•4mo ago

That's the question, I'm having trouble putting the large image inside the container, like .setImage did in the old embeds.

Samtino•4mo ago

^^^^^^^^^^^

! ViniOP•4mo ago

I got it, thank you very much... another question, how do I place the buttons side by side in the session inside the container like in this example? I can only place them stacked, one on top of the other.

Samtino•4mo ago

Instead of using a section. You can use an actionrow just as if it wasn't a container

! ViniOP•4mo ago

like this?

Samtino•4mo ago

Yes but instead of a select menu, just add buttons

! ViniOP•4mo ago

That's exactly what I'm having trouble with... putting the buttons side by side

d.js docs•4mo ago

:method: ActionRowBuilder#addComponents() builders@1.11.2 Adds components to this action row.

Samtino•4mo ago

Just put buttons there

! ViniOP•4mo ago

        .addActionRowComponents(actionRow =>
          actionRow.setComponents(
            new StringSelectMenuBuilder()
              .setCustomId('painel_vip_selecao')
              .setPlaceholder('Selecione uma opção')
              .addOptions(
                {
                  label: 'Criar Cargo',
                  description: 'Crie um cargo VIP personalizado',
                  value: 'criar_cargo',
                  emoji: '🎖️'
                },
                {
                  label: 'Criar Call',
                  description: 'Crie um canal de voz VIP',
                  value: 'criar_call',
                  emoji: '🎧'
                },
                {
                  label: 'Dar VIP',
                  description: 'Conceda VIP a um membro',
                  value: 'dar_vip',
                  emoji: '➕'
                },
                {
                  label: 'Remover VIP',
                  description: 'Remova VIP de um membro',
                  value: 'remover_vip',
                  emoji: '➖'
                }
              )
          )
        );

        .addActionRowComponents(actionRow =>
          actionRow.setComponents(
            new StringSelectMenuBuilder()
              .setCustomId('painel_vip_selecao')
              .setPlaceholder('Selecione uma opção')
              .addOptions(
                {
                  label: 'Criar Cargo',
                  description: 'Crie um cargo VIP personalizado',
                  value: 'criar_cargo',
                  emoji: '🎖️'
                },
                {
                  label: 'Criar Call',
                  description: 'Crie um canal de voz VIP',
                  value: 'criar_call',
                  emoji: '🎧'
                },
                {
                  label: 'Dar VIP',
                  description: 'Conceda VIP a um membro',
                  value: 'dar_vip',
                  emoji: '➕'
                },
                {
                  label: 'Remover VIP',
                  description: 'Remova VIP de um membro',
                  value: 'remover_vip',
                  emoji: '➖'
                }
              )
          )
        );

how do i switch to just buttons, side by side, in this new version of discord.js?

d.js docs•4mo ago

:class: ButtonBuilder discord.js@14.21.0 Represents a button builder.

Samtino•4mo ago

If you want buttons. Make a button A select menu is something different

! ViniOP•4mo ago

I got it, thank you very much.

Gaming

Programming

Large image on display components

Did you find this page helpful?