من الأمور التي يجب أن تعرفها حول أبعاد الصور في WooCommerce هي أنّ CSS الافتراضي لـ WooCommerce والعديد من القوالب تحدّد أبعاد صور المنتجات لضمان اتساق التخطيط عبر الأجهزة المختلفة.

image-dimensions-woocommerce.png

تؤثر الأبعاد التي تحددها في صفحة إعدادات المنتجات في WooCommerce (راجع درس ضبط إعدادات المنتجات) على حجم الصور الذي يستخدمه القالب عند عرض صور المنتج. حيث لا تغيّر القوالب الحجم الذي تُعرض به الصور، وذلك يمكن أن يؤدي إلى تشويه الصورة وتمويهها عندما تكون إعداداتك غير كافية (أي صغيرة جدًا بالنسبة للحجم الذي يستخدمه القالب لعرض الصور).

ألقِ نظرة على المخطط أدناه لمزيد من التوضيح:

1-ugly-distortion.png

معالجة تشوه الصور
سنقوم بمعالجة مشكلة تشوّه افتراضية كوسيلة للتوضيح. قبل أن تبدأ، تأكد من أن تكون أحجام الصور التي ترفعها كبيرة كفاية. يمكنك استخدام حجم 800 × 800 فما فوق، فهو يصلح لأغلب القوالب.

أنواع الصور
تستخدم المصطلحات الثلاثة التالية لتصنيف الصور على WooCommerce:

Single Product Image: وهي صورة المنتج ذات الحجم الأكبر والتي تُعرض على صفحة تفاصيل المنتج.
Catalog Images: وهي الصور ذات الحجم المتوسط التي تُستخدم في قوائم المنتجات المختلفة. مثل الفئات categories، المنتجات ذات الصلة related products، منتجات الارتقاء بالصفقة up-sells، منتجات البيع المتقاطع cross-sells، إلخ.
Product Thumbnails: وهي الصور ذات الحجم الأصغر التي تستخدم في معارض المنتج مثل صفحة تفاصيل المنتج (تحت الصورة المميزة للمنتج) ، في السلة، وعلى الودجات.
يمكنك تحديد أبعاد هذه الصور بالذهاب إلى:

WooCommerce > Settings > Products > Display

2-WooCommerce-Product-Image-Sizes.png

تعرف على حجم عرض الصور على قالبك
يحدد القالب الذي اخترته الحجم الذي تُعرض به الصور عليه، لذلك يجب أن تعرف الأبعاد التي يستخدمها القالب لعرض الصور.

صورة الكتالوج Catalog Image
حدد المكان الذي يعرض فيه القالب صور الكتالوج بأكبر حجم. في أغلب الحالات يكون هذا المكان هو الصفحة الرئيسية للمتجر؛ لكن قد يختلف المكان في بعض القوالب. على سبيل المثال تُعرض صور الكتالوج بأكبر حجمها في منطقة قائمة المنتجات ذات الصلة related products في قالب Twenty Eleven.

ولتحديد الحجم الذي يستخدمه القالب لعرض صور الكتالوج، انقر بزر الفأرة الأيمن على الصورة واختر Inspect إذا كنت تستخدم متصفح Chrome. يمكنك القيام بذلك أيضًا على متصفح Firefox. ستجد أبعاد الصورة ضمن المعلومات التي ستظهر في قسم Element. قم بتسجيل الأبعاد لكي تستخدمها لاحقا.

3-WooCommerce-Product-Image-Thumbnail-Size.png

في قالب Storefront الموضح أعلاه (وهو قالب WooCommerce الافتراضي)، أكبر صورة كتالوج تُعرض بحجم 213 × 213 بكسل.

الصورة المميزة للمنتج Single Product Image
كرر نفس الخطوات أعلاه على صورة المنتج المميزة؛ وهي الصورة الكبيرة التي تُعرض على صفحة تفاصيل المنتج.

4-WooCommerce-Product-Image-Product-Featured-Image.png

في قالب Storefront، أكبر صورة منتج تعرض بحجم 298 × 298 بكسل.

الصور المصغرة للمنتج Product Thumbnail
وهي على الأرجح الصور الأصغر في معرض صور المنتج. كرر نفس الخطوات المذكورة سابقًا لمعرفة أبعادها.

5-WooCommerce-Product-Image-Product-Gallery.png

في قالب Storefront تُعرض هذه الصور بحجم 43× 43 بكسل.

إدخال الأبعاد وتجديد الصور
الآن بعد أن أصبحت جميع أبعاد الصور التي تُستخدم في قالبك معلومة، بإمكانك إدخال الأبعاد الجديدة لتتأكد من أن الصور التي ستقوم بإضافتها لاحقًا ستكون بهذا الحجم أو أكبر.

اذهب إلى:

WooCommerce > Settings > Products > Display

وتأكّد من أنّ الحد الأقصى للصور المذكورة مساو للأبعاد التي يعرضها قالبك لهذه الصور، أو أكبر منها. بعد ذلك قم بحفظ التغييرات بالنقر على Save Changes. بذلك عندما تقوم برفع صور جديدة للمنتج ستكون بهذه الأبعاد المحددة في الإعدادات، وستظهر بدون تشوه.

ملاحظة: عند تغيير أبعاد الصور في الإعدادات وحفظ التغييرات لا يتم تحديث جميع صور المنتجات التي تم رفعها سابقًا. إذ يحتاج ووردبريس إلى تجديد الصور لتحديث الصور القديمة. بإمكانك استخدام ملحق Regenerate Thumbnails الذي يتيح لك إمكانية تجديد الصور القديمة بعد تغيير أبعادها في الإعدادات.

دعم شاشة Retina
تحتوي شاشات HiDPI ضعف عدد البكسلات الذي تحتويه الشاشة الاعتيادية. ولعرض الصور بشكل مثالي على شاشات Retina، قم بتعيين إبعاد الصور بضعف الحجم الذي يعرضه القالب الذي تستخدمه. فإذا كان القالب يعرض الصورة بحجم 80 × 80، قم باستخدام الأبعاد 160 × 160. لكن يجب أن تأخذ في الاعتبار أنّ ذلك يؤثر على الأداء، لأن الصور كبيرة الحجم تستغرق وقتًا أطول للتحميل. لذلك فإنّ استخدام ضعف الحجم راجع إلى تفضيلك الشخصي، ويجب أن تقوم بإجراء تحليل لزيارات متجرك قبل اتخاذ القرار.