أهلا..أصدقائي من بين التحسينات التي طرأت على منصة تطوير 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;http://4.bp.blogspot.com/-MsdGmH4DnDg/W2L_BMuX99I/AAAAAAAADC4/MQoQCY5YhioyuG6dig17Rz9RvnrA6MG0ACLcBGAs/s1600/no-image-Flamingo.png&quot;' var='firstimage'>
                               <img alt='' border='0' expr:src='data:firstimage'/>
                                </b:with>
    







إرسال تعليق add_comment

  1. الصور عندي جودتها سيئة هل من حل اخي الكريم

    ردحذف
  2. السلام عليكم
    هل من طريقة لإضافة تسميات labels لإضافة "المشاركات الشائعة" العادية من بلوجر

    ردحذف
  3. مؤخراً أكتشف أن إضافة rw- إلى قيمة عرض الصورة بأي حجم يحول الصورة إلى تنسيق الـ webp وهو ما توصي به صفحة الـ Pagespeed، وبالفعل قمت بتطبيقه على صور التدوينة وتم حل مشكلة عرض الصور بتنسيق الجيل القادم، لكن الصور في المشاركة الشائعة وصورة غلاف التدوينة لا زالوا يظهرون في مشكلة عرض الصور بتنسيقات الجيل القادم.
    استفساري حول كيفية تطبيق قيمة rw- على صور المشاركات الشائعة؟

    ردحذف
    الردود
    1. أهلا أخي
      طريقة تغيير قيمة الحجم مع إدراج الأحرف عن طريق html على حد علمي لايوجد ولكن سأحاول البحث عن طريقة
      أما عن طريق السكريبتات فهذا سهل فقط قم بإستخدام الكود الآتي..مع تغيير القيمة 200 بما يناسبك
      ستلاحظ أنه إذا حاولت تنزيل صورة المشاركات الشائعة على جهازك ستكون بصيغة Webp

      <script type='text/javascript'>
      //<![CDATA[
      $(".popular-posts img").attr("src",function(t,s){
      return s.replace("/w72-h72-p-k-no-nu/","/s200-rw/")
      })
      //]]>
      </script>


      تنبيه / صيغة Webp ليست مدعومة من جميع المتصفحات

      حذف

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

©2020 جميع الحقوق محفوظة لموقع بلوجر كود. يتم التشغيل بواسطة Blogger.