WordPress.org

Ready to get started?Download WordPress

Forums

Getting text to form around images (16 posts)

  1. Mithrustt
    Member
    Posted 7 years ago #

    I was wondering if there is an easy way of getting text to form around images that I've inserted into a post?

    Like, if you go to http://www.joystiq.com, you'll see what I mean. Am I able to do this by default? Because I've tired fooling around, but nothing seems to work. Any ideas?

  2. whooami
    Member
    Posted 7 years ago #

    thats done using CSS. there's no mojo to that.

    Read and you too shall learn :)

    http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

  3. whooami
    Member
    Posted 7 years ago #

    here's another right out of the codex aka the documentation:

    http://codex.wordpress.org/Wrapping_Text_Around_Images

  4. Mithrustt
    Member
    Posted 7 years ago #

    Thanks for that. Everything seems to work normal with one exception. When there is a large image with very little text, the entry background only stretches to the height of the text in the post, but ignores the image.

    As a result, it looks really messed up. To see what I mean, look at the only post with a picture on my site here:

    http://www.savingprogress.com/launchprep

  5. moshu
    Member
    Posted 7 years ago #

    You will need a "clearfix" - an element that has its definition in the stylesheet as
    .clearer {
    clear: both;}
    to push down the bottom of the post. It can be even a
    <br class="clearer" />

    Try to play with it...

  6. Mithrustt
    Member
    Posted 7 years ago #

    I found a

    clear: both;

    in the footer section of the stylesheet. Does that mean I have to add the:

    .clear{
    clear: both;}

    to the entry section of the style sheet?

  7. Doodlebee
    Member
    Posted 7 years ago #

    no - just add the class to whatever you're using to clear the element. If you're using a BR tag, then:

    <br class="clear"/>

    The clearing element is already defined in your stylesheet.

  8. Mithrustt
    Member
    Posted 7 years ago #

    I added that to the post, but it didn't really work. I tried it in different places, but it wasn't working.

  9. moshu
    Member
    Posted 7 years ago #

    No, you didn't add it. This is the source code of your post:

    <img src="http://i4.photobucket.com/albums/y105/Mithrus/havocfrog.jpg" class="clear" align="left" height="240" width="320" br class="clear"/>This is just a test.<br />
    I wonder what this will do?</p>
    
    <br />
  10. Mithrustt
    Member
    Posted 7 years ago #

    I took the <br class="clear"> out after it didn't work. I'll add it again, though to show you guys.

  11. moshu
    Member
    Posted 7 years ago #

    And most importantly delete that clear class from the image tag!!!

  12. Mithrustt
    Member
    Posted 7 years ago #

    Figured it out. Before, I was only adding one <br class="clear" />. I just added several more to stretch the post background out more.

  13. Mithrustt
    Member
    Posted 7 years ago #

    How can I get it so there is padding on the right side of the image in posts only if it is aligned on the left side? I just want it so the text isn't right up against the image when it wraps around it.

  14. moshu
    Member
    Posted 7 years ago #

    I answered this today:
    http://wordpress.org/support/topic/122585?replies=2#post-576740

    More details:
    http://codex.wordpress.org/Wrapping_Text_Around_Images
    (because seemingly you didn't read it when whoo gave you the link above)

  15. Mithrustt
    Member
    Posted 7 years ago #

    I have that leftpic thing you mentioned in the other thread, but it pushed the text down below the image instead of beside it.

    And I don't want to have to edit the code in the post every time, I rather just select align left when inserting the image.

  16. Doodlebee
    Member
    Posted 7 years ago #

    You shouldn't need to add <br class="clear" /> over and over again to get it to stretch. All that's doing is adding line breaks, and you'll have to do it every time.

    I'm looking at your source code, and one p[roblem is a HUGE error - you've got *several* anchor links that aren't closed:

    <a href="http://think-theory.com/category/games-theory/" <img src="http://www.think-the

    See that "a" part? It's not even closed before the image. It should be:

    <a href="http://think-theory.com/category/games-theory/"> <img src="http://www.think-the

    I've played with your stylesheet, and I'm guessing that you're using the visual rich editor. Your stuff is within tags, and you can't see those when you're writing a post. If you go into the "code" area, add class="left" to the tag around the image. Also, remove the "max-width:100%" from the img in your stylesheet.

Topic Closed

This topic has been closed to new replies.

About this Topic