WooCommerce پروڈکٹ امیج سائز: تینوں سائزز اور انہیں اصل میں بدلنے کا طریقہ

WooCommerce ہر اپ لوڈ کی گئی پروڈکٹ تصویر کے تین امیج سائز بناتا ہے، اور ان میں سے صرف دو WordPress ایڈمن میں بدلے جا سکتے ہیں۔ woocommerce_thumbnail کیٹلاگ گرڈ کی تصویر ہے، woocommerce_single پروڈکٹ صفحے کی بڑی تصویر ہے، اور woocommerce_gallery_thumbnail اس کے نیچے تھمب نیلز کی چھوٹی پٹی ہے۔ انہیں Appearance > Customize > WooCommerce > Product Images سے بدلا جاتا ہے — اور اگر وہاں کراپنگ کا ڈراپ ڈاؤن تو نظر آئے مگر چوڑائی کے خانے نہ ہوں، تو آپ کی تھیم نے چوڑائیاں جان بوجھ کر کوڈ میں مقفل کر رکھی ہیں۔

تینوں سائز

سائز کا نام	کہاں دکھائی دیتا ہے	کراپنگ	کسٹمائزر میں قابلِ تبدیلی
woocommerce_thumbnail	شاپ صفحہ، کیٹیگری گرڈ، متعلقہ پروڈکٹس، کراس سیلز	ڈیفالٹ میں مربع شکل میں سخت کراپ	چوڑائی اور تناسب
woocommerce_single	سنگل پروڈکٹ صفحے کی مرکزی تصویر	بغیر کراپ — اصل تناسب برقرار	صرف چوڑائی
woocommerce_gallery_thumbnail	مرکزی پروڈکٹ تصویر کے نیچے چھوٹی پٹی	سخت کراپ، مربع	نہیں

یہ معیاری WordPress سائزز کے اوپر ہوتے ہیں۔ ایک ہی پروڈکٹ تصویر عام طور پر thumbnail، medium، medium_large، large، WooCommerce کے تینوں سائز، اور ممکنہ طور پر وہ اضافی سائزز بھی بناتی ہے جو آپ کی تھیم نے add_image_size سے رجسٹر کیے ہوں۔ ایک اپ لوڈ پر یہ کافی زیادہ فائلیں ہیں، اور یہی وجہ ہے کہ 300 پروڈکٹس کا امپورٹ اتنی دیر لیتا ہے۔

گیلری تھمب نیل وہ ہے جو لوگوں کو حیران کرتا ہے: اس کا ایڈمن میں کوئی کنٹرول ہی نہیں۔ ڈیفالٹ انسٹال پر یہ ایک چھوٹا مربع ہوتا ہے، روایتی طور پر 100px، اور ریٹینا اسکرین پر سب سے زیادہ دھندلا یہی لگتا ہے کیونکہ اصل فائل واقعی بہت چھوٹی ہے۔

سیٹنگز اصل میں کہاں ہیں

Appearance > Customize > WooCommerce > Product Images آپ کو تین کنٹرول دیتا ہے:

• مرکزی تصویر کی چوڑائی — woocommerce_single کی چوڑائی۔ اونچائی خودکار ہے، اس لیے اصل تناسب برقرار رہتا ہے۔
• تھمب نیل کی چوڑائی — woocommerce_thumbnail کی چوڑائی۔
• تھمب نیل کراپنگ — 1:1 (مربع، ڈیفالٹ)، Custom (آپ 4:3 جیسا تناسب خود لکھتے ہیں)، یا Uncropped۔

غور کریں کہ کیا موجود نہیں: کیٹلاگ تھمب نیل کے لیے اونچائی کا کوئی خانہ نہیں، کیونکہ اونچائی کراپنگ کے تناسب سے نکالی جاتی ہے۔ اور گیلری تھمب نیل کے لیے تو کچھ بھی نہیں۔

کچھ بدلنے سے پہلے یہ دیکھ لینا مفید رہتا ہے کہ کوئی فائل اصل میں کون کون سی ثانوی فائلیں بنائے گی — ایک حقیقی پروڈکٹ تصویر WordPress امیج سائزز ٹول میں ڈالیں اور آپ کو پوری فہرست مل جائے گی، بشمول اس کے کہ آپ کا سورس ہر سائز کو بغیر کھینچے بھرنے کے لیے کافی بڑا ہے یا نہیں۔

آپ کی کیٹلاگ امیجز غلط کیوں لگتی ہیں

کیٹلاگ تھمب نیل مربع شکل میں سخت کراپ ہوتا ہے۔ سخت کراپ کا مطلب ہے کہ WooCommerce آپ کی تصویر کے وسط سے ایک مربع نکالتا ہے اور باقی پھینک دیتا ہے — نہ وہ لیٹر باکس کرتا ہے، نہ دباتا ہے۔ 2000x1200 کی پروڈکٹ تصویر وسط سے کاٹا گیا 1200x1200 کا ٹکڑا بن جاتی ہے، جسے پھر چھوٹا کر دیا جاتا ہے۔

ٹھیک بیچ میں رکھی اور گرد حاشیے والی بوتل کی تصویر کے لیے یہ بالکل مناسب ہے۔ لیکن ان کے لیے تباہی ہے:

• لمبی پروڈکٹس (اسکی، تاریں، پردے کی راڈیں) — آپ کو صرف بیچ کا تہائی حصہ دکھتا ہے، اور کچھ نہیں
• مرکز سے ہٹی ہوئی ترتیب — پروڈکٹ فریم کے کنارے کی طرف چلی جاتی ہے اور کٹ جاتی ہے
• ایسی تصاویر جہاں چیز فریم کو کنارے تک بھرتی ہے — اوپر اور نیچے کا حصہ کٹ جاتا ہے
• لائف اسٹائل تصاویر جن میں پروڈکٹ کسی کونے میں ہو

عام مشورہ یہ دیا جاتا ہے کہ “کراپنگ کو Uncropped کر دیں۔” یہ چلتا ہے، مگر اس کی قیمت کے بارے میں کھرے رہیں: بغیر کراپ کا مطلب ہے کہ ہر تھمب نیل اپنا تناسب رکھے گا، تو مختلف رخ والی تصاویر کا گرڈ دیکھنے میں بےترتیب ہو جاتا ہے، اور قطاریں سیدھ میں نہیں رہتیں جب تک آپ کی تھیم کی CSS مختلف اونچائیوں کو سنبھالنے کے قابل نہ ہو۔ زیادہ تر تھیمز مربع فرض کرتی ہیں۔

بہتر حل، اگر آپ اس کی گنجائش رکھتے ہیں، سورس پر ہے: مربع پروڈکٹ تصاویر کو معیار بنائیں جن میں چیز بیچ میں ہو اور حاشیہ یکساں ہو۔ پھر مربع سخت کراپ کا کوئی اثر ہی نہیں پڑتا اور آگے سب کچھ قابلِ پیشگوئی رہتا ہے۔ کراپ سیٹنگ بدلنا عارضی حل ہے؛ یکساں سورس امیجز اصل حل ہیں۔

جب تھیم چوڑائیاں مقفل کر دے

اگر آپ کا Product Images پینل صرف کراپنگ دکھاتا ہے، تو آپ کی تھیم نے WooCommerce سپورٹ رجسٹر کرتے وقت مقررہ چوڑائیاں دی تھیں:

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

جب تھیم یہ ویلیوز دیتی ہے تو WooCommerce چوڑائی کے کنٹرولز کسٹمائزر سے ہٹا دیتا ہے اور صرف تناسب چھوڑتا ہے۔ یہ نہ کوئی بگ ہے نہ تھیم کی زیادتی — تھیم کا پروڈکٹ لے آؤٹ CSS انہی مخصوص پکسل چوڑائیوں کے گرد بنا ہے، اور آپ کو انہیں بدلنے دینے سے گرڈ ٹوٹ جائے گا۔

آپ چائلڈ تھیم کی 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 کے لیے بھی چلتا ہے۔ گیلری تھمب نیل بدلنے کا واحد راستہ بھی یہی ہے، کیونکہ اس کا کوئی UI نہیں۔

اصل قیمت، صاف لفظوں میں: مقفل چوڑائی بدلنے کا مطلب ہے کہ WooCommerce جو فائل بناتا ہے وہ تھیم کی CSS کی توقع سے میل نہیں کھاتی۔ عام طور پر تصویر براؤزر میں سکڑ کر ٹھیک لگ جاتی ہے کیونکہ وہ اب باکس سے بڑی ہے۔ کبھی کبھی تھیم میں مقررہ اونچائی والا کنٹینر ہوتا ہے اور آپ کو لیٹر باکسنگ یا اوور فلو ملتا ہے۔ 2,000 تصاویر دوبارہ بنانے سے پہلے ایک پروڈکٹ پر آزما لیں۔

سائز بدلنے کا مطلب دوبارہ بنانا ہے

ہر سائز سیٹنگ کا اثر صرف نئے اپ لوڈز پر ہوتا ہے۔ موجودہ پروڈکٹس وہی فائلیں پیش کرتے رہتے ہیں جو ان کے اپ لوڈ کے وقت بنی تھیں، اس لیے جب تک آپ انہیں دوبارہ نہ بنائیں، نظر آنے والی کوئی تبدیلی نہیں ہوتی۔

کسٹمائزر سیو کرنے پر WooCommerce پس منظر میں دوبارہ بنانے کا کام شروع کر دیتا ہے۔ چھوٹے کیٹلاگ پر یہ کافی ہے۔ بڑے پر یہ اس بات پر منحصر ہے کہ 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 کی کوئی فائل نہیں بنے گی؛ براؤزر کو 800px کی فائل ملے گی جسے وہ کھینچ دے گا، اور srcset کے پاس پیش کرنے کو اس سے بہتر کچھ نہیں ہو گا۔

اصل میں اپ لوڈ کیا کرنا چاہیے

مربع سورس امیجز کا ہدف رکھیں جو آپ کی سب سے بڑی طے شدہ چوڑائی سے تقریباً دگنی ہوں — 600px کی مرکزی تصویر کے لیے 1200x1200، اور اگر آپ کی تھیم 800px استعمال کرتی ہے تو 1600x1600۔ یہ 2x ریٹینا اسکرینز کو پورا کرتا ہے اور WordPress کو اتنے پکسل دیتا ہے کہ وہ ہر ثانوی سائز بغیر کھینچے بنا لے۔ ہر پروڈکٹ کی پیمائش ایک جیسی رکھیں تاکہ گرڈ ہموار رہے۔

پھر بھی مسئلہ حل نہیں ہوا؟

اگر سائزز درست طے ہیں، آپ دوبارہ بنا چکے ہیں، اور پھر بھی کوئی پروڈکٹ غلط لگ رہا ہے، تو تصویر نئے ٹیب میں کھولیں اور فائل کا نام پڑھیں۔ پیمائش والا ایسا سابقہ جو آپ کے طے کردہ کسی سائز سے میل نہیں کھاتا، اس کا مطلب ہے کہ اسے کسی اور چیز نے رجسٹر کیا ہے۔ اگر کوئی سابقہ ہی نہ ہو تو WooCommerce پوری سائز والی فائل پر واپس چلا گیا ہے، جس کا تقریباً ہمیشہ مطلب یہی ہوتا ہے کہ آپ کا سورس اُس سائز کے لیے بہت چھوٹا تھا جو آپ نے مانگا۔ اس سورس فائل کو امیج سائزز ٹول سے گزاریں اور موازنہ کریں کہ WordPress کو کیا بنانا چاہیے اور براؤزر نے اصل میں کیا لوڈ کیا — جب یہ دونوں مختلف ہوں، تو ان کے بیچ میں عموماً کوئی آپٹیمائزر پلگ اِن یا CDN امیج ری سائزر بیٹھا ہوتا ہے۔