WooCommerce प्रोडक्ट इमेज साइज़: तीनों साइज़ और उन्हें असल में कैसे बदलें

आपकी अपलोड की हर प्रोडक्ट फ़ोटो के लिए WooCommerce तीन इमेज साइज़ बनाता है, और WordPress एडमिन में उनमें से सिर्फ़ दो बदले जा सकते हैं। woocommerce_thumbnail catalog ग्रिड की इमेज है, woocommerce_single प्रोडक्ट पेज की बड़ी इमेज है, और woocommerce_gallery_thumbnail उसके नीचे बनी छोटी thumbnails की पट्टी है। इन्हें Appearance > Customize > WooCommerce > Product Images से बदला जाता है — और अगर वह पैनल cropping का ड्रॉपडाउन तो दिखाता है पर चौड़ाई के बॉक्स नहीं, तो आपकी थीम ने चौड़ाइयाँ जानबूझकर कोड में तय कर रखी हैं।

तीनों साइज़

साइज़ का नाम	कहाँ दिखता है	Cropping	customizer में बदला जा सकता है
woocommerce_thumbnail	Shop पेज, कैटेगरी ग्रिड, related products, cross-sells	डिफ़ॉल्ट रूप से वर्ग में hard-crop	चौड़ाई और अनुपात
woocommerce_single	सिंगल प्रोडक्ट पेज की मुख्य इमेज	Uncropped — मूल aspect ratio बना रहता है	सिर्फ़ चौड़ाई
woocommerce_gallery_thumbnail	मुख्य प्रोडक्ट इमेज के नीचे की छोटी पट्टी	वर्ग में hard-crop	नहीं

ये मानक WordPress साइज़ के ऊपर बनते हैं। एक अकेली प्रोडक्ट फ़ोटो आम तौर पर thumbnail, medium, medium_large, large, ये तीन WooCommerce साइज़, और संभवतः आपकी थीम द्वारा add_image_size से रजिस्टर किए गए कुछ अतिरिक्त साइज़ बनाती है। हर अपलोड पर यह बहुत सारी फ़ाइलें हैं, और यही वजह है कि 300 प्रोडक्ट का import इतना समय लेता है।

gallery thumbnail वही है जो लोगों को चौंकाता है: इस पर एडमिन का कोई नियंत्रण है ही नहीं। डिफ़ॉल्ट इंस्टॉल पर यह एक छोटा वर्ग होता है, पारंपरिक रूप से 100px, और retina स्क्रीन पर सॉफ़्ट दिखने की सबसे ज़्यादा संभावना इसी की रहती है क्योंकि फ़ाइल सचमुच बहुत छोटी होती है।

सेटिंग्स असल में कहाँ रहती हैं

Appearance > Customize > WooCommerce > Product Images आपको तीन कंट्रोल देता है:

• Main image width — woocommerce_single की चौड़ाई। ऊँचाई अपने आप तय होती है, इसलिए मूल aspect ratio बना रहता है।
• Thumbnail width — woocommerce_thumbnail की चौड़ाई।
• Thumbnail cropping — 1:1 (वर्ग, डिफ़ॉल्ट), Custom (आप 4:3 जैसा अनुपात लिखते हैं), या Uncropped।

ध्यान दीजिए कि क्या नहीं है: catalog thumbnail के लिए ऊँचाई का कोई फ़ील्ड नहीं है, क्योंकि ऊँचाई cropping अनुपात से निकलती है। और gallery thumbnail के लिए तो कुछ भी नहीं है।

कुछ भी बदलने से पहले यह देख लेना काम आता है कि कोई फ़ाइल असल में कौन-कौन सी derivatives बनाएगी — असली प्रोडक्ट फ़ोटो WordPress image sizes tool में डालिए और आपको पूरी सूची मिल जाएगी, साथ ही यह भी कि आपका सोर्स हर साइज़ को बिना upscale किए भरने लायक बड़ा है या नहीं।

आपकी catalog इमेज गलत क्यों दिखती हैं

catalog thumbnail वर्ग में hard-crop करता है। hard crop का मतलब है कि WooCommerce आपकी फ़ोटो के बीच से एक वर्ग निकालता है और बाकी फेंक देता है — वह न letterbox करता है, न दबाकर फिट करता है। 2000x1200 की प्रोडक्ट फ़ोटो बीच से निकाला हुआ 1200x1200 का टुकड़ा बन जाती है, जिसे फिर छोटा किया जाता है।

बीचोंबीच खींची गई और चारों ओर जगह छोड़ती बोतल की फ़ोटो के लिए यह ठीक है। पर इनके लिए यह आफ़त है:

• लंबे प्रोडक्ट (स्की, केबल, पर्दे की छड़ें) — आपको बस बीच का एक तिहाई दिखता है और कुछ नहीं
• बीच से हटी हुई रचना — प्रोडक्ट फ़्रेम के किनारे खिसक जाता है और कट जाता है
• ऐसी फ़ोटो जिनमें चीज़ किनारे से किनारे तक भरी हो — ऊपर और नीचे कट जाते हैं
• lifestyle फ़ोटो जिनमें प्रोडक्ट किसी कोने में हो

आम सलाह होती है “cropping को Uncropped कर दीजिए।” यह काम करता है, पर इसकी कीमत के बारे में ईमानदार रहिए: uncropped का मतलब है हर thumbnail अपना aspect ratio रखेगा, इसलिए अलग-अलग orientation वाली फ़ोटो का ग्रिड देखने में ऊबड़-खाबड़ हो जाता है, और जब तक आपकी थीम का CSS बदलती ऊँचाइयाँ न संभालता हो, पंक्तियाँ एक सीध में नहीं रहतीं। ज़्यादातर थीम वर्ग मानकर चलती हैं।

बेहतर उपाय, अगर आप कर सकें, तो सोर्स पर ही है: वर्गाकार प्रोडक्ट फ़ोटो का मानक तय कीजिए जिसमें चीज़ बीच में हो और चारों ओर बराबर जगह हो। तब वर्ग hard crop कुछ बिगाड़ता ही नहीं और आगे सब कुछ अनुमान लायक रहता है। crop सेटिंग बदलना जुगाड़ है; एकरूप सोर्स इमेज असली हल हैं।

जब थीम चौड़ाइयाँ लॉक कर देती है

अगर आपका Product Images पैनल सिर्फ़ cropping देता है, तो आपकी थीम ने WooCommerce सपोर्ट रजिस्टर करते समय तय चौड़ाइयाँ घोषित की थीं:

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

जब थीम ये मान पास करती है, तो WooCommerce customizer से चौड़ाई वाले कंट्रोल हटा देता है और सिर्फ़ अनुपात छोड़ता है। यह न बग है, न थीम की मनमानी — थीम का प्रोडक्ट लेआउट CSS ठीक उन्हीं पिक्सल चौड़ाइयों के हिसाब से बना है, और आपको उन्हें बदलने देना ग्रिड तोड़ देगा।

आप इन्हें child theme के functions.php से, हर साइज़ के अलग फ़िल्टर के ज़रिए override कर सकते हैं:

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 पर भी चलता है। gallery thumbnail बदलने का तो यही अकेला रास्ता है, क्योंकि उसका कोई UI है ही नहीं।

असली कीमत, साफ़ शब्दों में: लॉक की गई चौड़ाई override करने का मतलब है कि WooCommerce जो फ़ाइल बनाएगा वह थीम के CSS की उम्मीद से मेल नहीं खाएगी। आम तौर पर इमेज ब्राउज़र में ही स्केल हो जाती है और ठीक लगती है, क्योंकि अब वह बॉक्स से बड़ी है। कभी-कभी थीम में तय ऊँचाई वाला कंटेनर होता है और आपको letterboxing या overflow मिलता है। 2,000 इमेज दोबारा बनाने से पहले एक प्रोडक्ट पर टेस्ट कीजिए।

साइज़ बदलने का मतलब है दोबारा बनाना

हर साइज़ सेटिंग का असर सिर्फ़ नए अपलोड पर होता है। मौजूदा प्रोडक्ट वही फ़ाइलें परोसते रहते हैं जो उनके अपलोड के समय बनी थीं, इसलिए जब तक आप उन्हें दोबारा नहीं बनवाते, दिखने में कुछ नहीं बदलता।

customizer सेव करते ही WooCommerce बैकग्राउंड में regeneration शुरू कर देता है। छोटे catalog पर इतना काफ़ी है। बड़े पर यह WP-Cron के भरोसे चलने पर निर्भर है, जो कम ट्रैफ़िक वाले स्टोर पर अक्सर ठीक से नहीं चलता, और आपकी लाइब्रेरी आधी-अधूरी बनी रह जाती है। इसके बजाय इसे खुद चलाइए:

wp media regenerate --yes

सिर्फ़ प्रोडक्ट इमेज दोबारा बनाने के लिए:

wp media regenerate --yes --post_type=product

अगर आप मैन्युअल काम के दौरान बैकग्राउंड जॉब को रास्ते से हटाना चाहते हैं:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

दो काम regeneration नहीं करेगा। यह पुरानी फ़ाइलें डिलीट नहीं करता — आपकी uploads डायरेक्टरी में पिछली सेटिंग्स की हर अनाथ derivative पड़ी रहती है, और वह बढ़ती जाएगी। और यह आपके सोर्स से बड़ा साइज़ नहीं बना सकता, क्योंकि WordPress upscale नहीं करता। अगर आपने मुख्य इमेज की चौड़ाई 1200 रखी है पर आपकी प्रोडक्ट फ़ोटो 800px चौड़ी हैं, तो 1200px की कोई फ़ाइल बनेगी ही नहीं; ब्राउज़र को 800px की फ़ाइल मिलेगी और वह उसे खींच देगा, और srcset के पास देने को इससे बेहतर कुछ नहीं होगा।

असल में अपलोड करने लायक साइज़

वर्गाकार सोर्स इमेज का लक्ष्य रखिए, अपनी सबसे बड़ी तय चौड़ाई से करीब दोगुनी — 600px मुख्य इमेज के लिए 1200x1200, और अगर आपकी थीम 800px इस्तेमाल करती है तो 1600x1600। इससे 2x retina डिस्प्ले कवर हो जाते हैं और WordPress के पास हर derivative बिना upscale किए बनाने लायक पिक्सल रहते हैं। हर प्रोडक्ट को एक ही आकार पर रखिए ताकि ग्रिड समान बना रहे।

फिर भी अटके हुए हैं?

अगर साइज़ ठीक से कॉन्फ़िगर हैं, आप regeneration भी कर चुके हैं, और फिर भी कोई प्रोडक्ट गलत दिखता है, तो इमेज को नए टैब में खोलकर फ़ाइल का नाम पढ़िए। ऐसा dimension वाला suffix जो आपके कॉन्फ़िगर किए किसी साइज़ से मेल न खाए, यह बताता है कि उसे किसी और ने रजिस्टर किया है। कोई suffix ही न हो तो इसका मतलब है WooCommerce full-size फ़ाइल पर लौट गया, जो लगभग हमेशा यही कहता है कि आपका सोर्स उस साइज़ के लिए बहुत छोटा था जो आपने माँगा। उस सोर्स फ़ाइल को image sizes tool से गुज़ारिए और तुलना कीजिए कि WordPress को क्या बनाना चाहिए और ब्राउज़र ने असल में क्या लोड किया — जब ये मेल न खाएँ, तो बीच में आम तौर पर कोई optimizer प्लगइन या CDN image resizer बैठा होता है।