Aller au contenu principal

Modèles d'aperçu

Les modèles d'aperçu permettent de configurer les paramètres des images utilisées dans les attributs. En appliquant un modèle à un attribut de type "Image" ou "Groupe d'images", vous obtiendrez des images conformes à la norme spécifiée dans le modèle d'aperçu. Cela est pratique si le design de votre projet est sensible à la taille des images. En configurant le modèle d'aperçu, vous pouvez modifier les paramètres des images que verra l'utilisateur final.

Pour commencer à travailler avec les modèles d'aperçu, ouvrez la section "Paramètres" et ensuite allez dans la sous-section "Modèles d'aperçu". Dans cette section, vous trouverez une liste des modèles déjà créés, ainsi qu'un formulaire pour en créer de nouveaux.

Création​

Dans le formulaire de création, indiquez :

  • Nom - Chaîne non unique.
  • Marque - Chaîne unique.

Après avoir rempli ces informations, cliquez sur le bouton "Créer".

Configuration​

Sélectionnez dans la liste générale des modèles d'aperçu celui que vous souhaitez configurer et cliquez sur l'icône de l'engrenage Optimize images pour passer en mode d'édition. Pour créer des paramètres d'aperçu, cliquez sur le bouton "Ajouter". Vous pouvez configurer le format pour les images verticales, horizontales et carrées.

Dans les formulaires correspondants, remplissez :

  • Largeur et Hauteur (Côté du carré) - Dimensions en pixels dans lesquelles l'image sera intégrée.
  • Type de centrage - La ligne qui deviendra l'axe central lors de la compression de l'image.

Modèle par défaut​

Après avoir créé plusieurs ensembles dans un même modèle, vous pouvez changer le modèle par défaut. Il est utilisé pour afficher l'aperçu dans le CMS.

Suppression​

Sélectionnez dans la liste générale des modèles d'aperçu celui que vous souhaitez supprimer et cliquez sur l'icône de suppression Edit pour passer en mode d'édition. Confirmez l'action dans la boîte de dialogue.

LQTP​

Chaque modèle d'aperçu représente un tableau de deux éléments :

  • Miniature (base64 WebP)

Format : WebP (optimisé pour un chargement rapide).
Taille : pas plus de quelques centaines d'octets.
S'intègre directement dans l'objet sous forme de base64-URI, ce qui accélère l'affichage pendant que l'image complète se charge encore.

  • Aperçu généré
    L'image principale de l'aperçu, qui remplace la miniature après le chargement complet.

Avantages :

  • Affichage instantané de la miniature (sans requêtes HTTP supplémentaires).
  • Transition fluide vers l'aperçu complet après le chargement.
  • Économie de trafic grâce à l'utilisation de WebP compressé.

Exemple de structure :

{
  "preview_template": [
    "data:image/webp;base64,UklGRl...", // Miniature (base64 WebP)  
    "https://example.com/full-preview.jpg" // Aperçu complet  
  ]
}

Cette approche améliore l'expérience utilisateur, en particulier avec une connexion Internet lente.

Pour en savoir plus sur LQTP, vous pouvez consulter ici. Vous pouvez également regarder la vidéo.