WordPress Tutorial – How to Position an Image and Wrap Text Around an Image Using WordPress

WordPress Tutorial - Tree Image

Note: Wrapping text around an image is much easier in WordPress 2.5 or later. See the post How to Upload and Insert an Image Using WordPress 2.5+.

This tutorial by Mark McLaren of McBuzz Communications is for WordPress 2.3 or earlier. The technique will actually work in any HTML page, whether you’re using WordPress or not. It shows how to use some basic HTML code to  position an image by aligning it to the left (the default) or to the right. It will also show you how to make text wrap around (or “flow” around) the image so that the image does not sit on its own between two paragraphs of text.

In order to show this, I’m going to create a little more text for my example. This week I discovered that it’s not a great idea to use the generic “greeking” text known as “lorem ipsum” because when my tutorial pages are indexed by Google, the description that appears with the listing in search results doesn’t say anything intelligible! It just looks like nonsense.

From now on, I will endeavor to create meaningful text in my tutorials so that when it is indexed by Google or one of the other search engines, people will be able to see what the tutorial is about!

Here is the code you need to wrap text around an image like you see above. Open the Code editing window (click on the “Code” tab next to the “Visual” tab in the Dashboard editing window underneath the Post/Page Title). Find the “img” tag for the image you want to run text around. Insert the code below as shown. Don’t forget to click on Save or Publish.

<img style="border: 0pt none; float:left; padding-right:10px; padding-bottom:10px" src="images/trees.jpg" .../>

_______________________________

WordPress Tutorial - Tree ImageThe continuation of this tutorial will show how to position an image by aligning it to the right, wrapping text around the left side of the image so that the image does not sit on its own.

Although I’m eschewing the use of “greeking” text for the sake of being indexed by Google, I’m also going to have to be careful not to use the same text from the first example above in this second example — because that would definitely look like spam to Google, i.e., putting the same words on a page or series of pages just to boost my keyword count.

Here is the code you need to wrap text around an image like you see in the second example above. Open the Code editing window (click on the “Code” tab next to the “Visual” tab in the Dashboard editing window underneath the Post/Page Title). Find the “img” tag for the image you want to run text around. Insert the code below as shown. Don’t forget to click on Save or Publish.

<img style="border: 0pt none; float:right; padding-left:10px; padding-bottom:10px" src="images/trees.jpg" .../>

There is a quicker way to do some of this by clicking on the image and then clicking on the “Insert/edit image” button in the Visual editing window. But the options there (Alignment, Border, Vertical space and Horizontal space) do not give you as much control as you may want for some layouts. I talk about this in the video tutorial.


You can see in the comments below that a reader has had problems getting this code to stick. Here’s what my Code editing window looks like when I insert the code:

WordPress Code Insertion Problem

About these ads

53 Responses

  1. This is exactly what I was looking for, thank you for the clear instruction!

  2. I am following your instructions exactly but it everytime I type the style in wordpress takes it away. I am using the free version, is this the problem?

  3. dmclaughlin,
    The Business Blogging 101 site itself is hosted on wordpress.com — the free version I think you are referring to. So that should not keep you from adding text to the tag.

    I’m not clear on what you mean by “takes it away”. Is it that when you try to save the changes they disappear? This happens when you try to put something WordPress does not like in the code, like JavaScript, for example. But adding HTML to the tag is usually no problem.

    Try adding only one piece of the additional text to the tag and see if you can save that. For example, start by adding style=”border: 0pt none” and then click on Save. If this stays in the code after you save it. Try adding another piece. Be sure to include the “;” (semicolon) as shown above.

  4. It didn’t work for me. I tried putting it into different places in the img tag and it didn’t work. What I meant by “taking away” is that I can put the code you pasted on this site on my image tag and click “save” and after I click “save” the code is gone.

  5. Well, that sounds frustrating. I think you already got this point, but, just in case… You are typing in the additional code and not just pasting it in, right?

    I recall that if I tried to copy and paste in the code rather than type it in, it would disappear just as you describe it.

    I think what happens there is that some extra (invisible) character or other is inserted along with everything else and WordPress doesn’t like it.

    So try typing if you have been copying and pasting.

    Otherwise, I’m stumped.

    When I run into things like this, I usually try to do something very basic to the element — image, whatever — to see if that will work. That’s why I suggested typing only part of the style code in.

    You could try typing in style=”border-color: red” or style=”border-color: red; border-style: dashed”

    Can you see a border around the image?

    Try something like that. See if you can save it and if it has any effect.

    What about the “easy method” I describe in the first part of this tutorial of putting padding around and wrapping text around an image. Does that work for you?

    What’s the URL of you blog / website?

    I’m going to add an image to the bottom of the post above — to show the screen shot of what my Code editing window looks like. You can see the HTML where I have inserted the style values. If you are not able to type this is and you are hosted on wordpress.com, I’m at a loss, as I said. (Screen shot is inserted above.)

  6. I think I got it working. I flushed my cache and it started working. I don’t know why… Thanks for the awesome and useful tutorial! I’m using this trick 4 life!

  7. I also forgot to point out that at the beginning of your blog post you made one slight error on the code. You didn’t add the “;” after padding-bottom:10px …

    I think that helped me as well.

  8. Glad you finally got it to work. I don’t know what emptying your browser’s cache might have done, but whatever works…!

    For readers that don’t know, here’s how to empty your cache:

    http://mcbuzz.blogspot.com/2006/07/how-to-empty-your-cache-in-internet.html

    I think the key is to type the additional code into the Code editing window rather than use copy and paste.

    As for adding the final semicolon “;” after padding-bottom:10px …
    When I put a semicolon at the very end of a string of inline CSS values, as they are called, WordPress always removes the last one. You might go back to your Code editing window or check View > Source in your browser on that page to see if that semicolon is still there.

    In other words, I don’t think this was the problem. But, if adding a semicolon is the last change you tried before it started to work, then it’s definitely worth a try for any Business Blogging 101 readers having the same problem.

    Thanks for reading, and thanks for following up once you got it to work.
    Mark M.

  9. Thanks for posting these instructions — they covered all of my questions clearly and precisely!

  10. Thanks Mark for a very informative post, I´m going to use this a lot in my my blog. Makes me want to learn more about scripts.

  11. Tegnestiftet –
    You are welcome! Thanks for commenting. Let me know if there are other topics you want to see covered.
    Mark M.

  12. Same problem as laughlin. First of all text doesn’t wrap around my images in WordPress whatsoever. When I do add the code above it won’t save, it just disappears. I tried typing in only “style=”border: 0pt none;” and it deleted my image. Very frustrating.

  13. moneyloo –
    I feel your pain.

    When you say, “Text doesn’t wrap around my images in WordPress”, does that mean that the simple technique noted in the tutorial (using the Visual editing window – clicking on the Insert/edit image button – setting Alignment, Border, Vertical space and Horizontal space) does not work at all either?

    By the way, what system (PC, Mac) OS (XP Pro, OS X 1.4) and browser (Firefox, Internet Explorer) are you using? Where is WordPress hosted (wordpress.com or your own host) and what version of WordPress (to see this, view the source code and look for generator=”WordPress 2.xx”)?

    Let me know about that stuff. If the simple technique does not work, something is seriously wrong, like maybe you are using Safari? But then you wouldn’t be able to see the Visual editing window at all.

    I notice in the code you inserted in your comment above there are three quote marks. Is that just a typo in this case or are you trying that in the code editing window? If so, there’s the problem. You need to eliminate the left-most quotation mark, like this style=”border: 0pt none;” instead of this “style=”border: 0pt none;”

    And be sure to type in the additional code by hand, don’t copy and paste it. If you copy and paste it, you may get the “smart” quotes – or curly quotes – instead of the straight quotes. I don’t think WordPress likes “smart” quotes. So that might be the problem, as well.
    Mark M.

  14. Funny, in Firefox the images float the way they are supposed to. In IE everything shifts over to the left and doesn’t wrap any text around the image. It actually breaks into a new paragraph. This is happening when I align the pictures to the right in the visual editing window. When I try to enter your code it won’t save the changes like I stated before.

    I’m on a PC using the newest version of WordPress and I have my own host.

    The code I inserted was correct as only the style=”border: 0pt none;

    …and I typed in in by hand (that’s when it deleted my image)

    Thanks for your help :)

  15. moneyloo,
    Please tell me your URL — if you are comfortable with that — so that I can look at the theme you are using. You can use the Contact Us form on this site to do so if you don’t wish to post for all to see. (Or just tell me where to download the theme.) I may be able to install a copy of the theme myself to see if I can reproduce the problem.

    In the meantime, please check the code again. The code you have included above is also missing the right quote mark.

    It should be style="border: 0pt none;"

  16. Sorry for the last two typos, this is exactly what I typed: style=”border: 0pt none;”

    Now, when I type this in and hit “save and continue editing” it moves the code to the end after the source path and leaves me with this: style=”border: 0pt”

    It deleted none; for whatever reason.

    I also tried to paste in the whole code again and it just disappears after saving like before.

    My site is Moneyloo.com and the theme is called Several3.

  17. You have no idea how L-O-N-G I’ve looked and asked about
    how I could do this :) (And I’m O-L-D!!! (Vic-20 days) hehehe)

    Question!?!?! Can this be done using “Center” and wrap
    around the entire image?

    THANK!!!
    Bill

  18. Why is the border code even there? I can’t make a border appear no matter what I do.. unless I add border=”1″ to the end of the tag.. then it will work in IE only.. but still not in Firefox. Am I doing something wrong?

  19. Sorry I haven’t been able to get back to you (moneyloo, bill3006 and jeffkastner). Too much going on. I will try to do so by the end of next week.

    Moneyloo –
    If you are trying to copy and paste code into the code editing window, it won’t work. (Not sure why.) You have to type the whole thing – as noted above – into the tag.

    style=”border: 0pt none; float:left; padding-right:10px; padding-bottom:10px”

    The fact that WordPress moved the style=”border…” to the end of the tag and removed the “none” is normal. Try typing the whole piece of code into the tag as it appears above and see what happens.
    Mark

  20. Alrighty.. I got it to work.. had to kind of do combo code to make it work in both IE and Firefox.. but looks great! Now, I just have to figure out why the text to the left and right of my pics, all starts lower than the top of the pic. It’s like there’s padding there, but I don’t see that there is anywhere…

  21. I.E –> http://jeffkastner.wordpress.com/about/
    The first pic/text block looks fine, but the ones under it are all off.. Ideas?

  22. Jeff,
    I see that in the first case, there is only one header tag:
    h2 Who Is Hotswitch? h2

    In all the other cases, there is an h2 followed by an h3

    Try putting each set of headers in h2 only, instead of putting the second line in h3. Use a “soft return” if you need to – by holding down the SHIFT key and pressing the ENTER key. This will put what was an h3 header on a new line without putting into a new header tag.

    To see what I mean, open the CODE editing window. For example, the second header is currently
    h2 Jeff Kastner h2
    h3 Lead Vocals and Guitar h3

    Try making it look like
    h2 Jeff Kastner
    Lead Vocals and Guitar h2

    (With a soft return after ‘Kastner’)

    Mark M.

  23. Well, Mark.. Turns out it just didn’t like that h2 tag at all.. no matter what I did.. if it was in there, it didn’t work. But.. you led me to a fix.. I just used the font tag before and after (instead of the h2 tag) and specified color and size.. lines up nicely now. thx!

  24. Jeff (jeffkastner),
    That looks even better than the default formatting for h2 / h3. Nice work!
    Mark M.

  25. Wow!!! This was exactly my problem and now it’s solved – very clear instructions – you made this accessible even for beginners like me video was great, too – Thank you!!!

    savagemath

  26. No…I spoke too soon…I have a wordpress hosted blog, which I use just to practice new techniques, etc. I also work with other folks on a blog which is not wordpress hosted. The text wrapping works perfectly for the wordpress hosted blog, but I have the same problem as other folks above on the other – wrapping looks great in the visual tab, looks great on preview, but then vanishes without a trace after I save. By the way, we seem to have the same problem when putting in a YouTube video – looks great on the wordpress hosted version, vanishes on the other….Any thoughts?

  27. savagemath,
    This site is mostly for users of WordPress. I don’t have a lot of experience with other blogging platforms like TypePad. I did use Blogger for over a year, and that worked a lot like WordPress, at least at that time, which was over a year ago.

    What’s the platform you are having trouble with? Can you tell? Send me the URL for that blog using the Contact Us form on this site, or you can post it here in the comments.

    I code I suggest to wrap text around an image is standard “inline” CSS, which will work on any site. The problem is that some blog text editors strip out code for various reasons, so you have to play around a bit to find out what will stick.

    You may be restricted in what you’re allowed to use on the non-wordpress site. Is there a webmaster you can check with? Who manages the site?
    Mark M.

  28. The code is different with the 2.5 upgrade. Will you have an updated code to eliminate the “edit image” extra space issue?

  29. Nukedad,
    Please tell me more about what you mean by “the ‘edit image’ extra space issue”. I’m not sure what this is.

    I do see some differences in the way WordPress version 2.5 deals with images, but I want to make sure I understand you correctly before trying to address your question.

    Thanks!
    Mark McLaren

  30. When I inserted the image, like I always had done before, the code was different when I went to the “code” tab. The weren’t next to each other anymore. I did a random gobbledygook post to insert a picture. Here is what the code says. I also still get the “specified file failed upload test” even though I did the correction of the 2 lines of code as they suggested. The images are showing up, though, and I’m able to insert them, just not the way I’d like.

  31. That didn’t work: the IMG and SRC are not next to each other (sequential) anymore. I’ll try the code again without the brackets.

    a href=”http://nuclearfamilywarhead.com/wp-content/uploads/2008/04/big-ben.jpg”></a

  32. Obviously having issues copying code into box so you can see it. Suggestions?

  33. By the way, the src can appear anywhere within the <img> tag. It doesn’t have to be next to img for things to work right. You are inserting style="border:0pt none; …" and that can go anywhere within the <img> tag, as well. WordPress may move things around. It doesn’t matter where WordPress moves things to as long as the code we need stays intact so that it works properly after you click the SAVE button.

    Let me see. Displaying code can be tricky. The reason – I think – is that WordPress.com does not want people inserting actual executable scripts into comment fields or other text boxes where the code will be processed on the server. That can be used to run malicious scripts like spam blasts or other nasty stuff.

    I should come up with an easier way to do this, since much of what we want to talk about here – especially on Intermediate or Advanced tutorials – deals with code.

    Here are two ways to get brackets to show up, which is what we really want at the moment.

    The brackets used in HTML are called “angle” brackets. One way to get those to show up is to use the HTML entity notation. For a left anlge bracket, use ampersand + lt + the semicolon.

    So ampersand + lt + the semicolon and you get <

    For a right angle bracket, use ampersand + gt + the semicolon.

    So ampersand + gt + the semicolon and you get >

    Now we can write something like:

    <a href=”http://google.com”><img src=”photo.jpg” style=”border:0px;” /></a>

    If you use your browser to “View Page Source” on this page and find “Now we can write something…”, you will see that the line above uses the HTML entity notation for left and right angle brackets.

    Here’s another solution: substitute “curly” brackets for “angle” brackets whenever you want to write code.

    {a href=”http://google.com”}{img src=”photo.jpg” style=”border:0px;” /}{/a}

    That way you don’t have to spend as much time inserting & lt ; etc.

  34. Let’s try it.

    {}

    It worked! This is what comes up.

  35. Curses, foiled again.

  36. One more try

    {a href=”http://nuclearfamilywarhead.com/wp-content/uploads/2008/04/big-ben.jpg”}{img class=”alignnone size-medium wp-image-98″ title=”big-ben” src=”http://nuclearfamilywarhead.com/wp-content/uploads/2008/04/big-ben.jpg” alt=”” width=”250″ height=”187″ /}{/a}

  37. Okay. Now I forget what it is we are trying to do here.

    The above looks fine.

    I note that the code you have used (I’m assuming this is your code) for the image in this post:

    http://nuclearfamilywarhead.com/2008/04/04/reward-offered/

    namely,
    style="padding-left: 10px; float: right; padding-bottom: 0px; border: 0pt"

    works fine.

    That being the case, can you use the same code on the next image you insert?

    What you would want to insert in your example would be:

    {a href=”http://nuclearfamilywarhead.com/wp-content/uploads/2008/04/big-ben.jpg”}{img class=”alignnone size-medium wp-image-98″ title=”big-ben” src=”http://nuclearfamilywarhead.com/wp-content/uploads/2008/04/big-ben.jpg” style="padding-left: 10px; float: right; padding-bottom: 0px; border: 0pt" alt=”” width=”250″ height=”187″ /}{/a}

    or you could put the style part at the very end. It makes no difference. Like this:

    {a href=”http://nuclearfamilywarhead.com/wp-content/uploads/2008/04/big-ben.jpg”}{img class=”alignnone size-medium wp-image-98″ title=”big-ben” src=”http://nuclearfamilywarhead.com/wp-content/uploads/2008/04/big-ben.jpg” alt=”” width=”250″ height=”187″ style="padding-left: 10px; float: right; padding-bottom: 0px; border: 0pt" /}{/a}

  38. You are the MAN! It worked. In the next few days, you will be enjoying a Baconator combo from Wendy’s on me. Keep up the fabulous work!

  39. Nukedad,
    Cool!

    Your blog is funny, btw. You go, Stay at Home Dad! http://nuclearfamilywarhead.com/

    I’m looking forward to the Baconator combo – even though I have no idea what that means.

    Thanks for commenting.
    Mark M.

  40. Hello!

    I was SO HAPPY to find your tutorial, but sadly I can only get part of it to work. No matter what I do, my image appears with two lines of text above it. I want the image to align with the top.

    The part of the code that doesn’t seem to work for me is border: 0pt

    Sometimes the code itself has disappeared when I go back to check. Any suggestions? This is driving me nuts.

    I’m working on Firefox 2.0.0.14, to be exact. And I’m using WordPress version 2.3.2

    Hope you can can help! This is so important.
    Many thanks.

  41. @alanrinzler Greetings! Glad you like the tutorial. I don’t see this problem anywhere you have inserted images on your blog, so perhaps you figured it out. If not, give me a shout.

  42. Thanks for the quick response! I figured out that when I inserted the image after uploading, it always loaded underneath a line of text — no matter where I place the curser. So I had to move all the image code to the beginning of the post, and then it was fine.

    BUT — I don’t think the image is correctly aligned with the top row. It’s a little too high. Is there any way that I can pull it down a couple of pixels? I think the image is also positioned too far out beyond the right margin, by about the same amount, a few pixels.

    Can you help me fix this?

    Also, I wasn’t ever able to get some of the on-board image adjustments to work. It never recognizes the extra horizontal & vertical spacing I enter, for example. Any ideas? I was able to place left or right, and to add a border, and to resize the image, so some of the features worked, but not all.

    I’m new to WordPress, new to blogging and 100% new to html. I’m amazed that blogging software doesn’t come with a page layout feature, so you can place graphic elements just where you want them, and so you can change fonts and font styles. I was shocked when I discovered how primitive the image feature was in WordPress, and that there wasn’t any documentation about image placement I could find until I came across your site, luckily.

    I’ve got lots of questions about site organization — for example, it doesn’t appear possible to have a pull down list of postings in a given category. Instead you get really long lists of things. Are there any options? Don’t know if this question is clear enough!

    Many thanks for your help!

  43. @alanrinzler You can push the image down and left by adding the additional values to the img style=”…” property.

    Right now you have style=”padding-left: 10px; padding-bottom: 10px”. You can make this style=”padding-left: 10px; padding-bottom: 10px; padding-top: 3px; padding-right: 10px” and play around with the numbers till it looks right.

    Regarding spacing, the horizontal and vertical settings are one way of doing it, inserting the style=”padding-…” in the HTML using the Code editing window (discussed in the second part of the tutorial) is another. Generally you should use one or the other, not both. Similarly for the align right versus style=”float: right” used in the tutorial.

    Sometimes spacing is specified in the blog theme, which may be why you can’t seem to modify horizontal and vertical spacing. Adding these values to the HTML using style=”padding-…” in the Code editing window should always work, though, by overriding everything else.

    I agree that some of the limitations in WordPress can be vexing, but, as a web developer, I like the fact that there is limited access to layout and design features once I set up a website/blog for a customer. Other software like FrontPage gives so much ability to modify page layout, fonts, etc. that it’s tempting for some to add and modify things to the point that the design is compromised.

    The lack of documentation is due to the fact that WordPress is primarily blogging software. Only recently have folks started placing more demands on it – using it for more sophisticated page layouts and designs normally associated with traditional websites.

    Having a pull down or “dropdown” list of posts in a category is a good idea. I’m sure I have seen this somewhere, but I can’t find it at the moment. There are many, many plugins for WordPress that let you do things like insert dropdowns in your sidebar.

    Check out http://wordpress.org/extend/plugins/

    Here’s one example: http://wordpress.org/extend/plugins/collapsing-categories/

    Thanks for checking out the tutorials,
    Mark McLaren

  44. Thank you Mark! Count me among your grateful readers! Your advice to add padding to the top pulled down the image exactly as I wanted it.

    Also, I checked out the link to the plugin for collapsing categories, and it looks very promising.

    I’m curious to know if I can change font sizes (and fonts for that matter) in a posting. For example, I’d like to be able to add a photographer credit in small type underneath a picture, or perhaps a caption. I don’t see any option in the editor for doing these kinds of things.

    Do you recommend any particular books or sites for novices on working with code in WordPress? Of course I’ll also continue checking back here to look at your great tutorials…

    Thanks for all your help.

  45. @alanrinzler There may be a plugin that would allow you to change font sizes and fonts. Otherwise, to do so, you need to work with CSS, either in your WordPress theme’s style.css file, or “inline” using the Code window.

    I have written a new post to answer the question of how to change fonts and font size using WordPress.

  46. [...] If you’re new here, you may want to subscribe to my RSS feed. Thanks for visiting!This is a wordpress log file for my own reference learned from Mark McLaren in his post at WordPress Tutorial-How to Position and Image and wrap Text Around an image Using WordPress [...]

  47. I had several pics with text, I couldn’t stack them one on top of the other. It really looks bad..have a look:http://reemsaleh.com/2011/05/24/till-death-…-and-lebanon/

    • @Meemzo – This can be frustrating. If you use a self-hosted WordPress site, you have more options. But since your site is on wordpress.com you have to be a bit more tricky. One easy way to do what you want is to insert

      <div style=”clear:both”></div>

      after each paragraph of text. You need to open the HTML editing window to do this. This should push the next line down so that it starts below the photo. That way the next photo will not be indented like it is now.

      So, for example, you would have

      So that’s how death looks like?
      <div style=”clear:both”></div>
      Start your next paragraph,
      (and then insert the image by putting your cursor at the beginning of the paragraph)
      This solution is a “hack” and I’m sorry I don’t have something better for you at the moment.

  48. Thanks for this post!

    I was looking for a solution to float text around a more complex shape than just a box however (a cartoon beaver in my case). I solved it by cutting the beaver image into stripes and placing them on the page by a series of DIV’s.

    Here’s the live example: http://www.clubdesk.com/vereinsverwaltung

    • @ttstuu – This is outstanding work. One advantage of your technique is that if you use your browser to enlarge the text size, text still wraps nicely around the graphic. Thanks for your follow-up!

      Question: What did you use to slice up the image and write the code? I imagine Photoshop or Fireworks would do the job. Given the number of slices, this took some effort on your part. It’s not a technique for beginners, by any means.

      • I used GIMP for the cutting of the image and a simple Editor for the HTML code. I agree, it is quite tedious to do – but the outcome looks pretty good and more importantly, it adjust well to changes in the text.

        • @ttstuu – The final product looks really great, and I agree about making changes in the text. If you add any text to the left or right <p> paragraph content, everything wraps nicely.

          I honestly haven’t seen this done before, so hopefully you can share it with some graphic design / web design groups because I bet they will love it. And, if you are into getting more visibility for your website and ClubDesk, it’s a good way to build links to your site. Here’s a nice post about link building strategies in case you are interested.

  49. Thanks Mark!! My boss had me building a new landing page and wanted all of the images wrapped by text. I had been going nuts for over an hour trying to sort it out, and my WYSIWYG editor was not seeing eye to eye with WordPress on how to code it. You saved my day!!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 221 other followers

%d bloggers like this: