Automatically resize image sizes on all your posts in Blogger

How to Resize Blogger Photos Automatically:

how to automatically adjust all image sizes in your posts on Blogger and make them responsive and consistent with the width of your blog via JavaScript code or by modifying CSS codes for image sizes according to the size you want .

The images published on your posts are one of the most important factors that affect the beauty and experience of visitors when visiting your site, so you must always make sure that they are clear, large in size and not different from one post to another.

Of course, there are many blogger owners who suffer from the problem of different or small image sizes on their topics, especially the old ones, where the approved method for controlling image sizes is through modification and enlargement of the posts themselves, and if you have many old topics that need to be modified on The picture becomes tiring to edit it all.

In this episode, i will present to you The ways to automatically adjust all the sizes of the images of your blog topics, while choosing the size that suits you a new topic to put on your blog.

The methods provided for modifying the image sizes on the Blogger blog are via script, or modifying the CSS code for topic images from within the Blogger template.

Css Code:

<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>