Hey guys! Let's get right to a new tutorial today. As always, you can watch the video above (just make sure to hit the little gear icon and view in 720 or 1080HD!), or if you prefer written tutorials, keep reading on:
Auto resizing of your images in Blogger is a great tool to have in your arsenal. There are quite a few instances where you'll find this trick comes in handy. If you're uploading a new blogger template and the post size is smaller than your last blog template, you might see some craziness like this going on:
Essentially, your pictures are sized for your old template, and now they run into the sidebar of your new template.
Additionally, you may also just prefer to have blogger resize all your images down so that you don't have to run each one through a photo editing program to resize it on your own.
A quick disclaimer to start with: I don't recommend just uploading images straight from your DSLR camera into blogger and letting blogger resize them, as this will slow down your blog's loading time. If I have HUGE pictures that I would like to upload to blogger, I resize them first. I like to stick to about 1000px wide to cover my future bases. This isn't so huge that it will slow down your load time, but it's not so small that in the future, if you get a new blog template with a larger post area, you will have small pictures that don't fill up your post area.
Why should my images fill up my post area, anyway?
We can answer this question really quickly! Let's just take a look. Here's a blog post area with a small photo:
Here's the same blog post area with an image that fills the post area:
We could probably consider this a personal preference, but it's the current design style, and the cleanest blogs tend to have large images that fill post areas. It's easier on the eye and I'm a big fan of that!
Let's look at blogger's default options when you add a photo to your blog post editor first, and let's talk about how we should set them for the future to make this code work best for us.
To make this code we're about to add work best, you want to choose "Original size" and "Left" alignment on any image you upload from here on out (and if you prefer, you can go back and edit your old posts, too). If you have centered your photo, made it original size and then we resize it to fit your template, it will stick out past your post area, so left alignment is important to achieve this effect.
First, back up your template! Always, always, always. :)
Next, let's go to "Template":
Then you'll want to find "Add CSS":
We'll grab our code from here:
Then we'll paste that code into the blank spot in our "Add CSS" tab:
You'll want to make sure to scroll down in the live view area until you can see a picture already on your blog post. This is how you'll determine what size your image should be to fill the post space. As you add code to your custom CSS area, you'll be able to view the changes live on your blog. It's a pretty sweet little tool! To do this, you must already have a post published on the first page that has an image in it, and that image should be left aligned.
Play with the number until you see the photo has resized to about the same size as your blog post area:
On this particular template, you'll see the 690px was my perfect width. Once you find that sweet spot, hit "Apply to Blog":
And you're all done!
Keep in mind that this code only resizes an image that is LARGER than the size we chose. If you upload an image that is, say, 400 pixels wide, blogger won't resize that 400 pixel wide image UP to 690 pixels. That would distort the image and make it fuzzy and poor quality. You don't want that. So it's a good idea to upload larger images rather than smaller ones.