Media en inline bewerken

Afbeeldingen en bestanden gaan via de mediabibliotheek. Redacteuren uploaden één keer en gebruiken een bestand overal waar een veld of tekst erom vraagt. De site levert afbeeldingen in het formaat dat elke layout nodig heeft, en redacteuren passen tekst en afbeeldingen op de pagina zelf aan.

De mediabibliotheek

Uploads worden opgeslagen op basis van hun checksum: hetzelfde bestand dat twee keer wordt geüpload, wordt één keer bewaard. Elk bestand heeft een record met naam, titel, type, grootte en, bij afbeeldingen, de oriëntatie. De bibliotheek op /nb-admin/media laat zien waar een bestand wordt gebruikt, en het dashboard kan bestanden verwijderen die nergens worden gebruikt.

Afbeeldingsvelden

"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}

Een image-veld bevat één afbeelding, een gallery er meerdere, een file elk document. Het admin-formulier biedt uploaden en een kiezer uit de bibliotheek.

Responsieve afbeeldingen

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

[#get-img-html#] schrijft een <img> met een srcset, sizes, lazy loading en afmetingen. sizes zegt hoeveel van de schermbreedte de afbeelding vanaf elk breakpoint inneemt: de volle breedte op telefoons, de helft vanaf md, een derde vanaf lg. De browser kiest dan het kleinste bestand dat scherp genoeg is.

Elk formaat wordt bij de eerste aanvraag gemaakt, als WebP geleverd en gecachet. Afbeeldingen worden nooit vergroot. Rechtstreeks staat een afbeelding op /img/<uuid>/<size>: 800w voor een breedte, 400h voor een hoogte, 400x300c voor een uitsnede, 400x300f om binnen een kader te passen.

Opgemaakte tekst met afbeeldingen

Met een html-veld met "media": true zetten redacteuren afbeeldingen in de tekst:

"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
}

media_sizes vertelt de editor hoe breed afbeeldingen in de tekst worden getoond, zodat de juiste formaten worden geleverd. buttons bepaalt de opmaakwerkbalk; "paste_html": true houdt basisopmaak vast bij plakken uit een tekstverwerker.

Bewerken op de pagina

Op elke pagina die met [#html#] is gebouwd, krijgen gebruikers met edit-inline-content de pagina-acties. Edit zet inline bewerken aan, en elk bewerkbaar element wordt bewerkbaar op de plek waar het staat:

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

De waarde noemt de resource, het record en het veld. Bewerkbare teksten die bij een pagina horen in plaats van bij een record, gebruiken [#cfield name#], zoals in de tutorial. data-nb-edit-options bepaalt de werkbalk voor één element, zoals {"plain": true} voor een kop.

Bewerkingen worden via de API opgeslagen met de eigen rechten van de redacteur, en elke wijziging komt in de geschiedenis van het record.

Uploaden via de API

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

Het antwoord bevat de UUID van het bestand, die je net als elke andere waarde in een afbeeldingsveld zet.