Image Focal Point

L’application Image Focal Point vous permet d’associer des images à des données de point focal pour un meilleur recadrage entre différents appareils et tailles d’écran.

Sous le capot

En interne, l’application va :

• Créer un nouveau type de contenu avec trois champs : un titre, une image et un champ de point focal.

• Configurer l’apparence et les fonctionnalités de l’éditeur d’entrées pour ce type de contenu.

Utilisation

Étape 1 : Installer

Remplissez le champ Nom du type de contenu (ou utilisez la valeur par défaut « Image avec point focal ») et cliquez sur Installer.

Cela créera un nouveau type de contenu avec trois champs :

• Un champ de titre de type « Texte court ».

• Un champ d’image de type « Média ».

• Un champ de point focal de type « Objet JSON ».

Étape 2 : créez une nouvelle image avec une entrée de point focal et définissez les données du point focal

Pour créer votre première image avec des données de point focal :

1. Accédez à l’onglet Contenu.

2. Créez une nouvelle entrée de type « Image avec point focal » (ou le nom que vous avez choisi lors de l’installation).

3. Remplissez le titre, l’image et les données du point focal.

4. Cliquez sur Publier dans la barre latérale pour publier la nouvelle image avec l’entrée du point focal.

Étape 3 : configurez votre type de contenu qui a besoin d’une référence à l’image avec point focal

Pour utiliser l’image nouvellement créée avec l’entrée du point focal :

1. Accédez à l’onglet Modèle de contenu.

2. Modifiez le type de contenu qui doit référencer l’image avec le point focal.

3. Créez un nouveau champ de type « Référence » et ouvrez sa configuration.

4. Définissez une option de validation pour accepter les entrées de type « Image avec point focal ».

5. Facultatif : définissez le widget du nouveau champ de référence sur Carte d’entrée pour avoir un aperçu de l’image avec point focal auquel elle est liée.

6. Revenez à l’onglet  Contenu.

7. Créez/modifiez une entrée du type de contenu référençant l’image avec point focal.

8. Définissez le champ de référence que vous avez ajouté pour pointer vers l’image avec l’entrée du point focal.

FAQ

Comment puis-je utiliser les données de point focal que j’ai définies pour recadrer l’image ?

Pour recadrer l’image en fonction des coordonnées que vous avez définies, vous pouvez utiliser l’une des approches suivantes :

• Récupérez l’image entière et recadrez-la dans le front-end en fonction des coordonnées.

• Implémentez une fonction Lambda pour effectuer le recadrage.