April 5, 2012

layout lessons: how to get your images to span the full width of your blog posts

It was difficult to choose which topic to cover first, but since mismatched photo widths make me want to hack a persons blog in order to fix them I thought it might be a good starting point. Yeah, that made me sound like a real sweetheart but, well, we all have our own hang-ups and that is one of mine.

So yes, I'm definitely a believer that that blog photos should make use of the entire width of your main wrapper (or posting column), but why? First and foremost, you get to use bigger photos. Bigger photos means more detail. Detail is good. Also, using images that take up the entire width of your post column means that you leave behind those big chunks of empty space. See what I mean?

Ooooh, that's one jagged edge right there. How about we take advantage of the full width of the post column?

Yes please!! That makes my brain way less twitchy. Do you see what all my fuss is about? Care to learn how I change the widths of my images?  Click below for details.

Truth be told I have two different ways of getting my photos the right width. One utilizes very basic HTML and the other is even simpler. Today I'm going to show you the super simple way.

Regardless of which method we go with it's always helpful to first know exactly how many pixels wide my main wrapper is. To do this I need to visit the HTML section of my blog. Follow these steps and we'll get where we need to be...

Go to your Dashboard >> click Template >> click Edit HTML >> click Proceed >> click Ctrl+F and search for main-wrapper

Under this heading you will find your width. The width of my main wrapper is 550px and that's exactly what I found during this search.
ETA: If you are using a newer template, like Simple, follow these following steps instead.  
Go to your Dashboard >> click Template >> click Customize >> click Adjust Widths.
Use the following in-exact formula to find your main wrapper width:
Entire blog width - sidebar(s) - 80px (for padding and margins) = main wrapper width

My apologies, I know that is a really messy formula.  I'm not at all used to working with the Simple format.  I typically revert to the class Minima template because I find it easier to customize.  I'll update as soon as I find a better way.

The next step probably doesn't even involve the Internet. Open the image(s) that you want to use in your favourite photo editing program. Using the re-size option adjust the width to match that of your main wrapper. Easy peasy! Now as long as you use your image at full size it will fit your posting column perfectly. When you click on your image and Blogger asks you whether you'd like it to be small, medium, large, etc you can just click Original Size. There you go!

This is the simplest and most expedient way I've found to size images that I'm uploading the the Internet. In my next layout lessons I'll show you how to re-size using basic HTML. I was hoping to do it in this post but wowzers it is beginning to get too long.

I hope this was helpful to some of you.  If you have any questions specific to changing up your blog layout please leave them in the comments below.  I'll try my best to answer them in one of these posts in the future.