Aller au contenu principal

Cadrage et recadrage d'images

Catégorie : Produits  ·  Plan min. : Gratuit  ·  Slug : image-cadre

Ajoute un outil de recadrage visuel lors du téléchargement des images produit. Recadrez chaque photo en carré 1:1 dans votre navigateur, avant que quoi que ce soit ne parte vers DZBuild.

Fonctionnalités​

  • Outil de recadrage visuel au téléchargement des images produit
  • Cadre de recadrage carré 1:1 fixe
  • Glisser, zoomer et pivoter par pas de 90°
  • Le recadrage se fait dans le navigateur, avant l'upload
  • Boutons Passer / Tout passer pour les uploads rapides
  • Fonctionne en création et modification

Pourquoi l'utiliser​

La plupart des thèmes DZBuild affichent les cartes produit en carré. Si vous uploadez une photo 4:3, la vitrine la recadre au centre et coupe le haut et le bas, souvent exactement la partie que vous vouliez montrer.

Cet add-on vous laisse choisir quel carré avant même que le fichier ne soit uploadé : glissez, zoomez et pivotez jusqu'à un cadrage parfait. Plus de re-uploads parce que la miniature rend mal.

Trois thèmes font exception. Bloom, Prestige et Promobi dessinent des cartes produit un peu plus hautes que larges : le carré est alors agrandi pour remplir la carte et une fine bande disparaît à gauche et à droite. Laissez une petite marge autour du sujet et le même recadrage reste juste sur tous les thèmes.

Comment l'activer​

  1. Ouvrez Tableau de bord → Add-ons sur /dashboard/addons.
  2. Repérez Cadrage et recadrage d'images dans Produits.
  3. Cliquez Activer (Plan Gratuit).
  4. Le panneau de réglages expose :
    • Ouvrir le recadreur automatiquement (activé par défaut) — c'est l'interrupteur marche/arrêt de toute la fonctionnalité, pas seulement de son déclenchement. Désactivé, la modale de recadrage ne s'ouvre jamais et aucun moyen manuel ne permet de la lancer : les fichiers sont uploadés sans recadrage.
    • Qualité de sortie (75-100) — qualité de l'encodeur WebP/JPEG pour la sortie en 1500×1500 (par défaut 90).

Utilisation​

Une fois activé, chaque upload d'image produit sur /dashboard/products/create et /dashboard/products/{id}/edit ouvre une modale avec :

  • L'image que vous venez de sélectionner
  • Un cadre de recadrage carré 1:1 fixe, le même quel que soit le thème de votre boutique
  • Glisser pour repositionner
  • Pincer ou molette pour zoomer, ou les boutons Zoom avant / Zoom arrière
  • Pivoter — fait tourner l'image de 90° dans le sens antihoraire à chaque clic (quarts de tour fixes ; impossible de redresser une photo légèrement inclinée)
  • Réinitialiser — retour au cadrage d'origine
  • قص وتأكيد (Recadrer et confirmer) pour conserver la version recadrée
  • تخطي (Passer) pour utiliser l'image telle quelle
  • تخطي الكل (Tout passer) — n'apparaît que lorsqu'il reste plus d'une image en file d'attente
remarque

La boîte de dialogue du recadreur s'affiche actuellement en arabe uniquement, même lorsque votre tableau de bord est en français.

Le recadrage se fait entièrement dans votre navigateur, avant l'upload. Le canvas recadré remplace le fichier sélectionné dans la file d'upload : lorsque vous recadrez, seule la version recadrée est envoyée à DZBuild et rien n'est retraité côté serveur. Passer une image envoie l'original tel quel.

Format de sortie​

Les images recadrées sont toujours ré-encodées en 1500×1500 px, en WebP si votre navigateur le supporte et en JPEG sinon. L'extension du fichier uploadé change en conséquence (photo.png devient photo.webp). Qualité de sortie est le réglage de qualité de cet encodeur.

Ce que cela change dans le flux d'upload​

  • L'add-on prend le contrôle du sélecteur d'images de la page produit (la zone d'upload et le champ fichier).
  • Il applique toujours le nombre maximum d'images par produit de la page — une fois la limite atteinte, il affiche une alerte au lieu d'ajouter d'autres fichiers à la file.
  • Chaque fichier passe toujours la validation normale de la page ; les fichiers rejetés sont listés dans une alerte puis ignorés.
  • Si l'outil de recadrage ne parvient pas à se charger — connexion bloquée ou très faible, par exemple — l'add-on s'efface silencieusement : aucune modale n'apparaît et le sélecteur d'images normal continue de fonctionner.

Conseils​

  • Réglez Qualité de sortie à 90 par défaut : le poids du fichier baisse sans perte visible. Montez à 95-100 uniquement pour les hero/cover des produits premium.
  • Le cadre de recadrage est un carré 1:1 fixe et ne suit pas le thème, quoi qu'annonce la fiche de l'add-on sur la détection du ratio. Sur Bloom, Prestige et Promobi la carte est un peu plus haute qu'un carré : gardez le sujet à distance des bords gauche et droit.
  • Photo prise de travers ? Utilisez le bouton Pivoter — il vous évite un aller-retour par votre logiciel photo. Il ne fait toutefois que des rotations de 90/180/270°.
  • Se combine naturellement avec le type de variante image_text (petite image + libellé) — les miniatures de variantes héritent du cadrage.