Catégorie : Produits · Plan min. : Gratuit · Slug : image-cadre
Ajoute un outil de recadrage visuel lors du téléchargement des images produit. Affiche le cadre exact du storefront pour un ajustement parfait.
Fonctionnalités
Outil de recadrage visuel au téléchargement des images produit
Cadre fixe 1:1 — le véritable cadre de la carte produit du storefront
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
Les cartes produit du storefront sont carrées sur tous les thèmes DZBuild. Si vous uploadez une photo 4:3, la vitrine la recadre au centre en carré 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.
Comment l'activer
Ouvrez Tableau de bord → Add-ons sur
/dashboard/addons.Repérez Cadrage et recadrage d'images dans Produits.
Cliquez Activer (Plan Gratuit).
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 — celui que la vitrine utilise réellement
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 — réduction de poids importante sans perte visible. Montez à 95-100 uniquement pour les hero/cover des produits premium.
Le cadre de recadrage est un carré 1:1 fixe. Tous les thèmes DZBuild affichent les cartes produit en carré : un recadrage reste donc correct si vous changez de thème.
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.