Mídia e edição inline

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

"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

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

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:

"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á:

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

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.