Media Gallery

type: 12 Mensajes

La Media Gallery muestra de 1 a 10 imágenes o vídeos organizados automáticamente en una cuadrícula.

{
  "flags": 32768,
  "components": [
    {
      "type": 10,
      "content": "### 📸 Fotos de la excursión"
    },
    {
      "type": 12,
      "items": [
        {
          "media": {
            "url": "attachment://mountains.png"
          },
          "description": "Montañas al amanecer"
        },
        {
          "media": {
            "url": "attachment://sunset.png"
          },
          "description": "Puesta de sol"
        },
        {
          "media": {
            "url": "attachment://ocean.png"
          },
          "description": "El mar"
        },
        {
          "media": {
            "url": "attachment://forest.png"
          },
          "description": "El bosque"
        },
        {
          "media": {
            "url": "attachment://night.png"
          },
          "description": "Cielo nocturno",
          "spoiler": true
        }
      ]
    }
  ]
}

Campos

Campo	Tipo	Descripción
`type`	entero	obligatorio Siempre `12`.
`id`	entero	opcional Identificador único.
`items`	array de elementos	obligatorio De 1 a 10 elementos.

Elemento de la galería

Campo	Tipo	Descripción
`media`	unfurled media item	obligatorio `{ "url": "..." }` con `https://` o `attachment://`.
`description`	string	opcional Texto alternativo. Máx. 1024 caracteres.
`spoiler`	booleano	opcional Ocultar como spoiler. Por defecto `false`.

Código

Envía las imágenes como multipart/form-data (ver Primeros pasos) o usa URLs https://.

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

const gallery = new MediaGalleryBuilder().addItems(
  (item) => item.setURL('attachment://mountains.png').setDescription('Montañas al amanecer'),
  (item) => item.setURL('attachment://sunset.png').setDescription('Puesta de sol'),
  (item) => item.setURL('attachment://night.png').setDescription('Cielo nocturno').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="Montañas al amanecer")
gallery.add_item(media="attachment://sunset.png", description="Puesta de sol")
gallery.add_item(media="attachment://night.png", description="Cielo nocturno", 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 := "Montañas al amanecer", "Puesta de sol"

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},
  },
}

Cómo se colocan las imágenes

Discord decide la cuadrícula según cuántos elementos haya:

Elementos	Distribución aproximada
1	Una imagen grande
2	Dos columnas
3	Una grande y dos pequeñas
4	Cuadrícula de 2×2
5 a 10	Filas de 2 y 3 columnas