Automatic Image wraparound – Possible?

  • Hello Ladies and Gentlemen,

    I have a little question. When images are added to enhance a post in WP 1.5 they always end up somewhat like this:

    < div class="post-content">
    <p><img src="*" width="187" height="200" alt="Montreal" title="Montreal" /></p>
    <p>My first day here after a day long drive across Ontario and into....

    Which means the Image is stored inside the post-content class and in its own Paragraph. I would like to make sure that the image uses its own class so that I can set proper V and hspacing and I do not wish the image to be on its own paragraph. I want text wrap around. Which means, usually the image is on the left side and the Text starts right next to it. Is this something I need to fine tweak in the code or is it something that is done in the CSS? I am no HTML/PHP guy, I come from a whole different world, so please enlighten me and I will gladly dive into it

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter dmalloc

    (@dmalloc)

    Just to follow up on my own post. I also see things like this:

    <div class="post-content">
    <p><img src="*" width="179" height="300" alt="" title="" /> My girl is

    But even then the wraparound does not happen. This is something that I have seen with many themes, I wonder why?

    I’m not sure I understand exactly what you want, but I believe it is something to do with floating the image to the left (or right) and then having the text line up with the top of the image. If so, you need to make the IMG tag float. I generally follow a CSS scheme I found at Lou Quillio to do this.

    Moderator James Huff

    (@macmanx)

    https://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html

    Best thing to do is create a class for the images you want to float, if you intend to use it several times throughout a page. THe reason for for this is that by floating the normal image tag, you would end up floating every image on the site.

    So do something like this in your css:

    img.left {
    float: left;
    padding: 5px;
    width: 179px;
    height: 300px;
    }

    btw your height and width are rather large for an image! you don't need to place the hright and width values in there, unless you want to specifiy that a certain image should only display x amount, otherwise simply don't put them in.

    then when you post an image use:

    <div class=”img.left”><img src=”x” alt=”” title=””></div>

    You can also go to your quicktag.js in your wp-admin folder and open it up (make a backup first).

    Then find one of the blocks, say, the block for strong or em – anything which has open and closed tags.

    then do something like this:

    edButtons[edButtons.length] =
    new edButton('ed_div'
    ,'image-left'
    ,'<div class="img.left">'
    ,'</div>'
    ,'j'
    );

    and save the file. THen you can enter your image info as normal, highlight the entire block for the imge and then hit the image-left button in your quicktags and it will wrap around the selected text.

    Thread Starter dmalloc

    (@dmalloc)

    Thank you, excellent answers! That works like a charm. You might want to consider enabling something like this in a plugin or making specific hooks for it, as this is a very common feature someone comming from type-setting will request ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Automatic Image wraparound – Possible?’ is closed to new replies.