Met de Storyblok-integratie van Kontainer kiezen je redacteuren afbeeldingen, video's en bestanden rechtstreeks uit je DAM, zonder bestanden naar Storyblok te uploaden. Storyblok slaat alleen een verwijzing naar het bestand op; het eigenlijke bestand blijft in Kontainer en wordt via een CDN geleverd.

Op de integratiepagina van Kontainer leest je meer over toepassingen, voordelen en meer.

Vereisten

  • Een Storyblok-space en beheerdersrechten daarop – zonder die rechten kan de extensie niet worden geïnstalleerd
  • Een Kontainer-account (https://jouwbedrijf.kontainer.com)
  • De Storyblok-integratie ingeschakeld voor je Kontainer-account – controleer bij je accountmanager of die bij je abonnement is inbegrepen

Wat wordt waar opgeslagen?

Je bestanden blijven in Kontainer. Er wordt niets geüpload naar de bestandsbibliotheek van Storyblok. Storyblok slaat een standaardwaarde voor een bestand op die naar het Kontainer-CDN verwijst, met daarnaast de Kontainer-referentie:

  • filename – de CDN-URL, inclusief het downloadsjabloon dat je hebt gekozen
  • alt, title – overgenomen uit de beschrijving van het bestand in Kontainer
  • focus – het brandpunt dat je in Kontainer hebt ingesteld, in het eigen formaat van Storyblok
  • meta_data.kontainer_file_id, kontainer_folder_id, kontainer_url – identificatiegegevens om het bestand op te halen
  • meta_data.kontainer_thumbnail_url, kontainer_extension, kontainer_type

Omdat de alt-tekst en het brandpunt met de verwijzing meereizen, hoeven redacteuren metadata niet opnieuw in te typen in Storyblok, en wordt een bestand dat je in Kontainer vervangt overal bijgewerkt waar het wordt gebruikt.

Aan de slag

1. De integratie in Kontainer inschakelen

Vraag je accountmanager om de Storyblok-integratie voor je Kontainer-account in te schakelen. Daarmee kan Storyblok de Kontainer-bestandskiezer insluiten, en dat is vereist voordat de kiezer opent.

2. De extensie in Storyblok installeren

Open de installatielink, kies de space waarin je wilt installeren en bevestig:

https://app.storyblok.com/#/install/kontainer@asset-picker

Je hebt beheerdersrechten nodig voor de doelspace. Installeer de extensie één keer per space.

3. Het Kontainer-veld aan een blok toevoegen

Ga in je space naar de Block Library, open het blok waarin je de kiezer wilt hebben en voeg een nieuw veld toe. Stel het type in op Plugin en kies kontainer uit de lijst.

4. Het veld naar je Kontainer laten verwijzen

Voeg bij het geselecteerde veld de optie kontainerHost toe en stel die in op je Kontainer-domein, bijvoorbeeld jouwbedrijf.kontainer.com (met of zonder https://).

Storyblok slaat plug-inopties per veld op, dus herhaal dit bij elk veld dat de kiezer gebruikt. Storyblok neemt optiewaarden niet over tussen spaces, dus elke space configureert je afzonderlijk.

5. Bestanden kiezen

Open een story die het blok gebruikt en klik bij het veld op Select from Kontainer. Log de eerste keer in met je gewone Kontainer-gebruikersnaam en -wachtwoord. Blader, zoek en filter in je bibliotheek zoals gewoonlijk, pas eventueel een downloadsjabloon toe (bijsnijden, formaat wijzigen, bestandsformaat) en kies het bestand.

Het veld toont daarna een voorbeeld en de bestandsnaam. Met Replace asset kies je een ander bestand en met Remove asset maak je het veld leeg. Bestanden die geen afbeelding zijn, zoals pdf's en video's, tonen in plaats van een voorbeeldafbeelding een bestandskaart met het bestandstype.

Veldopties

Optie Vereist Waarde
kontainerHost Ja Je Kontainer-domein, bijvoorbeeld jouwbedrijf.kontainer.com
mode Nee external (standaard) koppelt het bestand in Kontainer. import kopieert het naar de bestandsbibliotheek van Storyblok.
storyblokRegion Alleen bij importeren eu (standaard), us, ca, ap of cn
storyblokManagementToken Alleen bij importeren Een persoonlijk toegangstoken van Storyblok met schrijftoegang tot bestanden
maxImportMb Nee Het grootste bestand dat de import accepteert, standaard 50

Optioneel: bestanden in Storyblok importeren

Sommige teams eisen dat elk bestand door Storyblok zelf wordt gehost. Stelt je mode in op import, dan wordt het bestand naar de eigen bestandsbibliotheek van de space gekopieerd in plaats van gekoppeld. Het bestand is dan een gewoon Storyblok-bestand, en de afbeeldingsservice van Storyblok kan het bewerken.

Twee dingen om rekening mee te houden voordat je een veld op importmodus zet:

  • De kopie wordt niet meer bijgewerkt wanneer het bestand in Kontainer verandert.
  • Het managementtoken is een veldoptie, wat betekent dat het wordt geleverd aan de browser van elke redacteur die dat veld gebruikt. Maak daarvoor een beperkt token: geef het in Storyblok alleen de scope voor bestanden, beperkt tot de ene space die het nodig heeft. Gebruik geen token dat toegang heeft tot je hele account.

Het bestand in je frontend gebruiken

Het veld retourneert een standaard Storyblok-bestandsobject en gedraagt zich dus als elk ander bestandsveld:

const { filename, alt, focus } = story.content.hero;

Vraag het bestand op via filename – het wordt geleverd vanuit het CDN van Kontainer.

De afbeeldingsservice van Storyblok schaalt of snijdt een externe URL niet bij. Gebruik dus de eigen transformatieparameters van Kontainer, of een downloadsjabloon dat je bij het kiezen selecteert, om de geleverde grootte en het formaat te bepalen. Het brandpunt is beschikbaar als Storyblok-waarde focus en als ruwe pixelcoördinaten in meta_data.

Support

Heb je hulp nodig bij het instellen of configureren van de Storyblok-plug-in? Ons supportteam helpt je graag.

Neem contact op via: support@kontainer.com