Category Archives: Uncategorized

How To Add A New Post in WordPress

Advertisements

How to Position An Image & Flow Text in WordPress

flower-012

This tutorial by Nan Ross of CorporateCosmo.com is for WordPress 2.3 or earlier. The first time I have tried to position an image with wrapped text, I almost pulled my hair out.  Nah, just kidding! But, I have noticed, depending on the version of WordPress, this technique can be a challenge. Therefore, in this tutorial, I will show you two quick and easy ways to flow text around an image. 

Visual Editing Window

Go to your post and place your cursor to the area you want to insert your image.  For example, let us start with the top left side of the post.  Click on Add an Image > Under Add media files from your computer> Click on Select File>Browse for Image on Your Computer>When uploaded finished > Under Alignment > Click on Left>Insert in Post. Click on Update Post>Preview Changes.

HTML codes

Now, the visual editing technique may seem easy and fast, but you will have some limitation on clean and proper positioning of your layout. For any older version of WordPress, these steps may not be available.  Therefore, I want you to get familiar with an easy HTML code.  This code can be use on WordPress or any other website page.

Open the HTML code-editing window.  Find the img tag for the image you have inserted in the post.

For example: <img class=”alignleft size-full wp-image-54″ title=”flower-012″ src=”https://cosmotutorial.files.wordpress.com/2009/03/flower-012.jpg&#8221; alt=”flower-012″ width=”125″ height=”113″ />
Delete the line starting with <img and ending with the last quotation mark, before src code.
<img class=”alignleft size-full wp-image-54″ title=”flower-012″ src=”https://cosmotutorial.files.wordpress.com/2009/03/flower-012.jpg&#8221; alt=”flower-012″ width=”125″ height=”113″ />
Replace with: <img style=”border: 0pt none; float:left; padding-right:10px; padding-bottom:10px” src=”http://cosmotutorial.files.wordpress.com/2009/03/flower-012.jpg” …/>
Depending on the version of WordPress, do not forget to click on Update Post or Save/Publish.
Note: The padding-right: 10px and the padding-bottom: 10px, this code avoids the text to have some space from the image. If you would like to have a border around the image, than insert the pt size.