Hiren Ponkia

How to Adjust Image and Text Placement

The first issue many new bloggers (and anyone else building a Web page) will run into is how text appears next to an inserted image. If you already know how to adjust white space and wrap text around images you can skip this entry. I know it is old hat to you but some of us need this information. So, you figure out how to insert an image but it looks like this:

There is white space above this line and this text starts too close to the image. If you already know html this is easy to fix. If you don’t you may be stopped right there or just leave it that way. Getting more lines of text into that white space is called “wrapping” text around an image.

This is how to do it:

1. Switch to html view (a tab labeled “code” in WordPress)
2. Find the line that says <img src=” – after the alt=”whatever” add these words: align=”left”

Adding that align=left changes where your text starts and allows you to have multiple lines of text next to your image as you see here.

Our text is still too close to the image though so let’s adjust that. We do this by adding parameters for vertical and horizontal space called vspace and hspace. To do this manually, switch to html or code view. (In WordPress we do that by clicking on the Post “Code” tab.) This image is set to hspace=”0″ and vspace=”10″.

Now our text starts above the image and is still too close to it. This tells us that hspace is the parameter we actually wanted to change.

Note that now our text starts even with the top of the image and is a comfortable distance away.
You can experiment with these numbers until you have exactly the spacing that looks best to you.
In WordPress we can also click on the image and then on the image icon on the toolbar that looks like a green tree on a blue sky. You can select the alignment, vertical and horizontal spacing here and also add a border around an image, link it to a larger version of itself, or link it to something else online. It is also where you can add an image description which provides alternate text that can be indexed by the search engines.

I suspect that image placement could be controlled by CSS and we are working on ways to make blogging simpler through automating many of these types of details so that new bloggers and businesses can focus on writing and running their businesses instead of learning technical skills. Reducing the learning curve would make it much easier to get started.

This is the first in a series I will post on issues that I run into as I learn to be a more effective blogger. I post these as much for my own benefit as yours. I often don’t remember the details of how to do things when I’m first learning them or use them infrequently.

If you have any tips to share or requests on how to handle a particular issue please share them in the comments section below or send them to me using the contact form. We’ll link to your information or write up your suggestions and share them here. The first one I could personally use is how to get WordPress to leave extra blank lines in the text. If I knew that this article would look better on your display.

Also feel free to link to anything you find on this site. Making using technology as easy as possible for anyone who desires to learn is one of the major goals of SEOAddicted.