Μέγεθος εικόνων προϊόντος στο WooCommerce: τα τρία μεγέθη και πώς να τα αλλάξεις στ' αλήθεια

Το WooCommerce παράγει τρία μεγέθη εικόνας για κάθε φωτογραφία προϊόντος που ανεβάζεις, και μόνο τα δύο από αυτά είναι επεξεργάσιμα μέσα από τον πίνακα διαχείρισης του WordPress. Το woocommerce_thumbnail είναι η εικόνα στο πλέγμα του καταλόγου, το woocommerce_single είναι η μεγάλη εικόνα στη σελίδα προϊόντος, και το woocommerce_gallery_thumbnail είναι η μικρή λωρίδα μικρογραφιών από κάτω. Τα αλλάζεις από Εμφάνιση > Προσαρμογή > WooCommerce > Εικόνες προϊόντων — και αν αυτό το πάνελ σου δείχνει μια λίστα περικοπής αλλά κανένα πεδίο πλάτους, το θέμα σου έχει κλειδώσει τα πλάτη μέσα στον κώδικα επίτηδες.

Τα τρία μεγέθη

Όνομα μεγέθους	Πού εμφανίζεται	Περικοπή	Επεξεργάσιμο στον customizer
woocommerce_thumbnail	Σελίδα καταστήματος, πλέγματα κατηγοριών, σχετικά προϊόντα, cross-sells	Σκληρή περικοπή σε τετράγωνο εξ ορισμού	Πλάτος και αναλογία
woocommerce_single	Κύρια εικόνα στη μονή σελίδα προϊόντος	Χωρίς περικοπή — διατηρείται η αρχική αναλογία	Μόνο πλάτος
woocommerce_gallery_thumbnail	Μικρή λωρίδα κάτω από την κύρια εικόνα προϊόντος	Σκληρή περικοπή σε τετράγωνο	Όχι

Αυτά κάθονται πάνω από τα τυπικά μεγέθη του WordPress. Μία μόνο φωτογραφία προϊόντος θα παραγάγει συνήθως thumbnail, medium, medium_large, large, τα τρία μεγέθη του WooCommerce, και πιθανώς επιπλέον μεγέθη που καταχωρεί το θέμα σου μέσω add_image_size. Αυτά είναι πολλά αρχεία ανά μεταφόρτωση, και γι’ αυτό μια εισαγωγή 300 προϊόντων αργεί τόσο.

Η μικρογραφία της γκαλερί είναι αυτή που εκπλήσσει τον κόσμο: δεν έχει κανένα χειριστήριο στη διαχείριση. Σε μια προεπιλεγμένη εγκατάσταση είναι ένα μικρό τετράγωνο, ιστορικά 100px, και είναι το μέγεθος που έχει τις περισσότερες πιθανότητες να φαίνεται θολό σε οθόνη retina, επειδή το φυσικό αρχείο είναι πραγματικά μικροσκοπικό.

Πού βρίσκονται στ’ αλήθεια οι ρυθμίσεις

Το Εμφάνιση > Προσαρμογή > WooCommerce > Εικόνες προϊόντων σου δίνει τρία χειριστήρια:

• Πλάτος κύριας εικόνας — το πλάτος του woocommerce_single. Το ύψος είναι αυτόματο, οπότε διατηρείται η αρχική αναλογία.
• Πλάτος μικρογραφίας — το πλάτος του woocommerce_thumbnail.
• Περικοπή μικρογραφίας — 1:1 (τετράγωνο, η προεπιλογή), Custom (γράφεις μια αναλογία όπως 4:3), ή Uncropped.

Πρόσεξε τι λείπει: δεν υπάρχει πεδίο ύψους για τη μικρογραφία του καταλόγου, επειδή το ύψος προκύπτει από την αναλογία περικοπής. Και δεν υπάρχει απολύτως τίποτα για τη μικρογραφία της γκαλερί.

Πριν αλλάξεις οτιδήποτε, βοηθά να δεις ακριβώς ποια παράγωγα θα βγάλει ένα δεδομένο αρχείο — ρίξε μια πραγματική φωτογραφία προϊόντος στο εργαλείο μεγεθών εικόνας WordPress και παίρνεις την πλήρη λίστα, μαζί με το αν η πηγή σου είναι αρκετά μεγάλη για να γεμίσει κάθε μέγεθος χωρίς μεγέθυνση.

Γιατί οι εικόνες του καταλόγου σου φαίνονται λάθος

Η μικρογραφία του καταλόγου περικόπτεται σκληρά σε τετράγωνο. Σκληρή περικοπή σημαίνει ότι το WooCommerce παίρνει ένα κεντρικό τετράγωνο από τη φωτογραφία σου και πετά τα υπόλοιπα — δεν βάζει μαύρες μπάρες, και δεν τη ζουλάει. Μια λήψη προϊόντος 2000x1200 γίνεται μια φέτα 1200x1200 παρμένη από τη μέση, και μετά σμικρύνεται.

Αυτό είναι μια χαρά για ένα μπουκάλι φωτογραφημένο ακριβώς στο κέντρο με περιθώριο γύρω του. Είναι καταστροφή για:

• Μακρόστενα προϊόντα (σκι, καλώδια, κουρτινόξυλα) — βλέπεις το μεσαίο τρίτο και τίποτε άλλο
• Μη κεντραρισμένες συνθέσεις — το προϊόν παρασύρεται στην άκρη του κάδρου και κόβεται
• Φωτογραφίες όπου το αντικείμενο γεμίζει το κάδρο από άκρη σε άκρη — κόβονται πάνω και κάτω
• Lifestyle λήψεις με το προϊόν σε μια γωνία

Η συνηθισμένη συμβουλή είναι «άλλαξε την περικοπή σε Uncropped». Αυτό δουλεύει, αλλά ας είμαστε ειλικρινείς για το κόστος: χωρίς περικοπή σημαίνει ότι κάθε μικρογραφία κρατά τη δική της αναλογία, οπότε ένα πλέγμα με φωτογραφίες μεικτού προσανατολισμού γίνεται οπτικά ακατάστατο, και οι σειρές παύουν να ευθυγραμμίζονται εκτός αν το CSS του θέματός σου χειρίζεται μεταβλητά ύψη. Τα περισσότερα θέματα υποθέτουν τετράγωνα.

Η καλύτερη λύση, αν σου βγαίνει, είναι στην πηγή: τυποποίησε τετράγωνες φωτογραφίες προϊόντων με το αντικείμενο κεντραρισμένο και ομοιόμορφο περιθώριο. Τότε μια τετράγωνη σκληρή περικοπή δεν κάνει τίποτα και όλα τα επόμενα γίνονται προβλέψιμα. Η αλλαγή της ρύθμισης περικοπής είναι το μπάλωμα· οι συνεπείς εικόνες πηγής είναι η πραγματική λύση.

Όταν το θέμα κλειδώνει τα πλάτη

Αν το πάνελ Εικόνες προϊόντων σου προσφέρει μόνο περικοπή, το θέμα σου δήλωσε σταθερά πλάτη όταν καταχώρησε υποστήριξη WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Όταν ένα θέμα περνά αυτές τις τιμές, το WooCommerce αφαιρεί τα χειριστήρια πλάτους από τον customizer και αφήνει μόνο την αναλογία. Αυτό δεν είναι σφάλμα ούτε εχθρότητα από το θέμα — το CSS διάταξης προϊόντος του θέματος είναι χτισμένο γύρω από αυτά ακριβώς τα πλάτη σε pixel, και το να σε αφήσει να τα αλλάξεις θα χαλούσε το πλέγμα.

Μπορείς να τα παρακάμψεις από το functions.php ενός θυγατρικού θέματος με το φίλτρο ανά μέγεθος:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Το ίδιο μοτίβο δουλεύει και για το woocommerce_get_image_size_thumbnail. Αυτός είναι επίσης ο μόνος τρόπος να αλλάξεις τη μικρογραφία της γκαλερί, αφού δεν έχει καθόλου διεπαφή.

Το πραγματικό κόστος, ειπωμένο καθαρά: η παράκαμψη ενός κλειδωμένου πλάτους σημαίνει ότι το αρχείο που παράγει το WooCommerce δεν ταιριάζει πια με ό,τι περιμένει το CSS του θέματος. Συνήθως η εικόνα απλώς κλιμακώνεται στον browser και φαίνεται μια χαρά, επειδή είναι πλέον μεγαλύτερη από το πλαίσιο. Μερικές φορές το θέμα έχει container σταθερού ύψους και παίρνεις μαύρες μπάρες ή υπερχείλιση. Δοκίμασέ το σε ένα προϊόν πριν αναδημιουργήσεις 2.000.

Η αλλαγή μεγεθών σημαίνει αναδημιουργία

Κάθε ρύθμιση μεγέθους επηρεάζει μόνο τις νέες μεταφορτώσεις. Τα υπάρχοντα προϊόντα συνεχίζουν να σερβίρουν τα αρχεία που παράχθηκαν όταν ανέβηκαν, οπότε τίποτα ορατό δεν αλλάζει μέχρι να τα ξαναχτίσεις.

Το WooCommerce ξεκινά μια αναδημιουργία στο παρασκήνιο όταν αποθηκεύεις τον customizer. Σε μικρό κατάλογο αυτό αρκεί. Σε μεγάλο εξαρτάται από το αν το WP-Cron πυροδοτείται αξιόπιστα, πράγμα που σε ένα κατάστημα με χαμηλή επισκεψιμότητα συχνά δεν γίνεται, και καταλήγεις με μισοαναδημιουργημένη βιβλιοθήκη. Τρέξ’ το μόνος σου αντ’ αυτού:

wp media regenerate --yes

Για να ξαναχτίσεις μόνο τις εικόνες προϊόντων:

wp media regenerate --yes --post_type=product

Αν θέλεις να βγάλεις από τη μέση την εργασία παρασκηνίου όσο το κάνεις χειροκίνητα:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Δύο πράγματα που η αναδημιουργία δεν κάνει. Δεν διαγράφει τα παλιά αρχεία — ο φάκελος uploads σου κρατά κάθε ορφανό παράγωγο από τις προηγούμενες ρυθμίσεις, και θα μεγαλώνει. Και δεν μπορεί να δημιουργήσει μέγεθος μεγαλύτερο από την πηγή σου, επειδή το WordPress δεν μεγεθύνει. Αν ορίσεις το πλάτος κύριας εικόνας στα 1200 αλλά οι φωτογραφίες προϊόντων σου έχουν πλάτος 800px, δεν δημιουργείται κανένα αρχείο 1200px· ο browser παίρνει ένα αρχείο 800px και το τεντώνει, και το srcset δεν έχει τίποτα καλύτερο να προσφέρει.

Το μέγεθος που πρέπει να ανεβάζεις

Στόχευσε σε τετράγωνες εικόνες πηγής σε περίπου διπλάσιο από το μεγαλύτερο ρυθμισμένο σου πλάτος — 1200x1200 για κύρια εικόνα 600px, 1600x1600 αν το θέμα σου χρησιμοποιεί 800px. Αυτό καλύπτει τις οθόνες retina διπλής πυκνότητας και δίνει στο WordPress αρκετά pixel για να χτίσει κάθε παράγωγο χωρίς μεγέθυνση. Κράτα κάθε προϊόν στις ίδιες διαστάσεις ώστε το πλέγμα να μένει ομοιόμορφο.

Ακόμη κολλημένος;

Αν τα μεγέθη είναι σωστά ρυθμισμένα, έχεις κάνει αναδημιουργία, και ένα προϊόν εξακολουθεί να φαίνεται λάθος, άνοιξε την εικόνα σε νέα καρτέλα και διάβασε το όνομα αρχείου. Μια κατάληξη με διαστάσεις που δεν ταιριάζει με κανένα μέγεθος που ρύθμισες σημαίνει ότι κάτι άλλο την καταχώρησε. Καθόλου κατάληξη σημαίνει ότι το WooCommerce γύρισε στο αρχείο πλήρους μεγέθους, που σχεδόν πάντα σημαίνει ότι η πηγή ήταν πολύ μικρή για το μέγεθος που ζήτησες. Πέρασε αυτό το αρχείο πηγής από το εργαλείο μεγεθών εικόνας και σύγκρινε τι θα έπρεπε να παράγει το WordPress με το τι φόρτωσε πραγματικά ο browser — όταν αυτά τα δύο διαφωνούν, συνήθως κάθεται ανάμεσα ένα πρόσθετο βελτιστοποίησης ή ένας resizer εικόνων CDN.