Media Gallery

type: 12 Messages

The Media Gallery shows 1 to 10 images or videos automatically arranged in a grid.

{
  "flags": 32768,
  "components": [
    {
      "type": 10,
      "content": "### 📸 Trip photos"
    },
    {
      "type": 12,
      "items": [
        {
          "media": {
            "url": "attachment://mountains.png"
          },
          "description": "Mountains at sunrise"
        },
        {
          "media": {
            "url": "attachment://sunset.png"
          },
          "description": "Sunset"
        },
        {
          "media": {
            "url": "attachment://ocean.png"
          },
          "description": "The sea"
        },
        {
          "media": {
            "url": "attachment://forest.png"
          },
          "description": "The forest"
        },
        {
          "media": {
            "url": "attachment://night.png"
          },
          "description": "Night sky",
          "spoiler": true
        }
      ]
    }
  ]
}

Fields

Field	Type	Description
`type`	integer	required Always `12`.
`id`	integer	optional Unique identifier.
`items`	array of items	required 1 to 10 items.

Gallery item

Field	Type	Description
`media`	unfurled media item	required `{ "url": "..." }` with `https://` or `attachment://`.
`description`	string	optional Alt text. Max 1024 characters.
`spoiler`	boolean	optional Hide as a spoiler. Defaults to `false`.

Code

Send the images as multipart/form-data (see Getting started) or use https:// URLs.

import { MediaGalleryBuilder, MessageFlags } from 'discord.js';

const gallery = new MediaGalleryBuilder().addItems(
  (item) => item.setURL('attachment://mountains.png').setDescription('Mountains at sunrise'),
  (item) => item.setURL('attachment://sunset.png').setDescription('Sunset'),
  (item) => item.setURL('attachment://night.png').setDescription('Night sky').setSpoiler(true),
);

await channel.send({
  flags: MessageFlags.IsComponentsV2,
  components: [gallery],
  files: ['./mountains.png', './sunset.png', './night.png'],
});

gallery = discord.ui.MediaGallery()
gallery.add_item(media="attachment://mountains.png", description="Mountains at sunrise")
gallery.add_item(media="attachment://sunset.png", description="Sunset")
gallery.add_item(media="attachment://night.png", description="Night sky", spoiler=True)

view = discord.ui.LayoutView()
view.add_item(gallery)

files = [discord.File("mountains.png"), discord.File("sunset.png"), discord.File("night.png")]
await channel.send(view=view, files=files)

alt1, alt2 := "Mountains at sunrise", "Sunset"

gallery := discordgo.MediaGallery{
  Items: []discordgo.MediaGalleryItem{
    {Media: discordgo.UnfurledMediaItem{URL: "attachment://mountains.png"}, Description: &alt1},
    {Media: discordgo.UnfurledMediaItem{URL: "attachment://sunset.png"}, Description: &alt2},
    {Media: discordgo.UnfurledMediaItem{URL: "attachment://night.png"}, Spoiler: true},
  },
}

How images are arranged

Discord picks the grid based on how many items there are:

Items	Approximate layout
1	One large image
2	Two columns
3	One large and two small
4	2×2 grid
5 to 10	Rows of 2 and 3 columns