discord.js - Imagine an app•2y ago

Embed with multiple Images

Qjuh once said it's possible to have multiple images in the same Embed, but I haven't been successful in re-producing this, anyone know the right approach? https://discord.com/channels/222078108977594368/874431116533178459/1051058892488069150

  buffer = mapCanvas.toBuffer();
  attachment = new Discord.AttachmentBuilder(
    buffer,
    { name: `view-hex-${hex}-1.png` }
  );
  const attachment2 = new Discord.AttachmentBuilder(
    buffer,
    { name: `view-hex-${hex}-2.png` }
  );

  await interaction.editReply({
    content: 'Thank you for Testing',
    files: [attachment, attachment2],
    embeds: [
      new EmbedBuilder()
        .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-1.png`),
      new EmbedBuilder()
        // .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-2.png`),
    ]
  });

  buffer = mapCanvas.toBuffer();
  attachment = new Discord.AttachmentBuilder(
    buffer,
    { name: `view-hex-${hex}-1.png` }
  );
  const attachment2 = new Discord.AttachmentBuilder(
    buffer,
    { name: `view-hex-${hex}-2.png` }
  );

  await interaction.editReply({
    content: 'Thank you for Testing',
    files: [attachment, attachment2],
    embeds: [
      new EmbedBuilder()
        .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-1.png`),
      new EmbedBuilder()
        // .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-2.png`),
    ]
  });

From a Google, there's a result for using setURL and setImage which apparently works, does it not with provided images? https://stackoverflow.com/questions/57182398/is-it-possible-to-attach-multiple-images-in-a-embed

12 Replies

Unknown User•2y ago

Message Not Public

Syjalo•2y ago

The content of embeds should be the same except images

YinogunsOP•2y ago

So this:

  await interaction.editReply({
    content: 'Thank you for Testing',
    files: [attachment, attachment2],
    embeds: [
      new EmbedBuilder()
        .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-1.png`),
      new EmbedBuilder()
        .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-2.png`),
    ]
  });

  await interaction.editReply({
    content: 'Thank you for Testing',
    files: [attachment, attachment2],
    embeds: [
      new EmbedBuilder()
        .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-1.png`),
      new EmbedBuilder()
        .setTitle('Multi Image Test')
        .setImage(`attachment://view-hex-${hex}-2.png`),
    ]
  });

Syjalo•2y ago

Yes

YinogunsOP•2y ago

Nope, 2 embeds

space•2y ago

The embeds must have the same url, only the first embed is displayed otherwise (to my limited testing). ~~I don't think this behavior is documented though and just a hack for twitter embeds.~~

Syjalo•2y ago

I was wrong. You should set the same URL for every embeds. Then you can set images for them and set content only for the first. https://discord.com/developers/docs/resources/channel#embed-object-embed-limits

YinogunsOP•2y ago

Sounds like it's not possible for generated attachments then...?

space•2y ago

It is possible

space•2y ago

That's what I used (aka my limited testing)

example.js

YinogunsOP•2y ago

ah har! Success, nice one

YinogunsOP•2y ago

  await interaction.editReply({
    content: 'Thank you for Testing',
    files: [attachment, attachment2],
    embeds: [
      new EmbedBuilder()
        .setTitle(title)
        .setURL('https://discordjs.dev')
        .setImage(`attachment://view-hex-${hex}-1.png`),
      new EmbedBuilder()
        .setTitle(title)
        .setURL('https://discordjs.dev')
        .setImage(`attachment://view-hex-${hex}-2.png`),
    ]
  });

  await interaction.editReply({
    content: 'Thank you for Testing',
    files: [attachment, attachment2],
    embeds: [
      new EmbedBuilder()
        .setTitle(title)
        .setURL('https://discordjs.dev')
        .setImage(`attachment://view-hex-${hex}-1.png`),
      new EmbedBuilder()
        .setTitle(title)
        .setURL('https://discordjs.dev')
        .setImage(`attachment://view-hex-${hex}-2.png`),
    ]
  });

Thanks both, espically space, didn't think we could force a URL and it be fine 😄 Best case I found for doing this from single code, not writing the embed twice:

  const getCommonEmbed = () => new EmbedBuilder()
    ...
    .setURL('https://cdn.discordapp.com');

  const embedAttachment = getCommonEmbed();
  const embedScreenshot = getCommonEmbed();

  const getCommonEmbed = () => new EmbedBuilder()
    ...
    .setURL('https://cdn.discordapp.com');

  const embedAttachment = getCommonEmbed();
  const embedScreenshot = getCommonEmbed();

Then on the send:

    embeds: [
      embedAttachment
        .setImage('attachment://location.png'),
      embedScreenshot
        .setImage('attachment://screenshot.png'),
    ],
    files: [
      new AttachmentBuilder(
        mapCanvas.toBuffer(),
        { name: 'location.png' }
      ),
      new AttachmentBuilder(
        screenshotCanvas.toBuffer(),
        { name: 'screenshot.png' }
      )
    ],

    embeds: [
      embedAttachment
        .setImage('attachment://location.png'),
      embedScreenshot
        .setImage('attachment://screenshot.png'),
    ],
    files: [
      new AttachmentBuilder(
        mapCanvas.toBuffer(),
        { name: 'location.png' }
      ),
      new AttachmentBuilder(
        screenshotCanvas.toBuffer(),
        { name: 'screenshot.png' }
      )
    ],

(I did use Array(2).fill(new EB()) but this resulted in a pointer problem so both embeds were actually the same so setImage overworte the first one thus same image twice)

Gaming

Programming

Embed with multiple Images