8/30/2017

settings_overscan print announcement

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




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

طريقة تركيب السكريبت

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

الخطوة الأولى

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


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

الخطوة الثانية

  • قم بالبحث عن هذا الوسم </head> أسفله أي بعده قم بوضع الكود الآتي ..

  • 
     <script type='text/javascript'>
    //<![CDATA[
    //rezimg
    var $rezImg=jQuery.noConflict();$rezImg(document).ready(function(){$rezImg.fn.resizeImage=function(){var e=$rezImg(".post-body").width(),t=/\/s\B\d{2,4}/;$rezImg(".post-body").find("img").each(function(r,i){var o,g=$rezImg(this).height(),n=$rezImg(this).width(),d=n/g,m=e,s=Math.round(m/d);o=n>=g?m:s,(i=$rezImg(i)).removeAttr("width height"),i.css({"margin-left":"0",padding:"0","box-sizing":"border-box","box-shadow":"0 0 0 rgba(0, 0, 0, 0)",width:m+"px"}),i.parent().removeAttr("style"),i.attr({src:i.attr("src").replace(t,"/s"+o)}),i.attr("width",m)})},$rezImg("body").resizeImage(),$rezImg(window).resize(function(){$rezImg("body").resizeImage()})});
    //]]>
    </script> 
    

  • إذا لم يشتغل بشكل جيد قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع الكود
  • ملاحظة مهمة
    1 - ستجد في الكود هذا الإسم .post-body مكرر مرتين وهو إسم حقل التدوينة وهاذا بمثابة شرط لعمل السكريبت يتمثل في عدم التعديل سوى على صور التدوينات والصفحات الثابته
    إذا أردنا التعديل على كامل صور التدوينة نستبدله بإسم الوسم body لكن هذا يتطلب بعض الشروط سنوضحها في النقطة رقم -3-.
    2 - إذا أردنا إضافة موضع أخر مع حقل التدوينة (ليكن مثلا صور مواضيع ذات صلة) نضيف إسم الوسم الرئيسي المراد إدراجه بجانب إسم حقل التدوينة .post-body مع مراعات ترك مسافة فاصلة بين الإسمين ليكون بهذا الشكل .post-body, related-posts
    3 - في بعض الحالات إذا كانت الصورة صغيرة الحجم سيقوم السكريبت بتكبير حجمها وربما أدى هذا إلى التقليل من جودتها لذلك وجب إختيارك صور ذات مقاس كبير لتحصل على نتيجة مرضية كما أنك تستطيع التحكم في الصورة الصغيرة عبر ضبط الإطار المتواجدة فيه عبر تحديد نسبة الطول والعرض وإليك مثال تطبيقي..
    
     <div style="width: 200px;height: 200px;">
    <img alt="" border="0" src="رابط الصورة">
    </div> 
    

    لاحظ أننا حددنا الحقل المتواجد فيه الصورة بـ 200px طول على عرض أي أن عملية تحديد حجم الإطار أو الحاوية المتواجدة بداخلها الصورة تساعد السكريبت في إعطاء نسبية أقصى عرض للصورة.
    العملية الحسابية التي يقوم بها السكربت هي ببساطة البحث عن الوسم الأب المتواجدة بداخله الصورة يقوم بحساب المساحة ويحقنها في الصورة..أي أننا لابد أن نضع للسكربت حدود حتى لايجعل الصور أكبر مما يفترض لها أن تكون.
    طبعا هذا إذا جعلنا السكربت يعمل على كامل صور القالب أما في حال كان يعمل فقط على حقل التدوينات فلا داعي لعمل تلك الإجراءات.



add_commentإرسال تعليق

إرسال تعليق