Anyone know how to

Discussion in 'WordPress' started by sarkin ruwa, Jun 23, 2009.

  1. #1
    Anyone know how to wrap text around a picture in WP, driving me nuts at the momment.
     
    sarkin ruwa, Jun 23, 2009 IP
  2. deluxdon

    deluxdon Catch Me If You Can...!!!™ Staff

    Messages:
    25,482
    Likes Received:
    1,943
    Best Answers:
    32
    Trophy Points:
    480
    #2
    Just use below given code where you want to do this.

    <div style="float:left; padding:0 10px 10px 0;"><img src="Your Image Url" alt="" width="200" height="150" /></div>
    Code (markup):
    You can change float to right from left as well as image width and height too in this code yourself.

    DON.
     
    deluxdon, Jun 23, 2009 IP
  3. ~kev~

    ~kev~ Well-Known Member

    Messages:
    2,866
    Likes Received:
    194
    Best Answers:
    0
    Trophy Points:
    110
    #3
    Option 1 - When you insert the image into the post, there will be an alignment option - pick right or left. That will float the image to the right or left and wrap the text around the image.

    Option 2 - What deluxdon posted.

    Option 3 - under the HTML tab in wordpress, code in a table with one row and 2 table data fields.

    Example: <table cellpadding="10"><tr><td>text</td><td>image</td></tr></table>

    That will put the text in a table field next to the image and with 10 pixels of padding in each field. and you can control the alignment inside the table, width, put a border around the table and several other options.
     
    ~kev~, Jun 23, 2009 IP
  4. sarkin ruwa

    sarkin ruwa Peon

    Messages:
    483
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks guys I already tried option 1 but I think my template does not support this function, is there anyway to add code to make it wrap text by default on all posts?
     
    sarkin ruwa, Jun 23, 2009 IP
  5. ~kev~

    ~kev~ Well-Known Member

    Messages:
    2,866
    Likes Received:
    194
    Best Answers:
    0
    Trophy Points:
    110
    #5
    Huh? Does not support it? Under the "Visual" tab of the wordpress editor, after you have inserted the image into the post - click the image.

    After you click the image, there should be 2 bottons that appear at the top left hand corner of the image - one image looks like a mountain, the other is a red circle. Click the image that looks like a mountain.

    In the window that opens, there will be several options on the left - size, alignment, edit image title, edit image caption, link url.

    On the alignment row - select left or right. Click "update" in the bottom left hand corner.

    You should now be back at the "Visual" tab. Click next to the image and start typing.
     
    ~kev~, Jun 23, 2009 IP
  6. sarkin ruwa

    sarkin ruwa Peon

    Messages:
    483
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Kev I have done this and in visual it looks correct as you describe but when I save and click preview the text is not wrapped around the jpeg. Not sure what to do now
     
    sarkin ruwa, Jun 24, 2009 IP
  7. deluxdon

    deluxdon Catch Me If You Can...!!!™ Staff

    Messages:
    25,482
    Likes Received:
    1,943
    Best Answers:
    32
    Trophy Points:
    480
    #7
    Have you tried code given by me in 2nd post of this thread :confused: It works for me very well as i am using it myself.

    DON.
     
    deluxdon, Jun 25, 2009 IP
  8. Nandamuri

    Nandamuri Peon

    Messages:
    665
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Heyy, you have an easy answer for the problem. I checked myself
     
    Nandamuri, Jun 25, 2009 IP
  9. sarkin ruwa

    sarkin ruwa Peon

    Messages:
    483
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks everyone option 2 works, option 1 should work but for some reason does not.
     
    sarkin ruwa, Jun 26, 2009 IP
  10. deluxdon

    deluxdon Catch Me If You Can...!!!™ Staff

    Messages:
    25,482
    Likes Received:
    1,943
    Best Answers:
    32
    Trophy Points:
    480
    #10
    Option 2 means suggested by me works ?

    Asking because i am using it at my blogs and it works like a charm.

    DON.
     
    deluxdon, Jun 26, 2009 IP
  11. sarkin ruwa

    sarkin ruwa Peon

    Messages:
    483
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Sorry deluxdon
     
    sarkin ruwa, Jun 26, 2009 IP
  12. ~kev~

    ~kev~ Well-Known Member

    Messages:
    2,866
    Likes Received:
    194
    Best Answers:
    0
    Trophy Points:
    110
    #12
    Then code in a table, put your image in one or the td slots and the text in the other td slot. That will force the text to "appear" wrapped. When really its in a box.
     
    ~kev~, Jun 26, 2009 IP