discord.js - Imagine an app•2w 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•2w ago

d.js docs•2w 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•2w 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•2w ago

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

! ViniOP•2w 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•2w ago

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

! ViniOP•2w 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•2w ago

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

d.js docs•2w ago

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

! ViniOP•2w 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•2w ago

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

! ViniOP•2w ago

What am I probably doing wrong?

Samtino•2w ago

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

d.js docs•2w ago

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

! ViniOP•2w ago

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

Samtino•2w ago

^^^^^^^^^^^

! ViniOP•2w 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•2w ago

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

! ViniOP•2w ago

like this?

Samtino•2w ago

Yes but instead of a select menu, just add buttons

! ViniOP•2w ago

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

d.js docs•2w ago

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

Samtino•2w ago

Just put buttons there

! ViniOP•2w 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•2w ago

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

Samtino•2w ago

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

! ViniOP•2w ago

I got it, thank you very much.

Gaming

Programming

Large image on display components

Did you find this page helpful?