Support » Fixing WordPress » Getting text to form around images

  • Mithrustt

    (@mithrustt)


    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?

Viewing 15 replies - 1 through 15 (of 15 total)
  • whooami

    (@whooami)

    Member

    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

    whooami

    (@whooami)

    Member

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

    http://codex.wordpress.org/Wrapping_Text_Around_Images

    Mithrustt

    (@mithrustt)

    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

    moshu

    (@moshu)

    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…

    Mithrustt

    (@mithrustt)

    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?

    Doodlebee

    (@doodlebee)

    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.

    Mithrustt

    (@mithrustt)

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

    moshu

    (@moshu)

    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 />

    Mithrustt

    (@mithrustt)

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

    moshu

    (@moshu)

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

    Mithrustt

    (@mithrustt)

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

    Mithrustt

    (@mithrustt)

    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.

    moshu

    (@moshu)

    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)

    Mithrustt

    (@mithrustt)

    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.

    Doodlebee

    (@doodlebee)

    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.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Getting text to form around images’ is closed to new replies.