ضبط حجم صور المعاينة في بلوجر باستخدام CSS

هل تعاني من ظهور صور المعاينة بأحجام عشوائية أو مشوهة في مدونتك؟ هذا الكود يساعد على ضبط أبعاد الصور وجعلها تظهر بشكل أكثر تناسقًا.

01إيش فائدة هذا الكود؟

هذا الكود صُمم لحل مشكلة الصور العشوائية في الصفحة الرئيسية أو صفحات الفئات داخل بلوجر. وإذا كنت تواجه مشاكل أخرى في تنسيق القالب وCSS يمكنك الرجوع إلى css-template-problems.

1. توحيد المظهر البصري: يجعل جميع صور المعاينة بحجم واحد ثابت.
2. منع التشوهات: يمنع تمدد الصورة أو اقتصاصها بطريقة عشوائية.
3. تحسين تجربة المستخدم: واجهة متناسقة تعني تصفحًا أكثر سلاسة وراحة للعين.

02متى تحتاج إلى هذا الكود؟

1. صور المعاينة تظهر بأحجام مختلفة ومزعجة في الصفحة الرئيسية.
2. بعض الصور تأخذ عرض الصفحة كاملًا بينما الأخرى صغيرة جدًا.
3. ظهور فراغات غير مرغوب فيها أو تداخل النصوص مع الصور.
4. بعد تغيير قالب مدونتك أو إضافة أكواد جديدة أثرت على تنسيق الصور.

03مميزات هذا الكود

1. التحكم في الأبعاد: يضمن عدم تجاوز الصورة لحجم محدد.
2. الحفاظ على الجودة: يساعد على ظهور الصورة كاملة دون قص عشوائي.
3. التوسط التلقائي: يجعل الصورة في منتصف المساحة المخصصة لها.
4. التنسيق المنضبط: يمنع الصورة من أخذ عرض الصفحة كله.

04لماذا هذا الكود مناسب للمبتدئين؟

1. لا يحتاج خبرة برمجية: مجرد نسخ ولصق في المكان الصحيح.
2. سهل الإزالة: يمكنك حذف CSS إذا لم يناسب القالب.
3. تعديله سهل: تغيير الأبعاد يتم بتعديل القيم فقط.
4. نتائجه فورية: بعد الحفظ تستطيع معاينة النتيجة مباشرة.

وهذا النوع من التعديلات جزء من تحديات بناء وتطوير المواقع التي تحدثت عنها في my-digital-journey-challenges.

05طريقة الاستخدام

قم بنسخ الكود التالي ووضعه في قسم إضافة CSS داخل إعدادات المظهر بمدونتك.

06الكود المستخدم

/* كود ضبط حجم صور المعاينة في الصفحة الرئيسية */
.snippet-thumbnail img {
  width: auto !important;
  max-width: 200px !important; /* يمكنك تعديل الرقم حسب رغبتك */
  height: auto !important;
  max-height: 200px !important;
  display: block !important;
  margin: 10px auto !important;
  object-fit: contain !important;
}

07كيفية دمج الكود خطوة بخطوة

1. من لوحة تحكم بلوجر اذهب إلى المظهر.
2. انقر على تخصيص بجوار القالب النشط.
3. اختر خيارات متقدمة.
4. اختر إضافة CSS.
5. انسخ الكود أعلاه بالكامل وألصقه في الصندوق.
6. اضغط حفظ وراجع النتيجة.

08نصائح عند استخدام الكود

1. اجعل max-width وmax-height بقيم مناسبة لتصميم القالب.
2. استخدم صورًا واضحة لأن الكود يتحكم في العرض ولا يحسن جودة الملف الأصلي.
3. جرّب القيم تدريجيًا حتى تصل للشكل المناسب.
4. إذا أضفت رسائل أو تنبيهات داخل صفحاتك، يمكنك أيضًا مشاهدة flash-messages.

09الخلاصة

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