Floating Inline Images with Multiple Paragraphs

  • This is really annoying me. When I post and want a tall image lets say to float left of all my copy, WP keeps putting everthing in its own ‘P’ tag and only allowing the first paragraph to wrap the image, and not the second because it puts the next ‘P’ tag under the image leaving a lovely whitespace.

    How can I make WP stop doing that? In the options I clicked to stop using the visual editor but it’s still there for me when I post things. Thruthfully for all this trouble I’d rather have an empty textbox and I’ll code it myself.

    I also tried editing the databse but noticed any two spaces in the db.table – WP automatically puts in the paragraph tags… I tried with BR’s but WP just converted it to P tags anyways…

    Help! – thx

Viewing 11 replies - 1 through 11 (of 11 total)

  • This plugin will allow you to turn off and on selectively the various filters that add those tags.

    Option #1: Surround your <img> tag with a <div> one which is floated to the left, as such:

    <div style="float: left;"><img src="..." /></div>

    or

    <div class="imageleft"><img src="..." /></div>

    where you define a new class in your stylesheet as such…

    imageleft { float: left; }

    Option #2: Provided you will want all your images inside all your posts behave the same way, you can create a css class that will format this behavior, as such…

    .postcontent img { float: left; }

    In this case, there is no need to surround your images in <div> tags.

    Thread Starter Chuck Reynolds

    (@ryno267)

    @miro
    I still have the same issue whether I put the float on “.postcontent img” or on “.post img”.

    @filo
    man I hate adding plugins for something so standard, but I can consider it however if all other options fail.

    Why doesn’t WP just have an option to combat this? I mean it’s almost too user friendly to where it’s leaving out the guys who want some more control over their content.
    – aggravated…

    @filo
    man I hate adding plugins for something so standard, but I can consider it however if all other options fail.

    Why doesn’t WP just have an option to combat this? I mean it’s almost too user friendly to where it’s leaving out the guys who want some more control over their content.
    – aggravated…

    The vast majority of WP users don’t care or know anything about HTML. It makes sense to autoformat their posts and keep their options simple.

    I don’t understand why you don’t like plugins. What makes WordPress beautiful is its plugability. This particular plugin doesn’t use excessive system resources; in fact, it probably reduces them because it removes calls to regular expression functions.

    Thread Starter Chuck Reynolds

    (@ryno267)

    Understood. I believe it’s the added options on every post thereafter that, in a way, remove the simplicity of the backend.
    At this point I understand it’s not an option I missed. Is there a way to possibly remove the editor all together? Or will I still retain the issue because of the way WP itself renders /n from the database? It seems to me that WP automagically puts a ‘P’ tag at the beginning of the query and follows the /n’s after that.

    thx

    You can remove it easily. You need to open up your wp-includes/default_filters.php file. Look for “// Misc. title, content, and excerpt filters” and then look for this line:

    add_filter(‘the_content’, ‘wpautop’);

    change it to this:

    //add_filter(‘the_content’, ‘wpautop’);

    save, upload, and no more content formatting.

    Keep in mind that you’ll have to do this again after any upgrade….

    good point vkaryl – that is very true.

    I still have the same issue whether I put the float on “.postcontent img” or on “.post img”.

    I don’t know your theme, so it’s possible there are other constrains that don’t allow for using my Option #2. Have you tried Option #1? There is no reason that shouldn’t work.

    If you want you can email me off the list and I can help you 1-on-1: wordpress A T mikino D O T com

    option 1 is bloated, you dont need the surrounding div. I float images left and right ALL of the time with no <div>.

    option 1 is bloated, you dont need the surrounding div. I float images left and right ALL of the time with no <div>.

    Yes, floating images without the surrounding div should work, in theory. However, there are browser compatibility issues involved here and it also depends on the structure of your theme’s style sheet. While not a purist’s choice, a surrounding div is definitely the safe way.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Floating Inline Images with Multiple Paragraphs’ is closed to new replies.