Avec l'intégration de Kontainer à Storyblok, vos éditeurs peuvent sélectionner des images, des vidéos et des fichiers directement depuis votre DAM, sans téléverser de fichiers dans Storyblok. Storyblok ne conserve qu'une référence au fichier ; le fichier lui-même reste dans Kontainer et est diffusé via le CDN.
Rendez-vous sur la page des intégrations de Kontainer pour en savoir plus sur les cas d'usage, les avantages, etc.
Prérequis
- Un espace Storyblok, avec des droits d'administrateur sur celui-ci : l'extension ne peut pas être installée sans eux
- Un compte Kontainer (https://votreentreprise.kontainer.com)
- L'intégration de Storyblok activée sur votre compte Kontainer : vérifiez auprès de votre responsable de compte qu'elle est incluse dans votre offre
Ce qui est stocké, et où
Vos fichiers restent dans Kontainer. Rien n'est téléversé dans la bibliothèque de fichiers de Storyblok. Storyblok enregistre une valeur de fichier standard qui pointe vers le CDN de Kontainer, la référence Kontainer étant conservée à côté :
filename: l'URL CDN, avec le modèle de téléchargement que vous avez choisialt, title: repris de la description du fichier dans Kontainerfocus: le point focal défini dans Kontainer, au format propre à Storyblokmeta_data.kontainer_file_id, kontainer_folder_id, kontainer_url: des identifiants pour retrouver le fichiermeta_data.kontainer_thumbnail_url, kontainer_extension, kontainer_type
Comme le texte alternatif et le point focal accompagnent la référence, les éditeurs n'ont pas à ressaisir les métadonnées dans Storyblok, et le remplacement d'un fichier dans Kontainer le met à jour partout où il est utilisé.
Pour commencer
1. Activer l'intégration dans Kontainer
Demandez à votre responsable de compte d'activer l'intégration de Storyblok pour votre compte Kontainer. Cela permet à Storyblok d'intégrer le sélecteur de fichiers de Kontainer, et c'est indispensable pour que le sélecteur s'ouvre.
2. Installer l'extension dans Storyblok
Ouvrez le lien d'installation, choisissez l'espace dans lequel vous souhaitez l'installer et confirmez :
https://app.storyblok.com/#/install/kontainer@asset-pickerVous devez disposer de droits d'administrateur sur l'espace cible. L'installation se fait une seule fois par espace.
3. Ajouter le champ Kontainer à un bloc
Dans votre espace, rendez-vous dans Block Library, ouvrez le bloc dans lequel vous souhaitez le sélecteur et ajoutez un nouveau champ. Définissez son type sur Plugin et choisissez kontainer dans la liste.
4. Faire pointer le champ vers votre Kontainer
Le champ étant sélectionné, ajoutez l'option kontainerHost et définissez-la sur le domaine de votre Kontainer, par exemple votreentreprise.kontainer.com (avec ou sans https://).
Storyblok enregistre les options de plugin champ par champ : répétez donc cette étape pour chaque champ qui utilise le sélecteur. Storyblok ne reporte pas les valeurs d'options d'un espace à l'autre : chaque espace se configure séparément.
5. Sélectionner des fichiers
Ouvrez une story qui utilise le bloc et cliquez sur Select from Kontainer dans le champ. Lors de la première utilisation, connectez-vous avec votre nom d'utilisateur et votre mot de passe Kontainer habituels. Parcourez, recherchez et filtrez votre bibliothèque comme d'habitude, appliquez si besoin un modèle de téléchargement (recadrage, redimensionnement, format), puis sélectionnez le fichier.
Le champ affiche alors un aperçu et le nom du fichier. Replace asset permet de choisir un autre fichier et Remove asset vide le champ. Les fichiers qui ne sont pas des images, comme les PDF et les vidéos, affichent une carte avec le type de fichier à la place d'un aperçu.
Options du champ
| Option | Obligatoire | Valeur |
|---|---|---|
kontainerHost |
Oui | Le domaine de votre Kontainer, par exemple votreentreprise.kontainer.com |
mode |
Non | external (par défaut) relie le fichier dans Kontainer. import le copie dans la bibliothèque de fichiers de Storyblok. |
storyblokRegion |
Import uniquement | eu (par défaut), us, ca, ap ou cn |
storyblokManagementToken |
Import uniquement | Un jeton d'accès personnel Storyblok avec accès en écriture aux fichiers |
maxImportMb |
Non | Taille maximale d'un fichier accepté par l'import, 50 par défaut |
Facultatif : importer des fichiers dans Storyblok
Certaines équipes exigent que tous les fichiers soient hébergés par Storyblok lui-même. En définissant mode sur import, le fichier est copié dans la bibliothèque de fichiers de l'espace au lieu d'être relié. Il devient alors un fichier Storyblok ordinaire, que le service d'images de Storyblok peut transformer.
Deux points à garder à l'esprit avant de passer un champ en mode import :
- La copie n'est plus mise à jour lorsque le fichier change dans Kontainer.
- Le jeton de gestion est une option de champ : il est donc transmis au navigateur de chaque éditeur qui utilise ce champ. Créez-en un jeton restreint : dans Storyblok, accordez-lui uniquement le périmètre Assets, limité à l'unique espace concerné. Ne réutilisez pas un jeton qui a accès à l'ensemble de votre compte.
Utiliser le fichier dans votre frontend
Le champ renvoie un objet de fichier Storyblok standard : il se comporte comme n'importe quel autre champ de fichier :
const { filename, alt, focus } = story.content.hero;Appelez le fichier à partir de filename : il est servi depuis le CDN de Kontainer.
Le service d'images de Storyblok ne redimensionne ni ne recadre une URL externe : utilisez donc les paramètres de transformation propres à Kontainer, ou un modèle de téléchargement choisi lors de la sélection, pour contrôler la taille et le format livrés. Le point focal est disponible à la fois sous la forme de la valeur focus de Storyblok et sous la forme de coordonnées brutes en pixels dans meta_data.
Support
Si vous avez besoin d'aide pour installer ou configurer le plugin Storyblok, notre équipe de support se fera un plaisir de vous aider.
Contactez : support@kontainer.com