WordPress.org

Ready to get started?Download WordPress

Forums

flowing text around pictures (4 posts)

  1. plantrob72
    Member
    Posted 6 years ago #

    I'm an old-school html hacker, who's used to doing most formatting with tables - but I've found that that gets me in trouble in WordPress, so I'm trying to update my repertoire. I'm sure there's a best practice for achieving the effect I'm after - would you enlighten me?

    I'm trying to format a post with multiple images, flowing text around images that are alternatingly aligned to the left and to the right. As long as I blabber on long enough about each picture so that the paragraph flows around the entire image, that works just fine, using the align=left/right attributes on the img tag. But what to do if the text stops halfway down image number one, and I want to present image number two with some text about it? Without resorting to dubious hacks, such as inserting manual blank space (or, in my case, periods, because WordPress chooses to strip out any <p></p> or <.br/> tags I try to place), the second bit of text starts alongside the first one, and the images overlap. Example.

    I'd appreciate any pointers.

  2. Roger Theriault
    Member
    Posted 6 years ago #

    You'll find CSS can do a lot, once you know most of the tricks.

    The best thing you can do is use a class for your images, rather than an align attribute. (eg: <img class="left-image" ... />) And then in the css file, for your left aligned images, define them as:

    .left-image {
       float: left;
       clear: right;
    }

    The "float" business in CSS can be a headache to do properly since it's not very intuitive (or rather, what we typically get isn't what we expect). But this (and the mirror for a right image) will get you further.

    The WordPress image classes set by the editor can be (re)defined in your theme's style.css file. (In some themes, they aren't even defined)

    Trying to figure out what all that is? Just Google "css float" or "css clear" and you should find some help.

  3. Sandra-08
    Member
    Posted 6 years ago #

    I allow for a caption as well as a padding & border.

    .right {
      display: block;
      float: right;
      margin-left: 8px;
    }
    
    .left {
      display: block;
      float: left;
      margin-right: 8px;
    }
    
    .caption {
      margin: 5px;
      padding: 5px;
      border: solid 1px #999;
      background: #CCC;
      font-size:80%;
      color: black;
      line-height: 135%
    }
    
    <div class="caption left"><img src="http://url.com" alt="wp">Text</div>
  4. plantrob72
    Member
    Posted 6 years ago #

    Great! That helps a lot, thanks much. One more question: I wanted to clear the space alongside the lower-most image, and continue the next paragraph (without an image) on its own line. My hack of inserting the code
    <div style="clear:all"></div>
    worked once, but was automagically removed by the WordPress editor the next time I made a change. I guess I could define another class "nofloat" and place the next paragraph inside a div with this class. Is there a more elegant solution to this?

Topic Closed

This topic has been closed to new replies.

About this Topic