# Media en inline bewerken

De mediabibliotheek, responsieve afbeeldingen en tekst en afbeeldingen bewerken op de pagina.

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

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

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

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

| Modus | Resultaat |
|---|---|
| standaard | Verkleind tot een breedte, hoogte in verhouding |
| `mode=c` | Verkleind tot een hoogte, breedte in verhouding |
| `mode=w?ratio=1.0` | Bijgesneden tot een vierkant, voor avatars en thumbnails |

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:

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

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

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

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](/nl/docs/learn/projects/). `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

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