بلوجر يقدم لنا القدرة على تغيير حجم الصور

من بين التحسينات التي طرأت على منصة بلوجر - blogger في الأونة الأخيرة هي القدرة على تغيير حجم الصور عبر بنية النماذج فسابقا كان عند محاولة تكبير إطار الصورة أو العكس ستلاحظ أن شكلها بدأ في الإضمحلال وإنخفاض في دقة جودتها !!
فتضطر حين ذلك إما لتركها على التنسيق الإفتراضي أو اللجوء إلى أكوادjava لقلب القيمة المصغرة s72 إلى قيمة أكبر.

طريقة التعديل

هنا مثال تنفيذي لكود الصورة في أداة المشاركات الشائعة في السابق، سنرى شفرة من هذا القبيل تعمل على عرض الصور المصغرة:

 expr:src='data:post.thumbnailUrl' 

أما حاليا تسمح لنا الصيغة أدناه بتغيير حجم الصور المصغرة إلى أحجام أخرى غير 72 × 72 بكسل:

 expr:src='resizeImage(data:post.thumbnailUrl, 72)' 

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

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى: لوحة التحكم

• قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
• إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
• إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
• بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية: تركيب الأكواد

ملاحظة مهمة

لا بد أن تكون قد سبق وأضفت أداة المشاركات الشائعة لمدونتك وإلا لن يظهر معنا الكود المطلوب
• قم بالبحث عن إسم الأداة PopularPosts. أو قم بالبحث عن نفس الكود الآتي..ستجد الكود بهذا الشكل تماما.

  
   resizeImage(data:post.featuredImage, 72, "1:1") 
  

  التعديل على الكود

  الرقم 72 المحدد باللون قم بتغييره إلى الرقم الذي يناسبك مع العلم أن 1600 هو حجم الصورة الأصلي.

  تعليق

  الأن حجم الصورة أصبح طبيعي وستلاحظ تحسن لكن لن يظهر معك الفرق حتى تقوم بتكبير حجم الإطار الموجود داخله الصورة وهو غالباالوسم <div class='item-thumbnail'> فماتقوم به هو إضافة كود الستايل الخاص به وهو كالأتي..

  
  .PopularPosts .item-thumbnail {
      margin: 5px!important;
      position: relative;
      overflow: hidden;
      display: block;
      width: 100px;
      height: 100px;
      float: right;
  } 
  

  التعديل على الكود

  غير في قيمة الطولwidth: 100px; والعرض height: 100px; بمايناسبك إذا أردت جعل الصورة متجاوبة إستعمل القيمة % بدل القيمة px مثلا 100% تعني حجم ثابت يأخذ كامل المساحة على جميع شاشات عرض الأجهزة. 25% تسمح بوجود عنصر أخر في حالة توفر مساحة واسعة...وقس على ذلك...وأخيرا عند الإنتهاء من تعديلك على الكود قم بوضعه فوق الوسم ]]></b:skin> مع أكواد أداة المشاركات الشائعة .

  عارضة لمصمم القوالب

  تستطيع إستعمال هذه الميزة خارج إطار ما تم شرحه بإستعمال شفرة الأداة في مواضع تستدعي عرض أول صور البوست بالحجم الأصلي أو الذي تريده  كما شرحنا سابقا وكذلك توضيف رابط لصورة بديلة في حال عدم توفر صورة رئيسية في التدوينة .. كل ذلك في سطر واحد وهذا مثاله مع الأخذ في عين الإعتبار بنية الكود من أساسه..يمكنك تغيير رابط صورة البديلة إذا أردت.

  
  <b:with value='data:post.firstImageUrl? resizeImage(data:post.firstImageUrl, 1600, &quot;1:1&quot;): &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioqrMIv7GXVrcGgnzsSGAFx1NZovTZsZEzaidgZqaeDJryDLWexuqcAcv7sYNN-l3eVErtgGtaky3fTzVQcYmJCac04Uz27sTa3eeiDUlAKvT-CihyaWG4YThFWW1B5noDdLYFQ_dbIgQ/s1600/no-image-Flamingo.png&quot;' var='firstimage'>
                             <img alt='' border='0' expr:src='data:firstimage'/>
                              </b:with>