How to preset the width of your Post and Sidebar Images

{Read in Italian...}

I'm pretty sure that you've already visited blogs where images exceeded the space they were supposed to fit, like here:
How to preset the width of your Post and Sidebar Images
As you can see, this post image is extending onto the sidebar. This effect is horrible and, most importantly, it could make some contents unreadable and/or unclickable.
Same thing can happen with sidebar, like here:
How to preset the width of your Post and Sidebar Images
I see this sort of things very often and every time I can't help but ask myself: "How the hell didn't this blogger notice?!"

To avoid this situation, you should resize your images according to the width of your columns.
Anyway, it can happen to grab an image in a hurry and forget this step: it happens a lot of times while grabbing banners.
When I code a blog, after setting the width for content and sidebar(s), the first thing I do is to insert some CSS to prevent the future owner of the blog from having this sort of trouble at any time.

Adding this code is easy: you can do it as well!
First, you need to check the width of your columns, margin and padding excluded.
I usually upload my images slightly larger than the space they should fit, roughly 30 pixel larger: I do this because, if I ever decide to enlarge my column a little, I'd just need to edit my CSS to have all of my images as wide as the content once again!

Here's the code for post images:
.post-body img {
max-width: 730px;
height: auto;
}
To insert it {after you backup your template, as usual!}, from Blogger, go to Template > Customize >  Advanced > Add CSS.
Let's see what it does:
  • .post-body: we're giving a style to the class containing posts.
Note: almost every Blogger template adopts this name for the class that contains posts: check that your template is not an exception! Go to Template > Edit HTML, press ctrl+f and type .post-body into the search box
If you find this code, you're ok! Otherwise, if you need, I can help ;)
  • img: the style we're going to apply goes to every image that we put into .post-body... which means, every image in our posts.
  • max-width: we're setting the maximum width that our images can occupy. This means that a smaller image won't stretch to reach 730px {this would be awful and would happen if, instead, we only type "width"}, while bigger images will always be resized. If we choose the right measure for our column, we can say goodbye to overflowing pictures!
  • 730px: this is the width of my main column: edit this value according to your own.
  • height: if you set this withim auto you'll preserve the width-height ratio of your images, so that they won't be deformed when resized.
As for your sidebar: same thing, but instead of .post-body img you should type .column-right-inner img {.column-left-inner if your sidebar is on the left, of course}.
You should verify that your template adopted this name for its sidebar, as you did for post images.

When we upload an image into a post from Blogger editor, if we chose to have images as wide as their container, we shouldn't center them, otherwise Blogger will apply some margin that would make the image overflow a little.
You should align on the left and check Original size.
How to preset the width of your Post and Sidebar Images
Otherwise, if your picture is smaller, it is better to center it.

Let's see what happens if we apply this code to the template of  my test blog...
How to preset the width of your Post and Sidebar Images
Voila: everything fits automatically!

More posts about images:

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...