Note: this article also applies to you if you simply want all of your images to go full width for the content column.
You have 3 options:
- You can live with it and/or change your template back
- You can go back and edit the images in each post
- You can add a script which will resize the images automatically for the viewer, but leave the underlying post untouched.
<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[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
// the dimension of your content within the columns
var areawidth = $('#Blog1').width();
$('.post-body').find('img').each(function(n, image){
var image = $(image);
var height = image.attr('height');
var width = image.attr('width');
var newHeight = (height/width * areawidth).toFixed(0);
image.attr('width',areawidth).attr('height',newHeight);
var greater = Math.max(areawidth,newHeight);
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});
});
});
//]]></script>
As usual, please leave any questions, feedback or bugs in the comments below!
Post a Comment
Post a Comment