Align Images With Text in Wordpress Problem

by 7 replies
8
Is there an easy way to Align Images With Text in Wordpress like the example below,

http://www.sarahstaar.com/test112.JPG


I want to make my homepage of one of my blogs look like this Is there a plugin for this or something??
#website design #align #images #problem #text #wordpress
  • Look up the use of div tags; this will help you easily accomplish what you're trying to do (if you're trying to simply edit a page and not the entire Wordpress theme.)
  • There are two questions here: 1) How to warp text around an image, with the image floated left and 2) How to format your home page.

    As for the first question, as Matt suggested, you just need to use a Div. Think of a div as a section or even like a table cell. If you're going to drop an image into a wordpress post and warp text around it using plain old html, you would do this:

    1) Make sure you're in the "HTML" tab of your WordPress post editor.
    2) In the content area, you would use this:

    <div style="float: left;"><IMG SRC="yourpic.jpg">Here is your paragraph of text, blah blah blah.</div>

    But I'm not sure why you would need to do this. WP has built in image handling that should make this nearly automatic.

    When you insert your image, WP should give you the option to align left, right or center. Wrapped text should happen automatically.

    Also - if you click on an already inserted image, and then click "Advanced Options" you can add horizontal or vertical margins, which will create space between the image and your text.

    As for #2 - this is a function of your theme. Either choose a theme that is already formatted this way on the home page, or create a custom home.php template for your blog.

    Hope this helps!
  • Hello Sarah,

    I just finished from testing this code that I created and is working very well. Just open new post and click on "HTML" and paste this code. after that click on "Visual" and change the images and the text as you like.

    I hope this help you, if you need any extra info please let me know here or pm me.

    I hope this help
    ********* copy the code below *********

    <table width="20%" border="0">
    <tbody>
    <tr>
    <td width="76"><img src="images/image1.jpg" alt="" width="72" height="48" border="0" /></td>
    <td>Edit the text here</td>
    </tr>
    </tbody>
    </table>
    <table width="20%" border="0">
    <tbody>
    <tr>
    <td width="76"><img src="images/image1.jpg" alt="" width="72" height="48" border="0" /></td>
    <td>Edit the text here</td>
    </tr>
    </tbody>
    </table>
    <table width="20%" border="0">
    <tbody>
    <tr>
    <td width="76"><img src="images/image1.jpg" alt="" width="72" height="48" border="0" /></td>
    <td>Edit the text here</td>
    </tr>
    </tbody>
    </table>
    <table width="20%" border="0">
    <tbody>
    <tr>
    <td width="76"><img src="images/image1.jpg" alt="" width="72" height="48" border="0" /></td>
    <td>Edit the text here</td>
    </tr>
    </tbody>
    </table>
    <table width="20%" border="0">
    <tbody>
    <tr>
    <td width="76"><img src="images/image1.jpg" alt="" width="72" height="48" border="0" /></td>
    <td>Edit the text here</td>
    </tr>
    </tbody>
    </table>

    ********* copy the code above *********
    • [1] reply
    • Don't! Tables are not for designing sites.

      Listen to the other posters in the thread > learn the tool you are using.
      • [1] reply
  • Why are talking about HTML and div's this is wordpress, it has image aligning built in. Am I missing something here?

    when you insert an image in you post or page just select 'align to the left' and thats probably it.
    • [1] reply
    • Go back and read the above post - it gives specific instruction on how to use the built in formatting with WP.

      It is important to know how to use divs anyway - there may be circumstances when you want to wrap text around objects or other things that WP image handling won't accommodate....

Next Topics on Trending Feed