> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.petto.sbs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tarjetas de imagen

> Imágenes que Petto dibuja para un mensaje, con el avatar, el nombre del miembro y cualquier variable: diséñalas en el dashboard y agrégalas a bienvenidas, subidas de nivel y más.

## Resumen

Una tarjeta de imagen es una imagen que Petto dibuja para un mensaje: el avatar y el nombre del miembro, la cantidad de miembros del servidor, una barra de progreso o cualquier otra [variable](https://wiki.petto.sbs/es/resources/scripting/variables.md). Crea tarjetas en el [dashboard](https://petto.sbs/dash) en **Tarjetas de imagen**, y luego elige una en un [embed](https://wiki.petto.sbs/es/resources/scripting/embeds.md) guardado.

![La página Tarjetas de imagen de Petto Land: una lista de cuatro tarjetas, la de bienvenida elegida con su vista previa grande, las imágenes subidas debajo y los ajustes de tamaño y fondo a la derecha](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/es/image-cards-list.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=ec86098cc65c16e9d40ec31deec59e7f)

Dashboard → Diseño → Tarjetas de imagen: la lista de tarjetas a la izquierda, la vista previa grande que dibuja Petto con las imágenes subidas debajo, y los ajustes del editor básico a la derecha.

## Dónde se envían las tarjetas

Un embed guardado que tiene una tarjeta la envía con:

* Mensajes de bienvenida, de despedida y de boost
* Tickets
* Mensajes de sorteos
* Mensajes de subida de nivel (opción `card` de `!level notify`)
* Autorrespuestas
* `!embed send`
* Mensajes de sanciones, starboard, verificación y bump que usan un [embed guardado](https://wiki.petto.sbs/es/guides/saved-embeds-everywhere.md)

Una tarjeta también funciona en un diseño de **Components V2**: se muestra como imagen arriba del primer contenedor, o arriba del mensaje si el diseño no tiene contenedor. Elige la tarjeta en el diseño igual que en un embed clásico.

Las tarjetas de rank de `!rank` se configuran con `!level rank-style <style> [card]`.

## Pon una tarjeta en cualquier parte: `{imgcard:name}`

Escribe `{imgcard:name}` en cualquier texto de un mensaje y Petto dibuja la tarjeta llamada `name` y la envía con el mensaje. Funciona en el texto, en un embed, en un diseño de Components V2, en un [código de embed](https://wiki.petto.sbs/es/resources/scripting/embeds.md#crear-desde-un-código), en una autorrespuesta, en un comando personalizado y en los mensajes de bienvenida, despedida y boost. El token en sí se quita del texto.

```text theme={null}
¡Bienvenido {user}! {imgcard:welcome}
```

Por defecto la imagen va dentro del primer embed (o arriba del primer contenedor de un diseño V2). `{imgcard:name|attachment}` la envía por separado, arriba de todo. Solo cuenta el primer `{imgcard:...}` de un mensaje. Los nombres de tus tarjetas están en el dashboard, en **Tarjetas de imagen**.

![Petto le da la bienvenida a Chillet con un embed y una tarjeta dentro: el título, el avatar y el nombre de Chillet y la cantidad de miembros](https://mintcdn.com/wikipetto/ym43wKcqHRA_RnWi/images/discord/resources/es/image-card.webp?fit=max\&auto=format\&n=ym43wKcqHRA_RnWi\&q=85\&s=2e804f41e914cdca3ac40492fa783c44)

En Discord: un mensaje de bienvenida con \{imgcard:welcome}, dibujado para el miembro que entró.

![Petto le da la bienvenida a shi con un texto y, como imagen adjunta, la tarjeta de bienvenida con el avatar y el nombre de shi](https://mintcdn.com/wikipetto/s2csZscuSJC9o9j0/images/discord/resources/es/image-cards-attachment.webp?fit=max\&auto=format\&n=s2csZscuSJC9o9j0\&q=85\&s=39cbd927f515a0033ea3fe3c466dae7a)

En Discord: \{imgcard:welcome|attachment}: la tarjeta va sola, encima del texto.

## Texto en una tarjeta

Cada capa de texto de una tarjeta acepta [variables](https://wiki.petto.sbs/es/resources/scripting/variables.md), que se rellenan con el miembro del que trata el mensaje:

| Texto de la capa | Muestra |
| - | - |
| `{user.display_name}` | Liam |
| `Miembro #{server_membercount}` | Miembro #1204 |
| `¡Bienvenido a {server_name}!` | ¡Bienvenido a Cozy Corner! |
| `Nivel {level} · {level_xp_current}/{level_xp_needed} XP` (tarjeta de rank) | Nivel 12 · 1,420/2,350 XP |
| `Puesto #{level_rank}` (tarjeta de rank) | Puesto #3 |

Un nombre largo se hace más pequeño (hasta el 55% de su tamaño) y se corta con puntos suspensivos si aun así no cabe, así que nunca pasa por encima de la línea siguiente. También se dibujan nombres con emoji, letras árabes o hebreas.

## Tipos

Cada tarjeta es una tarjeta de **bienvenida** o una tarjeta de **rank**. Las tarjetas de rank pueden usar la capa **Barra de progreso**, que se llena con el progreso del miembro hacia el siguiente nivel.

![La tarjeta de rango elegida: su vista previa con el nivel 12 de liam, la XP, el puesto y una barra de progreso, y los diseños de rango](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/es/image-cards-editor-rank.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=43b194b2d2d4f12d7bde7c8fc74a988e)

Dashboard → Diseño → Tarjetas de imagen: una tarjeta de rango, con el nivel, la XP y la barra de progreso.

## La tarjeta de subida de nivel

El diseño **Subida de nivel** de una tarjeta de rango está hecho para el mensaje de subida de nivel: el avatar, el nombre, una etiqueta `#puesto`, "Ahora estás en el Top 2.5%" y un hexágono del nivel anterior al nuevo. Elígelo en el editor de tarjetas (la tarjeta queda ancha y baja) y usa la tarjeta en el [mensaje de subida de nivel](https://wiki.petto.sbs/es/community/leveling.md#notificaciones).

![La tarjeta levelup elegida: una tarjeta ancha con el avatar de liam, el chip del puesto, el top por ciento y el hexágono del nivel 11 al 12](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/es/image-cards-levelup.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=a6549ab28c54e3e80b9ed1cf3c26e464)

Dashboard → Diseño → Tarjetas de imagen: el diseño Level-up, con los interruptores de la decoración del avatar y la placa.

Dos interruptores añaden lo que Discord muestra alrededor de una persona. Cada uno solo aparece cuando el miembro lo tiene en Discord:

| Interruptor | Qué dibuja | Por defecto |
| - | - | - |
| Decoración del avatar | La decoración alrededor del avatar, un poco más grande que el avatar como en Discord | Activado |
| Placa de nombre | La placa de nombre del miembro detrás de la tarjeta | Desactivado |

Este diseño no dibuja la etiqueta de servidor; sus variables siguen disponibles para cualquier otra tarjeta.

**Decoración que se mueve** (Premium): si la decoración del miembro es animada, la tarjeta sale como una imagen animada con la decoración moviéndose. Sin Premium, o cuando la decoración no se mueve, la tarjeta muestra la decoración quieta. La vista previa del dashboard siempre es quieta. Discord decide cómo muestra una imagen animada que envía un bot, así que pruébalo en tu servidor antes de confiar en ello.

Estas son las variables que lo hacen posible, para cualquier capa de texto o imagen de una tarjeta:

| Variable | Qué da |
| - | - |
| `{user.avatar_decoration}` | Imagen de su decoración de avatar, vacío si no tiene |
| `{user.nameplate}` | Imagen de su placa de nombre, vacío si no tiene |
| `{user.server_tag}` | Texto de su etiqueta de servidor, vacío si no muestra una |
| `{user.server_tag_badge}` | Imagen de la insignia de su etiqueta de servidor, vacío si no tiene |
| `{level_top_percent}` | El porcentaje del top en el que está, como `2.5` (mensaje de subida de nivel y tarjetas de rango) |

En el editor avanzado (Premium) cada capa también puede tener **Mostrar solo si** (la capa se dibuja solo cuando ese valor no está vacío, por ejemplo `{user.server_tag}`) y puede **seguir** a otras capas (empieza después del borde derecho de la primera que se dibujó, así una etiqueta siempre queda junto al nombre, sin importar su largo). Los textos pueden tener una píldora detrás y un límite de líneas, y las formas incluyen un hexágono.

## Diseños incluidos

Petto trae 34 diseños listos en cuatro familias, además de las dos imágenes de las tarjetas de rank por defecto. Un diseño es una imagen de fondo con sus propios colores de texto y un panel teñido detrás del texto, así que cualquier nombre se lee bien. Todos están dibujados para los diseños de bienvenida, despedida, rank y subida de nivel.

### Elegir un diseño

Abre una tarjeta en el dashboard, en **Tarjetas de imagen**. La sección **Diseños** tiene un buscador, un botón por cada familia y una imagen pequeña de cada diseño. Pulsa uno: se ponen la imagen de fondo, los colores del texto y el panel, y la vista previa se redibuja. Puedes cambiar cualquiera después. Un diseño es solo un punto de partida: el diseño de la tarjeta, los textos, la fuente y los colores siguen siendo tuyos.

Un diseño se guarda en la tarjeta como su imagen de fondo, `petto:<id>`. En el campo **Imagen de fondo** (o en una capa de imagen del editor avanzado) también puedes escribir el id, por ejemplo `petto:fruit-strawberry`. Una tarjeta que apunta a un diseño que no existe, o cuya imagen de fondo no se puede cargar, se dibuja con el diseño por defecto (`nature-night`, o `rank-default` en las tarjetas de rank) en vez de fallar.

#### Animales

![Nueve diseños de animales: un patito, un gato, un zorro, un conejito, un panda, una rana, un oso, un pingüino y un erizo](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-animals.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=7a93b20d013c3a27edb3157af25c64bc)

La familia Animales.

| Id | Nombre |
| - | - |
| `animal-duck` | Estanque del patito |
| `animal-cat` | Gato a la luz de la luna |
| `animal-fox` | Zorro y luciérnagas |
| `animal-bunny` | Conejito soñador |
| `animal-panda` | Panda de bambú |
| `animal-frog` | Rana en el nenúfar |
| `animal-bear` | Osito de miel |
| `animal-penguin` | Pingüino polar |
| `animal-hedgehog` | Erizo del bosque |

#### Frutas

![Ocho diseños de frutas: fresa, durazno, limón, sandía, cerezas, naranja, arándanos y piña](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-fruits.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=6a2dc4a077a634453a941daa0934a5e4)

La familia Frutas.

| Id | Nombre |
| - | - |
| `fruit-strawberry` | Fresa |
| `fruit-peach` | Durazno |
| `fruit-lemon` | Limón |
| `fruit-watermelon` | Sandía |
| `fruit-cherry` | Cerezas |
| `fruit-orange` | Naranja |
| `fruit-blueberry` | Arándanos |
| `fruit-pineapple` | Piña |

#### Flores

![Siete diseños de flores: flor de cerezo, rosa, lavanda, girasol, margarita, tulipanes y loto](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-flowers.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=32db9819ad40b937a70d9683cfff6377)

La familia Flores.

| Id | Nombre |
| - | - |
| `flower-sakura` | Flor de cerezo |
| `flower-rose` | Rosa |
| `flower-lavender` | Lavanda |
| `flower-sunflower` | Girasol |
| `flower-daisy` | Margarita |
| `flower-tulip` | Tulipanes |
| `flower-lotus` | Loto |

#### Naturaleza

![Diez diseños de naturaleza: noche estrellada, aurora boreal, océano, bosque con niebla, atardecer en el desierto, galaxia, hojas de otoño, nieve, puesta de sol y una nube arcoíris](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-nature.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=28055a1c903c1e6d45cc264692180019)

La familia Naturaleza.

| Id | Nombre |
| - | - |
| `nature-night` | Noche estrellada |
| `nature-aurora` | Aurora boreal |
| `nature-ocean` | Océano |
| `nature-forest` | Bosque con niebla |
| `nature-desert` | Atardecer en el desierto |
| `nature-galaxy` | Galaxia |
| `nature-autumn` | Hojas de otoño |
| `nature-snow` | Día de nieve |
| `nature-sunset` | Puesta de sol |
| `nature-clouds` | Nube arcoíris |

Las dos imágenes que había antes de la galería siguen ahí como **Clásicos de Petto**: `rank-default` (el durazno y el morado de la tarjeta de rank por defecto) y `rank-voice` (el verde azulado de la tarjeta de rank de voz).

### Arte y licencias

Cada diseño es arte original dibujado por el propio código de Petto (el generador está en el repositorio del bot, `scripts/designs`), no copiado de ningún sitio, así que no hay nada que acreditar ni licencia de terceros para las imágenes. Los únicos archivos externos son las letras árabes y hebreas de las fuentes de las tarjetas (Noto Sans, licencia SIL Open Font 1.1, indicadas en las licencias de fuentes del repositorio del bot). Cada diseño pesa menos de 30 KB (unos 600 KB todo el conjunto) y Petto lo lee del disco solo cuando se dibuja una tarjeta que lo usa.

## Gratis y Premium

| | Gratis | Premium |
| - | - | - |
| Cuatro diseños básicos, colores, una imagen de fondo, 36 diseños incluidos | Sí | Sí |
| Fuentes | 15 (Poppins, Inter, Montserrat, Bebas Neue, Nunito, Oswald, Playfair Display, Roboto Mono, Fredoka, Caveat, Anton, Lobster, Righteous, Bangers, Quicksand) | Las 40 |
| Editor de capas (coloca y da estilo a cada elemento) | No | Sí |
| Decoración de avatar que se mueve en la tarjeta de subida de nivel | No | Sí |
| Tarjetas de imagen por servidor | 30 | 60 |
| Imágenes subidas | 50 (100 MB) | 120 (240 MB) |

![El editor avanzado de la tarjeta de bienvenida: la vista previa, los botones para agregar un texto, una imagen, un avatar, una forma o una barra de progreso, y la lista de capas](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/es/image-cards-layers.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=f4a2297368f0a27a3f2a8ecfdd8ab603)

Dashboard → Diseño → Tarjetas de imagen: el editor de capas (Premium): cada elemento de la tarjeta es una capa.

Una tarjeta que usaba funciones Premium sigue funcionando con sus ajustes básicos si Premium termina.

## Imágenes

Un fondo o cualquier imagen puede venir de un enlace `https` o subirse en el dashboard. Los enlaces solo se descargan desde el internet público.

![Imágenes subidas 2 de 50, 1.4 de 100 MB: un banner rosa y un cielo estrellado](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/es/image-cards-pictures.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=5644169c3b911ca97cb929ee433ab03d)

Dashboard → Diseño → Tarjetas de imagen: las imágenes subidas por el servidor, con lo que usan del límite.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.