> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# ThumborUrlBuilder

> Classe utilitária para geração de URLs de imagem otimizadas via Thumbor. Disponível via $thumborize em todos os componentes.

Classe que constrói URLs de imagem otimizadas pelo serviço Thumbor da Yampi. Quando o Thumbor está desabilitado (`window.Yampi.thumbor.enabled === false`), retorna a URL original sem modificação.

Na maioria dos casos, use o método `$thumborize` do [mixin helpers](/editor-codigo/mixins/helpers) em vez de instanciar a classe diretamente.

## Uso via helpers (recomendado)

```js theme={"system"}
// Em qualquer componente (via mixin helpers)
this.$thumborize(imageUrl, { resize: '300x300', smart: 'smart' });
```

## Uso direto

```js theme={"system"}
import ThumborUrlBuilder from '@/modules/thumborUrlBuilder';

const url = new ThumborUrlBuilder('https://cdn.example.com/foto.jpg', {
    resize: '600x400',
    smart: 'smart',
    fitIn: 'fit-in',
}).generate();
```

## Construtor

```js theme={"system"}
new ThumborUrlBuilder(url: String, params?: Object)
```

Os `params` são mesclados com `window.Yampi.thumbor.default`, que contém as configurações padrão da loja.

## Parâmetros

| Parâmetro |   Tipo   | Descrição                                                                                           |
| :-------- | :------: | :-------------------------------------------------------------------------------------------------- |
| `trim`    | `String` | Remove bordas de cor uniforme da imagem.                                                            |
| `fitIn`   | `String` | Redimensiona mantendo proporção dentro das dimensões. Use `'fit-in'`.                               |
| `crop`    | `String` | Recorte manual no formato `AxB:CxD`.                                                                |
| `resize`  | `String` | Dimensões no formato `LARGURAxALTURA` (ex: `'300x300'`). Use `0` para proporcional (ex: `'300x0'`). |
| `hAlign`  | `String` | Alinhamento horizontal: `'left'`, `'center'`, `'right'`.                                            |
| `vAlign`  | `String` | Alinhamento vertical: `'top'`, `'middle'`, `'bottom'`.                                              |
| `smart`   | `String` | Detecção inteligente de foco. Use `'smart'`.                                                        |
| `filters` |  `Array` | Filtros adicionais do Thumbor (ex: `['quality(80)', 'format(webp)']`).                              |

## Métodos

| Método                      |  Retorno | Descrição                                                                |
| :-------------------------- | :------: | :----------------------------------------------------------------------- |
| `generate()`                | `String` | Retorna a URL final do Thumbor. Se desabilitado, retorna a URL original. |
| `addFilter(filter: String)` |  `this`  | Adiciona um filtro Thumbor dinamicamente. Encadeável.                    |