الدرس 132: تغيير حجم مقاسات الصور تلقائيا على جميع مشاركاتك فى بلوجر

شرح طريقة التعديل على جميع حجم مقاسات الصور تلقائيا فى مشاركاتك على بلوجر وجعلها متجاوبة ومتناسقة مع مقاس عرض مدونتك عبر كود جافا سكريبت او عبر تعديل اكواد CSS  لمقاسات الصورة على حسب الحجم الذي تريده 

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

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

الطرق المقدمة لتعديل على مقاسات الصور على مدونة بلوجر هي عبر سكريبت , او التعديل على اكواد CSS الخاصة بصور المواضيع من داخل قالب بلوجر

فيديو شرح طريقة جعل مقاسات جميع صور مواضيعك على بلوجر متجاوبة

اكواد السكريبت : 

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $.fn.resizeImage = function() { $('.post-body').table_to_div(); var postWidth = $('.post-body').width(); var sAttribut = /\/s\B\d{2,4}/; $('.post-body').find('img').each(function(n, image){ var thisHeight = $(this).height(); var thisWidth = $(this).width(); var thisRatio = thisWidth / thisHeight; var newWidth = postWidth; var newHeight = Math.round(newWidth / thisRatio); var newDimension; if(thisWidth >= thisHeight) { newDimension = newWidth } else { newDimension = newHeight }; var image = $(image); image.removeAttr("width height"); image.css({ "margin-left": "0", "padding":"0", "box-sizing": "border-box", "box-shadow": "0 0 0 rgba(0, 0, 0, 0)", "width": newWidth + "px", }); image.parent().removeAttr("style"); image.attr({src : image.attr('src').replace( sAttribut,'/' + 's' + newDimension )}); image.attr('width',newWidth); }); }; $.fn.table_to_div = function() { $(this).find('table').each(function(){ $(this).find('a').unwrap().unwrap(); $(this).find('.tr-caption').unwrap(); $(this).replaceWith( $('table').html() .replace(/<tbody/gi, "<div class='separator' style='clear: both; text-align: center'") .replace(/<tr/gi, "<div style='text-align: center'") .replace(/<\/tr> /gi, "</div> ") .replace(/<td/gi, "<div") .replace(/<\/td>/gi, "</div> ") .replace(/<\/tbody/gi, "<\/div") ); }); }; $('body').resizeImage(); $(window).resize(function() { $('body').resizeImage(); }); }); //]]> </script>