Auto adjust size of images

The lovely Hayley asked me if there was a way to automatically adjust images in your blogposts, after some research, altering and testing, I've found a way to do so.

Firstly check the size of your main post width, click Design > Template Designer > Adjust Widths. It will show your overall width and your sidebar width, so take the sidebar from the overall and you'l know more or less what the post width is. (includes padding/margins etc)

Design > Edit HTML > Download FUll Template as a backup in case you make a mistake.

Find the following (or similar depending on what template you are using)

]]></b:skin>

(Use CTRL & F to search or CMD & F on MAC keyboard to Search)

Just above that, paste the following



.post img {
max-width: 600px;
width: expression;
border: none;
text-align: center;
}

Change the number to the width you want your images to be (take into account the width of your post width). Save Template.

You can see the image below change as I alter the number.

Note:

This will prevent an overflow of your images onto your sidebars meaning it will resize a large image to the size of your blog post. If you want to resize it up, you can do this by adding min-width: 600px; but please note that this will alter other smaller images (such as the tool image to quickly edit posts). It will also pixelate your images. You are best of resizing the images before uploading. To do this automatically in a program, have a look at this post.