Things just look better when they’re nice and neat, right? Blog posts included. Aligning your text and photos is actually pretty easy and requires barely any messing around with HTML. Here’s my guide to aligning, resizing and formatting images to make the most of them and ensure your posts look pretty rather than having images and text of different widths all over the place.
Blogger does allow you to upload images directly just by clicking the little picture icon in the post editor – nice and easy, eh? Well, not really. I’m going to try and persuade you to switch to another image hosting service as it allows for much more customisation and not only makes your images look better, but allows for better SEO too. If you really want to stick with Blogger, I’ll explain more about it later in this post, but for now I highly recommend checking out Flickr. Flickr allows you to upload your photos, tag them, organise them, sort them into folders and even share them in groups or communities with similar interests. It also makes sure your images stay sharp and crisp and exactly how you intended them to be viewed. Flickr is free (and they’ve recently done away with Pro paid accounts and improved the Free service instead) and gives you 1 terabyte of storage (err, I don’t really know how much this is but apparently it’s about 500,000 photos) and unlimited monthly bandwidth meaning your photos will always be available, even if you have a blog with high traffic. As your photos are hosted elsewhere, if there’s ever a problem with your blog, if you want to delete your blog, or you decide to move over to WordPress, all your photos will still be readily available. Persuaded yet?!
Resizing and Prepping Photos
Before uploading your photos, it’s a good idea to resize them. This reduces the file size, meaning your blog will load much faster. I use Photoshop to do all my photo editing/resizing etc. but there’s no need for anything as fancy as this, there are plenty of free alternatives like Picmonkey, Pixlr or GIMP. Choose whatever size you want your photos to be, and in the next section we’ll make sure this fits into your template (or if you have a custom blog design you might want to work out the dimensions of your template first). Big images are always a good idea but you still want room for your sidebar etc. so I’d recommend something that’s between 600 and 800 pixels wide. I personally use 700px, but most of the blog design orders I’ve done are set to use 640px as that’s the “X-Large” size on Blogger (more about this later). Make sure you resize in proportion to avoid the images becoming stretched or distorted.
Once your photo has been resized, save it with a meaningful file name. Not only will this help you find it easily if you need it later on, but it’s good for SEO. Unlike images uploaded with Blogger, Flickr will retain your original file name so there’s no need to add in extra HTML tags – whatever you’ve named it on your computer will be the same as the phrase that’s displayed in search engines. If someone was searching for, say, a Bourjois lipstick review, they’d type in something like “Bourjois Rouge Edition lipstick review” not “DSC0027”, obvs. So it’s a good idea to name your photo with some key words or phrases that people searching for would be likely to use.
Uploading Photos and Editing Posts
Now, back to Flickr to upload your photos. After you’ve signed up, logged in and all that, you’ll see a link in the top menu bar called “Upload”. This stage is fairly self-explanatory – choose your files and wait for them to load. Before clicking the final Upload button, you can edit the photo a bit more by adding a description, extra tags, adding it to a folder (or “set”) and so on. I always like to make sure the correct Title is displayed, and then I add my blog link in the Description section in case anyone finds the photo on Flickr and wants to read more – the other options aren’t too important. Once it has been uploaded to your photostream, click on it to open the photo information and then click on the arrow in the bottom right to share the link. Click “Grab the HTML/BBCode”, make sure “HTML” and “Original” size is selected, then copy the code.
Now, create a new post on Blogger where you want to add the photo to. Just underneath the post title, click the button which says HTML rather than Compose. This allows you to edit the post in HTML mode rather than a rich text editor – I think HTML mode is much better, simpler and not nearly as daunting as it sounds! You’ll be met with a blank page, so just paste in the code you copied from Flickr. You’ll notice that both the link title and the image alt tags display the original file name, and you can see the size of the photo too. If you want to change the width, just change the width value here (make sure to either work out the proportions or remove the height=”—” so the image doesn’t get distorted). I’d suggest editing your text in HTML mode too to avoid all of Blogger’s extra and unnecessary code. There’s just a few simple HTML tags you’ll need to know:
<br /> – creates a line break (add two for a new paragraph)
<i>text</i> – italicised text
<b>text</b> – bold text
<center>text</center> – centers text (note the spelling!)
<a href=”URL”>text</a> – creates a link
<img src=”URL” /> – adds an image
Make sure to use the “Preview” button to check how things are looking, and you can always switch between Compose and HTML if it’s all getting a bit too confusing! Save and publish your post. Don’t worry if it’s looking bit squint like in the example below – we’re just about to sort all that out.
Aligning Post Widths
First, let’s sort the text. Open the Blogger Template Designer, click on Advanced and then Add CSS. Add the following code:
This will make sure the text is nicely lined up and fills the whole width of the post. If your images have annoying drop shadows round them which will stop them lining up properly, check out this previous blog design tips post to find out how to remove them.
Now, still in the Template Designer, we’ll adjust the widths to make sure both the images and text fit into the post area. Click on Adjust Widths and use the sliders (which are pretty handy!) to change the size of both the posts and sidebar. This bit just takes a bit of trial and error, depending on the size of photo you want to use, the margins/padding in your template, and the width of your sidebar. To give you an idea, for templates with sidebars set to 320px wide, I find the “Entire Blog” width should be set to 1065px when the photos are 640px. Use the preview window to make sure everything’s lined up nicely then click save – and you’re done! Yay!
Aligning Blogger Images
Now, if you’re still with me (very long post, I know!) I’ll quickly explain how to format pictures which are uploaded using Blogger. In Compose mode, I’ve already written up my post and have clicked the little image button to add in my picture at the top. Upload it and insert it into the post as normal – then click on the photo to bring up a small blue menu bar. Here you can choose the size and alignment of the photo. By default, my image has been added as “Medium” with “Centre” alignment. As you can see, this doesn’t fill my whole post area so I’m going to change it to “Original Size” (or change it to “X-Large” if you want your photos to be 640px) and “Left” alignment. The main reason why Blogger-uploaded images display slightly misaligned is because they’re set to “Centre”. Make sure they’re left aligned and they should match up perfectly! You can also switch to HTML mode here and add in your own value for the width if the one you want isn’t one of the default sizes. As you’ll see in the HTML, Blogger adds in lots of extra margins and borders that Flickr doesn’t, plus it doesn’t have the image alt tags which are great for SEO. And also, Blogger has been auto-enhancing photos recently without warning (see Dana’s post to find out how to turn this off), so essentially I’d really recommend using Flickr instead just to make life a bit simpler!
And we’re done – perfectly aligned pictures without having to edit your template’s HTML or CSS codes. Hope this post has been helpful, let me know if there are any more blog design type tips you’d like me to write a post on!