Latest News

728x90 AdSpace

Thursday 21 July 2016

How to change original size image in blogger template

Please follow the steps

1. Go to your Google+ account settings. Scroll down to Photos & Videos and tick “Upload my photos at full size”.



2. In Blogger go to Template > Customize. Then head to Advanced and scroll down to Add CSS. Add this code:
           A.  If you want to post  full size image  use this code 

 .post-body img {width:100%;height:100%;display: block;}
         
            B. If you want to  Post in particular pixel  use this code . 
                      
.post-body img {
width: 500px;
height: auto;
}
.post table.tr-caption-container img {
width: 500px;
height: auto;
}

Click Apply to Blog and then go to << Back to Blogger.

3. Next go to Template > Edit HTML. Find </head> and above it add this code:

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {

$('div[class="post-body entry-content"]').find('img').each(function(n,image){

// rewrite the source url to use BlogStomp’s original size.
$(image).attr({src : $(image).attr('src').replace(/s\B\d{3,4}/,'s0')});

// remove any hard set width or height setting
$(image).attr('width',null);
$(image).attr('height',null);
});

});
//]]>
</script>
4. Click Save Template. Now you’re good to go!!
FYI, when you do a post from BlogStomp it will turn out looking not right when you look at the post in Edit mode.

 But it will be bang on when you view it on your site as the code is referencing the original image

 Thanks. Hope you will enjoy it


PS. Thanks very much to stompsoftware 

  

No comments:

Post a Comment

Recent Post