> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/banner.md).

# banner

O objeto `banner` é responsável por trazer um determinado banner cadastrado no painel e mostra-lo conforme características necessárias.

{% hint style="info" %}
**Disponível em todas as páginas.**\
**Para saber mais sobre como gerenciar banners acesse:**

[Cadastrar Banners](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743567784603-Cadastrar-Banners)

[Cadastrar Banner JavaScript](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743394900123-Banner-JavaScript-Banner-Rotativo)
{% endhint %}

### Atributos disponíveis

Para imprimir um `banner`, você poderá utilizar o helper de banner, onde exibem os banners em um bloco pré-moldado. Segue abaixo algumas chamadas:

<table><thead><tr><th width="196.4968152866242">Atributos</th><th>Característica</th></tr></thead><tbody><tr><td><code>{{ banner.home }}</code></td><td>Banner Home <strong>Desktop</strong> (Exibido somente na página inicial do site. Antes dos produtos). Sugerida exibição para o Desktop.</td></tr><tr><td><code>{{ banner.mobile }}</code></td><td>Banner Home <strong>Mobile</strong> (Exibido somente na página inicial do site. Antes dos produtos). Sugerida exibição para o Mobile.</td></tr><tr><td><code>{{ banner.footer }}</code></td><td>Exibido em todas as páginas, no rodapé.</td></tr><tr><td><code>{{ banner.bottom }}</code></td><td>Banner exibido na pagina na parte inferior</td></tr><tr><td><code>{{ banner.side }}</code></td><td>Exibido em todas as páginas, na lateral da loja</td></tr><tr><td><code>{{ banner.title }}</code></td><td>Exibido em todas as páginas antes do título</td></tr><tr><td><code>{{ banner.floating }}</code></td><td>Exibido na vitrine, apenas arquivos em FLASH</td></tr><tr><td><code>{{ banner.popup }}</code></td><td><del>Abre uma nova janela do navegador contendo somente o banner.</del> <mark style="background-color:red;">Depreciado</mark></td></tr><tr><td><code>{{ banner.showcase }}</code></td><td>Banner Vitrine (Exibido somente na página inicial do site, ao lado do menu de categorias.)</td></tr><tr><td><code>{{ banner.extra1 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra2 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra3 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra4 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra5 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra6 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra7 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra8 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra9 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra10 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra11 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra12 }}</code></td><td>Exibido em layouts personalizados</td></tr></tbody></table>

E se você deseja criar o banner do seu jeito, poderá utilizar as informações da tabela de atributos abaixo, substituindo o **home** pela posição de banner desejada. Lembrando que o padrão de chamada é sempre: `banners.{position}.{key}`

<table><thead><tr><th width="266.17034501085334">Atributos</th><th>Característica</th></tr></thead><tbody><tr><td><code>{{ banners.home.id }}</code></td><td>Identificador único do banner</td></tr><tr><td><code>{{ banners.home.type }}</code></td><td>Tipo do banner, valores possíveis: "<code>javascript</code>", "<code>image</code>", "<code>flash</code>", "<code>gallery</code>"</td></tr><tr><td><code>{{ banners.home.description }}</code></td><td>Descrição do banner</td></tr><tr><td><code>{{ banners.home.src }}</code></td><td>URL do banner, usado por exemplo no atributo <strong>src</strong> da tag <code>img</code>.</td></tr><tr><td><code>{{ banners.home.link }}</code></td><td>Link do banner, usado por exemplo no atributo <strong>href</strong> da tag <code>a</code>.</td></tr><tr><td><code>{{ banners.home.tracked_link }}</code></td><td>Link de tracking ou link rastreável, que quando usado contabiliza os cliques no banner. Usado por exemplo no atributo <strong>href</strong> da tag <code>a</code>.</td></tr><tr><td><code>{{ banners.home.width }}</code></td><td>Largura da imagem ou do objeto flash, usado no atributo <strong>width</strong> da tag <code>img</code>.</td></tr><tr><td><code>{{ banners.home.height }}</code></td><td>Altura da imagem ou do objeto flash, usado no atributo <strong>height</strong> da tag <code>img</code>. </td></tr><tr><td><code>{{ banners.home.alt }}</code></td><td>Usado no atributo <strong>alt</strong> da tag <code>img</code>, exibe o texto alternativo cadastrado para a imagem do banner</td></tr><tr><td><code>{{ banners.home.alternative_path }}</code></td><td>Usado no atributo <strong>src</strong> da tag <code>img</code> quando existem dois banners cadastrados na mesma posição para alternar entre as imagens a cada novo carregamento da loja.</td></tr><tr><td><code>{{ banners.home.target }}</code></td><td>Se o link vai abrir em uma nova janela ou na mesma,  usado no atributo <strong>target</strong> da tag <code>a</code>.</td></tr><tr><td><code>{{ banners.home.banner_alt }}</code></td><td>Exibe um banner alternativo caso não tenha suporte ao flash (apenas quando o tipo for "flash"), possui as chaves "src", "link", "target"</td></tr><tr><td><code>{{ banners.home.margin_top }}</code></td><td>Especifica a posição do banner referente ao topo da página (apenas banner "floating")</td></tr><tr><td><code>{{ banners.home.margin_left }}</code></td><td>Especifica a posição do banner referente ao lado esquerdo da página.</td></tr><tr><td><code>{{ banners.extra1.interval }}</code> <mark style="color:red;">¹</mark></td><td>Intervalo da transição entre cada slide definido para o banner que pode variar de 3 a 10 (segundos)</td></tr><tr><td><code>{{ banners.extra1.velocity }}</code> <mark style="color:red;">¹</mark></td><td>Velocidade da animação definida para o banner. Valores possíveis: <code>0.5</code> | <code>1.0</code> | <code>1.5</code> | <code>2.0</code></td></tr><tr><td><code>{{ banners.extra1.animation }}</code> <mark style="color:red;">¹</mark></td><td>Tipo da animação definida para o banner. Valores possíveis: <code>blind</code> | <code>block</code> | <code>cube</code> | <code>cubeSpread</code> | <code>fade</code> | <code>fadeFour</code> | <code>glassCube</code> | <code>horizontal</code> | <code>tube</code></td></tr><tr><td><code>{{ banners.extra1.stop_over }}</code> <mark style="color:red;">¹</mark></td><td>Pausar a troca de slides quando o mouse estiver sobre o banner. Valores possíveis: <code>0</code> | <code>1</code></td></tr><tr><td><code>{{ banners.extra1.navigation }}</code> <mark style="color:red;">¹</mark></td><td>Tipos de navegação. Valores possíveis: <code>0</code> | <code>1</code> | <code>2</code></td></tr><tr><td><code>{{ banners.extra1.progressbar }}</code> <mark style="color:red;">¹</mark></td><td>Exibir barra de progresso. Valores possíveis:  <code>0</code> | <code>1</code></td></tr><tr><td><code>{% for slide in banners.extra1.slides %}</code> <mark style="color:red;">¹</mark></td><td>Loop para acessar dados das imagens cadastradas no banner definido. Valores possíveis de se consultar: <code>image</code> | <code>link</code> | <code>label</code> | <code>target</code> | <code>width</code> | <code>height</code></td></tr></tbody></table>

{% hint style="warning" %} <mark style="color:red;">¹</mark> Disponível apenas para banners rotativos do tipo JavaScript.
{% endhint %}

## Como Usar

A chamada do objeto no código HTML deve seguir como o formato básico abaixo, nesse código se o banner do tipo home estiver cadastrado ele será exibido:

{% code title="exemplo.twig" %}

```twig
{% if banners.home %}
    {{ banner.home }}
{% endif %}
```

{% endcode %}

No código abaixo é verificado se existe um banner, caso exista é exibido a imagem e seu link de acordo com suas dimensões e a forma de exibição do link.

{% code title="banner.html" %}

```html
  {% if banners.home %}
     <a href="{{ banners.home.link }}" target="{{ banners.home.target }}">
        <img src="{{ banners.home.src }}" width="{{ banners.home.width }}" alt="{{ banners.home.alt }}" >
     </a>
  {% endif %}
```

{% endcode %}

## Exemplo com Banner Home

No código abaixo é exibido o Banner alternativo caso não tenha suporte ao flash (apenas quando o tipo for "flash"), possui as chaves "`src`", "`link`", "`target`".

{% code title="banner-home.html" %}

```html
{% if banners.home.banner_alt %}
  {% set bannerAlt = banners.home.banner_alt %}
    <a href="{{ bannerAlt.link }}" target="{{ bannerAlt.target }}">
      <img src="{{ bannerAlt.src }}" alt="{{ bannerAlt.alt }}">
    </a>
{% endif %}
```

{% endcode %}

## Exemplo com Banner Home e Mobile

No código abaixo é exibido o Banner Home para os acessos Desktop e o Banner Mobile para acessos Mobile.

Lembrando que, caso cadastre somente o Banner Home, o mesmo será exibido tanto para os acessos Desktop quanto pelo Mobile.

{% code title="" %}

```html
{% if banner.home or banner.mobile %}
    {% if banner.mobile and utils.is_mobile %}
	    {{ banner.mobile }}          
	{% else %}
		{{ banner.home }}    
	{% endif %}
{% endif %}
```

{% endcode %}

## Exemplo com Banner Extra

No código abaixo é exibido o Banner Extra1 de forma alternada  a cada novo carregamento da loja, quando existirem dois banners cadastrados na mesma posição.

{% code title="banner-extra.html" %}

```html
{% if banners.extra1.alternative_path %}          
      <a href="{{ banners.extra1.link }}" target="{{ banners.extra1.target }}">                     
            <img src="{{ banners.extra1.alternative_path }}" alt="{{ banners.extra1.img_alt }}">                    
      </a>            
{% endif %}
```

{% endcode %}

No código abaixo é exibido todas as imagens cadastradas no Banner Extra1 utilizando o loop.

{% code title="banner-extra.html" %}

```html
{% for slide in banners.extra1.slides %}
    <a href="{{ slide.link }}" target="{{ slide.target }}">
        <img src="{{ slide.image }}" alt="{{ slide.label }}">
     </a>
{% endfor %}      
```

{% endcode %}