# Mídia e edição inline

A biblioteca de mídia, imagens responsivas e edição de texto e imagens na própria página.

Imagens e arquivos passam pela biblioteca de mídia. Os editores enviam uma vez e usam um arquivo onde quer que um campo ou um texto peça. O site serve imagens no tamanho e formato de que cada layout precisa, e os editores mudam textos e imagens na própria página.

## A biblioteca de mídia

Os envios são guardados pelo checksum: o mesmo arquivo enviado duas vezes é guardado uma vez. Cada arquivo tem um registro com nome, título, tipo, tamanho e, para imagens, a orientação. A biblioteca em `/nb-admin/media` mostra onde um arquivo é usado, e o painel pode remover arquivos que nada usa.

## Campos de imagem

```json
"cover": {"name": "Cover", "type": "image", "admin_col": false},
"photos": {"name": "Photos", "type": "gallery", "admin_col": false},
"brochure": {"name": "Brochure", "type": "file", "accept": ".pdf", "admin_col": false}
```

Um campo `image` guarda uma imagem, um `gallery` várias, um `file` qualquer documento. O formulário do admin oferece envio e um seletor da biblioteca.

## Imagens responsivas

```html
[#get-img-html [#project.cover#] sizes="sm-100,md-50,lg-33"#]
```

O `[#get-img-html#]` escreve um `<img>` com `srcset`, `sizes`, carregamento lazy e dimensões. O `sizes` diz quanto da largura da tela a imagem ocupa a partir de cada breakpoint: a largura toda em celulares, metade a partir de `md`, um terço a partir de `lg`. O navegador então escolhe o menor arquivo que fica nítido o bastante.

| Modo | Resultado |
|---|---|
| padrão | Redimensionada para uma largura, altura proporcional |
| `mode=c` | Redimensionada para uma altura, largura proporcional |
| `mode=w?ratio=1.0` | Recortada em quadrado, para avatares e miniaturas |

Cada tamanho é gerado no primeiro pedido, servido em WebP e guardado em cache. As imagens nunca são ampliadas. Diretamente, uma imagem fica em `/img/<uuid>/<size>`: `800w` para uma largura, `400h` para uma altura, `400x300c` para um recorte, `400x300f` para caber numa caixa.

## Texto formatado com imagens

Um campo `html` com `"media": true` permite aos editores colocar imagens no texto:

```json
"body": {
  "name": "Body", "type": "html",
  "buttons": "h2,h3,bold,italic,orderedlist,unorderedlist,quote,anchor",
  "media": true, "media_sizes": "sm-90,md-70,lg-60",
  "admin_col": false
}
```

O `media_sizes` diz ao editor em que largura as imagens do texto são exibidas, para que os tamanhos certos sejam servidos. O `buttons` define a barra de formatação; `"paste_html": true` mantém a formatação básica ao colar de um editor de texto.

## Editando na página

Em qualquer página construída com `[#html#]`, usuários com `edit-inline-content` ganham as ações da página. **Edit** liga a edição na página, e cada elemento editável fica editável onde está:

```html
<div data-nb-edit="projects.[#project.uuid#].description">
  [#get-html project.description#]
</div>

<div data-nb-edit-img="projects.[#project.uuid#].cover">
  [#get-img-html [#project.cover#] sizes="sm-100,lg-75"#]
</div>
```

O valor indica o recurso, o registro e o campo. Textos editáveis que pertencem a uma página, e não a um registro, usam `[#cfield name#]`, como no [tutorial](/pt/docs/learn/projects/). O `data-nb-edit-options` define a barra de ferramentas de um elemento, como `{"plain": true}` para um título.

As edições são salvas pela API com as permissões do próprio editor, e cada alteração entra no histórico do registro.

## Enviando pela API

```bash
curl -X POST https://example.com/api/v1/.files \
  -H "Authorization: Bearer $TOKEN" \
  -F "file=@photo.jpg"
```

A resposta traz o UUID do arquivo, que vai num campo de imagem como qualquer outro valor.