Blog Design Tips #4: Aligning, Resizing and Formatting Images for Blogger Posts

aligning resizing formatting images for blogger posts 8

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.

Image Hosting
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?!

aligning resizing formatting images for blogger posts 1

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.

aligning resizing formatting images for blogger posts 2

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.

aligning resizing formatting images for blogger posts 3
aligning resizing formatting images for blogger posts 4

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

aligning resizing formatting images for blogger posts 5

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 resizing formatting images for blogger posts 6

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:

body {
text-align: justify;
}

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.

aligning resizing formatting images for blogger posts 7

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 resizing formatting images for blogger posts 9

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!

aligning resizing formatting images for blogger posts 10

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!

Gillian x

Gillian

Freelance social media and digital marketing consultant with a penchant for writing blog posts, drinking sickly sweet cocktails and exploring the cobbled streets of Edinburgh.

35 Comments

  • Leanne Marie says:

    Great post Gillian! Really helpful!

    Leanne @ Leanne-Marie | Beauty, fashion & lifestyle. x x

  • Although I've felt that I've been pretty good at keeping my photos in check, you have my convinced…I'm making the switch! Love these types of posts by the way, they're SO helpful!

    I would love to know how to make a sticky menu bar…you know, one that follows along as you scroll?

    xx -b.

  • Also, my text still isn't perfectly lining up with my image…I've adjusted widths, taken care of the drop shadow issue, and justified the paragraph, but I still feel like there's a bit of a margin around my image! Any tips?

    xx -b.

    • gillian says:

      Hi Brittany, it could be the case that your current template has some extra padding in there – try adding the following code to the Add CSS section:

      .post-body img, .post-body .tr-caption-container {
      padding: 0px;
      }

      If that doesn't sort it, feel free to drop me an email and I can have a closer look! x

    • Maya says:

      I had the same problem as Brittany. Applied your code and voila!
      Thank you, Thank you, Thank you!!

      Amadeus On The Catwalk

    • Maya says:

      I had the same problem as Brittany. Applied your code and voila!
      Thank you, thank you, thank you!!

      Amadeus On The Catwalk

    • Maya says:

      I also used your method and uploaded pics via Flickr and there is one thing though I don't like now. My pics are not in line with my navigation bar and there is less of the blank space on the left side of the blog then on the right.. I tried to make my nav bar wider by increasing px but it only widens to the right side of the blog, not to the left 🙁
      Can you please help me fix that?
      Thank you ever so much!!

    • Yes!!! I had the same problem as you and Brittany. My photos always seemed to be slightly aligned to the right, I added that extra code to my "Add CSS" blogger section and it fixed it up. THANK YOU SO MUCH GILLIAN. You have been a true life-saver for my blog!!!

      Much Love,
      -Stephanie Eva
      http://www.stephanieheva.blogspot.com

    • Thanks Gillian, I just had the same issue, and saw your extra code here… appreciate it!

  • I like you post. But is it SEO friendly??? How we add CSS with the blog??

    Regards,
    Content Writing Services

  • Oh thank God! I just very recently created my blog, and knowing hardly anything about HTML I was very confused as to how to align all my photos, so a big thank you!!
    Like Prasant, I would also love a post on how to add CSS to our blogs? Thanks so much!

  • Thanks For The Insight no more posting the < br/ > symbol every time I want to align my text

  • omg. Thanks for this! I'm going to apply this to my future blog post.

    Sincerly,
    Oronovelo || DIY, Home Decor & Lifestyle

  • Sage Coralli says:

    This post is awesome, thank you for this! I have a quick question I'm hoping you can answer. I can't find ANYWHERE on the internet an HTML code or CSS that can give me a fixed width for my body text in my blog posts on blogger. After reading this post I understand what 'justified' is and I did that, but do I have to decrease the full width of my blog to make my body text aligned with my photos? Or is there a code that I can add in HTML or CSS? Thank you so much in advance for your help!

    • gillian says:

      Hi Sage, glad you found the post useful! You should be able to set the width of your post using the post-body tag. For example, if you want the width of you post to be 640px, enter the following code in the Add CSS section:

      .post-body {
      width: 640px;
      }

      That should line up your text and images, if the images are still slightly misaligned, you can add this code too:

      .post-body img {
      padding: 0px;
      margin: 0px;
      }

      Hope that helps! x

    • Dorrie M says:

      OMG you just made my day with this! ^ Thanks!

  • Sage Coralli says:

    My blog site is http://www.chicstylebysage.com

  • You saved my life, THANK YOU!

  • Hanh says:

    hi gillian, thank for this helpful post but hope you can help me further! I recently hosted my photos onto flickr rather than using blogger as they looked awful when compressed. however my photos have stopped loading onto bloglovin as they files are too big 🙁 ive resized them but still no luck. any ideas how to work around this?

    also is uploading a photo using the URL location different copying and pasting the HTML code from flickr?

    Hanh x | hanhabelle

  • Thank you for the easy to follow instructions! This has been the most helpful of the many blogging tips I've read! I have followed the steps (on a couple draft posts), but regardless of how I justify the image or the CSS code entered it still appears to have a slight margin on the left side. It doesn't change when I switch it to a left alignment. I've been uploading using blogger's template set to 'original size' and manually adjusting to the appropriate px. I have also revised padding to 0px on HTML in the necessary locations. Maybe I missed something?

    Ultimately, I ended up adjusting the overall layout widths to some kind of random sizes to get it as close as possible, but it's still not right. Do you have any suggestions? My blog is http://www.sweetandsimplelifeblog.com if you need to take a look. Thank you!

  • Just disregard the last comment I left…I think I figured it out. 🙂
    Thanks for the guide!!

    • Katia Audrey says:

      Really, did you figure it out? It would be a great help if you coud tell me how, I'm having the same issue 🙁 Thanks!!

    • Ade Torrent says:

      Katia, I had the same issue, and then just read the post over again. What we missed is the 'left align' of the images. So make sure your images are left aligned, not centre aligned as that is the default. That's what worked for me.

      Take care

    • Laura Wood says:

      I'm having the same problem, how did you solve it?

  • Very helpful to us newbies!

  • Bex Jenkins says:

    I hate uploading photos to Blogger! Thanks so much for the tips!

  • Laura Wood says:

    This is a great tutorial but I'm still having some issues, for some reason my text seems to be sticking out further than my images. At first I thought it was because my images weren't justifying to the left properly but when I look underneath my posts, my footer text seems to be in line with the images which leads me to think that it's my text sticking out further than it should.

    Any ideas? My blog is http://www.shortsoul.com
    Thankyou!

  • Laura Wood says:

    I also forgot to add that I used the CSS codes you mentioned above and they don't make a difference!

  • queen picks says:

    thank you for the post.

  • Emily G says:

    Found this so helpful. Thanks so much!

  • I know you wrote this ages ago, but thank you, it was so helpful!!

  • This was helpful but, my images seem to look square and I want them to be wider and a bit shorter because they look narrow and stretched. Is there a css code for that?

    Xoxo natalierohman.blogspot.com

  • seo ipswich says:

    It’s remarkable to pay a visit this web page and reading the views of all friends
    concerning this post, while I am also zealous
    of getting know-how.

  • Kim Sharman says:

    Hi Gillian, I have a blog called Sarah Lizzies with blogger and all of a sudden, all my photos which I have centred are now aligned to the left margin. This has occurred on all my 107 posts. The strange thing is that when I go into each post o try to fix the photo centre problem all the photos are centred. The problem is only showing with every published post. Would you have any idea what has happened. They were all fine yesterday. Thank you, Kim

  • Becka says:

    This is stressing me out, I followed your tutorial.. but still my text does not align with my photo T^T
    I’m doomed to having a messy blog forever! Awks…

Leave a Reply

Your email address will not be published.