Saturday, January 22, 2011

Putting text and a picture side-by-side in blog posts

This article is about lining up text and pictures side-by-side in your posts - and about how to add a "break" so that some text goes beside a picture and some goes underneath it.

The post editor's picture menu:

When you have put a picture into a post  in Blogger, (either using the Insert-picture option on the toolbar, or by adding the HTML for it some other way), the Post Editor gives you options for picture size, and for aligning the picture to the left, right or centre. 

You cab see these options by clicking on the picture.  This opens a "mini-menu" under the picture, like this:



This one mini-menu has options for:
SizeOptions are small, medium, large, extra-large, and original-size
Alignment:Options are left, right and centre (default is center)
Caption:Add caption, and Remove
Properties:Where you can add the hover-title and alternative-text for the picture
Remove:Taking the photo totally out of the post


The alignment options:

When you first add a picture, the alignment is set to "center".

Choosing Left or Right moves puts the picture to the far side of the post and, if the picture isn't as wide as the window it's being displayed in, the text that was after the picture fills up the space on the other side - like this:




Stopping all the text from flowing around the picture:

Often bloggers want to have pictures left or right aligned, and to have some words showing beside the picture.

But they also want to control what text is shown beside the picture, and what text doesn't start until underneath it.   Many people spend a long time putting extra lines into their posts, so that the text and pictures are set up in a way that's "just right" - and then they're disappointed when they publish the post and their hard work is all lost, because the screen is wider and more text fits into the area beside the picture.

Luckily, this is very easy to do, by editing editing the HTML behind the post:.

1    Put some place-holder or "marker text" exactly where you want the flowing-text to stop.

Use text like BREAK HERE  or  XXXXX  - in short, any words that won't be anywhere else in the post.


I've made it bold and with a yellow background to make it show up in the picture - but I don't recommend that you do this, because it makes it harder to find and replace exactly the correct text later on.


2  Choose the HTML option (top left of the post-editor screen.


Find the place-holder text
(hint:  use your browser's search function - in Firefox, it's Edit > Find)


Replace the place-holder text with this code:
<div class="separator" style="clear: both;"> </div>
(The important thing about this code is that it re-sets the previous float instructions, which may have been to the left or two the right., by saying clear: both;)


5  Choose the Compose tab  (to get back to the regular post-editor screen).  The text after where the marker text was is now underneath the picture - and it will be there when you publish the post, too, no matter what size of screen your reader has.


Troubleshooting

Aligning more than one picture

The approach described here if you are only working with one picture.   But if you have two or more pictures, instead of letting the text flow it is best to put some of it into a <div> statement that is positioned to sit beside the pictures.

See putting several pictures alongside each other for details about this approach.

Extra blank lines:

At the bottom-left of the post-editor, there is a link for Post-Options.  Clicking this opens an options panel, where you can choose what effect line-breaks (ie pressing the "enter" key) have.   I always put it on "Use <br /> tags", so that I can put extra empty lines into the HTML to make it easier to read.   If it's on "Press Enter for line breaks", then each extra line put into the HTML will also show up in the Compose-mode view, and in the final post.




Related Articles:

Stopping pictures on your blog from being "clickable"

Getting the HTML code to put a picture into your blog

Putting pictures side-by-side in your blog

Telling Google about the pictures in your blog

Inserting a picture into a blog post

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

7 comments:

  1. Many thanks for this. I was one of those people who tapped away at the enter key to get text below a picture. No longer thanks to your advice.
    http://techmedianow.blogspot.com/

    ReplyDelete
  2. I'm not sure what i'm doing wrong with this but when i insert an image and choose right or left alignment from the mini menu, the image moves ok but all the text stays underneath it... any thoughts on how i can get the text to run alongside the image instead would be very much appreciated!

    ReplyDelete
  3. I just stumbled upon the fact, that text next to a picture is more readable, as the line width isn't so big.
    So your tip is really great.

    ReplyDelete
    Replies
    1. Indeed, there's some interesting research about this, especially whether it's best to have the the photo on the left or the right. I started an article on this, but haven't got enough solid information to publish it yet.

      Delete
  4. If I understand correctly, Every section of text that I want to stay the way I arranged it; I have to enter some kind of code.

    Isn't there some way to just disable the flow so I don't have to bother with it?

    ReplyDelete
  5. When I try to add a caption to an image I have posted, the image is automatically moved to the top of the page. Should I use the break code for this?

    ReplyDelete
    Replies
    1. I think that the break should help with this, but you won't know until you try it.

      Delete