> ## 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.

# Cartões de imagem

> Imagens que o Petto desenha para uma mensagem, com o avatar, o nome do membro e qualquer variável: crie no dashboard e adicione a boas-vindas, subidas de nível e mais.

## Visão geral

Um cartão de imagem é uma imagem que o Petto desenha para uma mensagem: o avatar e o nome do membro, a quantidade de membros do servidor, uma barra de progresso ou qualquer outra [variável](https://wiki.petto.sbs/pt-br/resources/scripting/variables.md). Crie cartões no [dashboard](https://petto.sbs/dash) em **Cartões de imagem** e depois aponte um [embed](https://wiki.petto.sbs/pt-br/resources/scripting/embeds.md) salvo para um deles.

![A página Cartões de imagem do Petto Land: uma lista de quatro cartões, o de boas-vindas escolhido com a prévia grande, as imagens enviadas embaixo e as configurações de tamanho e fundo à direita](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/pt-br/image-cards-list.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=4375178e08082bf3970f7f1762a3a8cc)

Dashboard → Design → Cartões de imagem: a lista de cartões à esquerda, a prévia grande desenhada pelo Petto com as imagens enviadas embaixo, e as configurações do editor básico à direita.

## Onde os cartões são enviados

Um embed salvo que tem um cartão o envia com:

* Mensagens de boas-vindas, de saída e de impulso
* Tickets
* Mensagens de sorteio
* Mensagens de subida de nível (opção `card` do `!level notify`)
* Respostas automáticas
* `!embed send`
* Mensagens de punições, starboard, verificação e bump que usam um [embed salvo](https://wiki.petto.sbs/pt-br/guides/saved-embeds-everywhere.md)

Um cartão também funciona em um design de **Components V2**: ele aparece como uma imagem no topo do primeiro contêiner, ou no topo da mensagem se o design não tiver contêiner. Escolha o cartão no design do mesmo jeito que em um embed clássico.

Os cards de rank do `!rank` são definidos com `!level rank-style <style> [card]`.

## Coloque um cartão em qualquer lugar: `{imgcard:name}`

Escreva `{imgcard:name}` em qualquer texto de uma mensagem e o Petto desenha o cartão chamado `name` e o envia com a mensagem. Funciona no texto, em um embed, em um design de Components V2, em um [código de embed](https://wiki.petto.sbs/pt-br/resources/scripting/embeds.md#criando-a-partir-de-um-código), em uma resposta automática, em um comando personalizado e nas mensagens de boas-vindas, de saída e de impulso. O próprio token é removido do texto.

```text theme={null}
Boas-vindas, {user}! {imgcard:welcome}
```

Por padrão, a imagem vai dentro do primeiro embed (ou no topo do primeiro contêiner de um design V2). `{imgcard:name|attachment}` a envia sozinha acima de tudo. Só o primeiro `{imgcard:...}` de uma mensagem conta. Os nomes dos seus cartões estão no dashboard, em **Cartões de imagem**.

![O Petto dá boas-vindas a Chillet com um embed e um cartão dentro: o título, o avatar e o nome de Chillet e a contagem de membros](https://mintcdn.com/wikipetto/ym43wKcqHRA_RnWi/images/discord/resources/pt-br/image-card.webp?fit=max\&auto=format\&n=ym43wKcqHRA_RnWi\&q=85\&s=891dd2bb58df40a3c9af62e8e2607e88)

No Discord: uma mensagem de boas-vindas com \{imgcard:welcome}, desenhada para o membro que entrou.

![O Petto dá boas-vindas a shi com um texto e, como imagem anexa, o cartão de boas-vindas com o avatar e o nome de shi](https://mintcdn.com/wikipetto/3u3rcvq-SHcYvmo0/images/discord/resources/pt-br/image-cards-attachment.webp?fit=max\&auto=format\&n=3u3rcvq-SHcYvmo0\&q=85\&s=f37f1b598b9e2d45ebe78339f7428a31)

No Discord: \{imgcard:welcome|attachment}: o cartão vai sozinho, acima do texto.

## Texto em um cartão

Toda camada de texto de um cartão aceita [variáveis](https://wiki.petto.sbs/pt-br/resources/scripting/variables.md), preenchidas com o membro de quem a mensagem trata:

| Texto da camada | Mostra |
| - | - |
| `{user.display_name}` | Liam |
| `Membro #{server_membercount}` | Membro #1204 |
| `Boas-vindas ao {server_name}!` | Boas-vindas ao Cozy Corner! |
| `Nível {level} · {level_xp_current}/{level_xp_needed} XP` (card de rank) | Nível 12 · 1.420/2.350 XP |
| `Rank #{level_rank}` (card de rank) | Rank #3 |

Um nome longo fica menor (até 55% do tamanho) e é cortado com reticências se ainda não couber, então nunca passa por cima da linha seguinte. Nomes com emoji, letras árabes ou hebraicas também são desenhados.

## Tipos

Todo cartão é um cartão de **boas-vindas** ou um cartão de **rank**. Os cartões de rank podem usar a camada **barra de progresso**, que se preenche com o progresso do membro até o próximo nível.

![O cartão de rank escolhido: a prévia com o nível 12 de liam, a XP, a posição e uma barra de progresso, e os layouts de rank](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/pt-br/image-cards-editor-rank.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=0f3a649ae5a6830f8aab2c67ac708a9f)

Dashboard → Design → Cartões de imagem: um cartão de rank, com o nível, a XP e a barra de progresso.

## O cartão de subida de nível

O layout **Subida de nível** de um cartão de rank foi feito para a mensagem de subida de nível: o avatar, o nome, uma etiqueta `#posição`, "Agora você está no Top 2.5%" e um hexágono do nível anterior para o novo. Escolha-o no editor de cartões (o cartão fica largo e baixo) e use o cartão na [mensagem de subida de nível](https://wiki.petto.sbs/pt-br/community/leveling.md#notificações).

![O cartão levelup escolhido: um cartão largo com o avatar de liam, o chip da posição, o top por cento e o hexágono do nível 11 ao 12](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/pt-br/image-cards-levelup.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=c2e05831cfc10273866a408f27af3560)

Dashboard → Design → Cartões de imagem: o layout Level-up, com os interruptores da decoração do avatar e da placa.

Dois interruptores adicionam o que o Discord mostra em volta de uma pessoa. Cada um só aparece quando o membro o tem no Discord:

| Interruptor | O que desenha | Padrão |
| - | - | - |
| Decoração do avatar | A decoração em volta do avatar, um pouco maior que o avatar como no Discord | Ligado |
| Placa de nome | A placa de nome do membro atrás do cartão | Desligado |

Este layout não desenha a tag de servidor; suas variáveis continuam disponíveis para qualquer outro cartão.

**Decoração que se move** (Premium): se a decoração do membro é animada, o cartão sai como uma imagem animada com a decoração se movendo. Sem Premium, ou quando a decoração não se move, o cartão mostra a decoração parada. A prévia do dashboard é sempre parada. O Discord decide como mostra uma imagem animada enviada por um bot, então teste no seu servidor antes de confiar nisso.

Estas são as variáveis por trás disso, para qualquer camada de texto ou imagem de um cartão:

| Variável | O que dá |
| - | - |
| `{user.avatar_decoration}` | Imagem da decoração do avatar, vazio se não tiver |
| `{user.nameplate}` | Imagem da placa de nome, vazio se não tiver |
| `{user.server_tag}` | Texto da tag de servidor, vazio se não mostrar uma |
| `{user.server_tag_badge}` | Imagem da insígnia da tag de servidor, vazio se não tiver |
| `{level_top_percent}` | A porcentagem do top em que está, como `2.5` (mensagem de subida de nível e cartões de rank) |

No editor avançado (Premium) cada camada também pode ter **Mostrar só se** (a camada é desenhada só quando esse valor não está vazio, por exemplo `{user.server_tag}`) e pode **seguir** outras camadas (começa depois da borda direita da primeira que foi desenhada, então uma tag fica sempre ao lado do nome, não importa o tamanho). Os textos podem ter uma pílula atrás e um limite de linhas, e as formas incluem um hexágono.

## Designs incluídos

O Petto vem com 34 designs prontos em quatro famílias, além das duas imagens dos cartões de rank padrão. Um design é uma imagem de fundo com as próprias cores de texto e um painel tingido atrás do texto, então qualquer nome fica legível. Todos são desenhados para os layouts de boas-vindas, despedida, rank e subida de nível.

### Escolher um design

Abra um cartão no dashboard, em **Cartões de imagem**. A seção **Designs** tem uma busca, um botão para cada família e uma imagem pequena de cada design. Clique em um: a imagem de fundo, as cores do texto e o painel são definidos e a prévia é redesenhada. Você pode mudar qualquer um depois. Um design é só um ponto de partida: o layout, os textos, a fonte e as cores continuam sendo seus.

Um design é salvo no cartão como a imagem de fundo, `petto:<id>`. No campo **Imagem de fundo** (ou em uma camada de imagem do editor avançado) você também pode digitar o id, por exemplo `petto:fruit-strawberry`. Um cartão que aponta para um design que não existe, ou cuja imagem de fundo não carrega, é desenhado com o design padrão (`nature-night`, ou `rank-default` nos cartões de rank) em vez de falhar.

#### Animais

![Nove designs de animais: um patinho, um gato, uma raposa, um coelhinho, um panda, um sapinho, um ursinho, um pinguim e um ouriço](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-animals.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=7a93b20d013c3a27edb3157af25c64bc)

A família Animais.

| Id | Nome |
| - | - |
| `animal-duck` | Lago do patinho |
| `animal-cat` | Gato ao luar |
| `animal-fox` | Raposa e vaga-lumes |
| `animal-bunny` | Coelhinho sonhador |
| `animal-panda` | Panda de bambu |
| `animal-frog` | Sapinho na vitória-régia |
| `animal-bear` | Ursinho de mel |
| `animal-penguin` | Pinguim polar |
| `animal-hedgehog` | Ouriço da floresta |

#### Frutas

![Oito designs de frutas: morango, pêssego, limão, melancia, cerejas, laranja, mirtilos e abacaxi](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-fruits.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=6a2dc4a077a634453a941daa0934a5e4)

A família Frutas.

| Id | Nome |
| - | - |
| `fruit-strawberry` | Morango |
| `fruit-peach` | Pêssego |
| `fruit-lemon` | Limão |
| `fruit-watermelon` | Melancia |
| `fruit-cherry` | Cerejas |
| `fruit-orange` | Laranja |
| `fruit-blueberry` | Mirtilos |
| `fruit-pineapple` | Abacaxi |

#### Flores

![Sete designs de flores: flor de cerejeira, rosa, lavanda, girassol, margarida, tulipas e lótus](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-flowers.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=32db9819ad40b937a70d9683cfff6377)

A família Flores.

| Id | Nome |
| - | - |
| `flower-sakura` | Flor de cerejeira |
| `flower-rose` | Rosa |
| `flower-lavender` | Lavanda |
| `flower-sunflower` | Girassol |
| `flower-daisy` | Margarida |
| `flower-tulip` | Tulipas |
| `flower-lotus` | Lótus |

#### Natureza

![Dez designs de natureza: noite estrelada, aurora boreal, oceano, floresta com neblina, entardecer no deserto, galáxia, folhas de outono, neve, pôr do sol e uma nuvem arco-íris](https://mintcdn.com/wikipetto/0Fk5MtLrD6Ag8h9h/images/resources/image-designs-nature.webp?fit=max\&auto=format\&n=0Fk5MtLrD6Ag8h9h\&q=85\&s=28055a1c903c1e6d45cc264692180019)

A família Natureza.

| Id | Nome |
| - | - |
| `nature-night` | Noite estrelada |
| `nature-aurora` | Aurora boreal |
| `nature-ocean` | Oceano |
| `nature-forest` | Floresta com neblina |
| `nature-desert` | Entardecer no deserto |
| `nature-galaxy` | Galáxia |
| `nature-autumn` | Folhas de outono |
| `nature-snow` | Dia de neve |
| `nature-sunset` | Pôr do sol |
| `nature-clouds` | Nuvem arco-íris |

As duas imagens que existiam antes da galeria continuam lá como **Clássicos do Petto**: `rank-default` (o pêssego e roxo do cartão de rank padrão) e `rank-voice` (o verde-azulado do cartão de rank de voz).

### Arte e licenças

Cada design é arte original desenhada pelo próprio código do Petto (o gerador está no repositório do bot, `scripts/designs`), não copiada de nenhum site, então não há nada a creditar nem licença de terceiros para as imagens. Os únicos arquivos externos são as letras árabes e hebraicas das fontes dos cartões (Noto Sans, licença SIL Open Font 1.1, indicadas nas licenças de fontes do repositório do bot). Cada design pesa menos de 30 KB (cerca de 600 KB o conjunto todo) e o Petto o lê do disco só quando um cartão que o usa é desenhado.

## Gratuito e Premium

| | Gratuito | Premium |
| - | - | - |
| Quatro layouts básicos, cores, uma imagem de fundo, 36 designs incluídos | Sim | Sim |
| Fontes | 15 (Poppins, Inter, Montserrat, Bebas Neue, Nunito, Oswald, Playfair Display, Roboto Mono, Fredoka, Caveat, Anton, Lobster, Righteous, Bangers, Quicksand) | Todas as 40 |
| Editor de camadas (posicione e estilize cada elemento) | Não | Sim |
| Decoração de avatar que se move no cartão de subida de nível | Não | Sim |
| Cartões de imagem por servidor | 30 | 60 |
| Imagens enviadas | 50 (100 MB) | 120 (240 MB) |

![O editor avançado do cartão de boas-vindas: a prévia, os botões para adicionar um texto, uma imagem, um avatar, uma forma ou uma barra de progresso, e a lista de camadas](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/pt-br/image-cards-layers.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=526632f5d9a1e61e2558bf0c553e7217)

Dashboard → Design → Cartões de imagem: o editor de camadas (Premium): cada elemento do cartão é uma camada.

Um cartão que usava recursos Premium continua funcionando com as configurações básicas se o Premium acabar.

## Imagens

Um fundo ou qualquer imagem pode vir de um link `https` ou ser enviado no dashboard. Os links só são buscados na internet pública.

![Imagens enviadas 2 de 50, 1,4 de 100 MB: um banner rosa e um céu estrelado](https://mintcdn.com/wikipetto/nxaIoCQkyHIG5Fmv/images/dashboard/resources/pt-br/image-cards-pictures.webp?fit=max\&auto=format\&n=nxaIoCQkyHIG5Fmv\&q=85\&s=65cef2146ef8d6828ec8242d607613ef)

Dashboard → Design → Cartões de imagem: as imagens enviadas pelo servidor, com o que usam do limite.


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