# Lista de imagens

Suporta as mesmas funcionalidades do card [**Default**](https://docs.grano.app/conteudo/estrutura-e-conteudos/cards/default), porém com as especificidades a seguir apresentadas para configurar uma lista de imagens.

### <mark style="color:blue;">Estrutura Geral</mark>

Após parametrizar os demais aspectos do card:

* Escolha em quantas colunas você ter exibir as imagens do card:

<div align="left"><figure><img src="https://lh4.googleusercontent.com/BqXYv-A8Mp3e7zyxwd3bLMpaJEONwV8RRGMhKryH-65OvFsTb5tvoMsMLAoG-U4kUGt6o8Xxj9dwf_pm_6cfEn4LuAftuB3Riw6_4-gAoYbNBBqhKou4G3ruweEKriPLG8QdrS9Tt5g5Hj28VBmHGQY" alt=""><figcaption><p>Campo de "Quantidade de Colunas"</p></figcaption></figure></div>

* No bloco "<mark style="background-color:yellow;">**Lista de Imagens**</mark>" você poderá acionar quantas imagens quiser; para tal, para clicar no botão "**Adicionar Imagem**".

![](https://lh3.googleusercontent.com/eBdWvZvOKxd5rdYvPY0sikeXAL6Ulr1h6D0oYGdwvl-dBx8cGgmNTeaAzXUht9AlvpUBUW_Md1hZQYgrEDfuMkyQVvp4TLzYolxOvbjPvA3oL6T2Ez8ieXicd1GKl8Px1PRnMyWdd8Gs7AiokaqS_1g)

* Você poderá tipificar **cada imagem** no campo "<mark style="background-color:yellow;">**Tipo**</mark>".

<div align="left"><figure><img src="https://lh3.googleusercontent.com/B2m9btkO4q7Y5O4AE6pmLAS2yVoo1NAdArZRWfU-BmRjM8WlU9O8-nhf-PkbZRh0vOIWCWixbETy7_JrkRdsmuae1hlr98Sxkv3-EzGorsccivEdylY_-wF35iw3xGdt_JL_yiDyRcqrsGMOTG-RINk" alt=""><figcaption><p>Campo "Tipo"</p></figcaption></figure></div>

### <mark style="color:blue;">**Imagens do "tipo" Vídeo:**</mark>

* Preencher o campo <mark style="background-color:yellow;">**Título**</mark> (opcional).
* Preencher o campo <mark style="background-color:yellow;">**Texto**</mark> (opcional).
* Fazer upload da imagem no campo <mark style="background-color:yellow;">**Thumb**</mark> (tamanho recomendado: **500x500 pixels**)
* <mark style="background-color:yellow;">**URL do Vídeo**</mark> (suportado: YouTube, Facebook, Twitch e Vimeo).&#x20;
* Por fim, clique em <mark style="background-color:yellow;">**Salvar imagem**</mark> para gravar o item na sua lista.

![](https://lh4.googleusercontent.com/N6z9hqZQD7I3FG6KQflvH1Zm-PTRHqBvilWwrKJnXaZFhnN1tw-mXK-KUZFOdF9p2V6miiRsk_D6z_HOccd199LcKBLw1kVPBStl-TpuhtilH-IZa86JGYrdbQPo82kyLs5fQ8y2WMce_UcAYkDlFxk)

### <mark style="color:blue;">**Imagens do "tipo" URL:**</mark>

* Fazer upload da imagem no campo <mark style="background-color:yellow;">**Thumb**</mark> (tamanho recomendado: **500x500 pixels**)
* <mark style="background-color:yellow;">**Link do conteúdo**</mark> (suportado: qualquer link -- um site, formulário, Google Drive, etc.).
* Por fim, clique em <mark style="background-color:yellow;">**Salvar imagem**</mark> para gravar o item na sua lista.

![](https://lh4.googleusercontent.com/N6z9hqZQD7I3FG6KQflvH1Zm-PTRHqBvilWwrKJnXaZFhnN1tw-mXK-KUZFOdF9p2V6miiRsk_D6z_HOccd199LcKBLw1kVPBStl-TpuhtilH-IZa86JGYrdbQPo82kyLs5fQ8y2WMce_UcAYkDlFxk)

Após adicionar todas as imagens desejadas para fazer a sua lista, clique no botão **“Salvar”** para gravar as informações editadas.

![](https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FjtUfiwkG8uGTYDfBe2jf%2FCaptura%20de%20Tela%202023-03-14%20a%CC%80s%2016.32.08.png?alt=media\&token=88949ed8-100e-4631-a3ef-2d8ef8f92b1c)

{% hint style="warning" %}
Na Grano, é necessário que você fique atento aos **tamanhos** dos arquivos e mídias no momento de fazer o cadastro dos cards.\
\
**Cards imagem = até 800 KB**\
**Gifs e Vídeos que são cadastrados direto na plataforma =** **até 200KB** - Esse peso não se aplica para vídeos que serão hospedados em outras ferramentas (Vimeo, Youtube, etc)\
**Sons = até 10 MB**\
\
**Lembre-se:** arquivos mais leves são preferíveis. Eles contribuem para o desempenho otimizado da plataforma e aprimoram a experiência do usuário. Antes de fazer o upload, confira o tamanho dos arquivos que você planeja enviar e realize os ajustes necessários. \
\
Se precisar reduzir o tamanho de um arquivo, ferramentas de compressão online gratuitas podem ser uma solução útil.
{% endhint %}

### <mark style="color:blue;">Como fica esse tipo de card?</mark>

Exemplo de card com background (uma cor), título e texto preenchidos; configuração de 2 colunas e adição de 3 imagens na lista: **violão, bateria e guitarra**.

<div align="left"><figure><img src="https://lh5.googleusercontent.com/mSZaAaUvGaZ8kG9QSyxgmytN1i53AaEU0Tywh82ZDupwuA4TkcMdehts5aux25Du600jJORbXgsTwm5-VSFrIDG0ifcuKN6zHz8_XnDaoPTSzE6qNCBb3pKDgjMOf-fyCUufg-A8D4lv5TVwm9Ylgrc" alt=""><figcaption></figcaption></figure></div>

Imagens do violão e da guitarra apresentam um **ícone de vídeo**. Ao clicar, abre um vídeo embed do Youtube, incluindo o **Título** e o **Texto**.

<div align="left"><figure><img src="https://lh5.googleusercontent.com/JV-gZBgB461t6r8Pbg8fNihG1JWLtX8tuu2YOhXFl4q_XiFRWdL1iLp-3FPAwYht4oLQUR_RQ86KGtf30FYnjhuSOJmoKiHCB4leWFLYsPgSg3_43K2TJSJdAqm0V8BiwilZ7hoiO5XzYK8DQhmgK98" alt=""><figcaption><p>Vídeo fulscreen - Título "Vídeo YouTube" e texto</p></figcaption></figure></div>

Imagem da bateria apresenta um ícone de **link**; ao clicar, abre uma página externa.

***

> *© 2026 Grano Edtech LTDA. Todos os direitos reservados.*