Not signed in (Sign In)

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

Welcome Guest!
Want to take part in these discussions? If you have an account, sign in now.
If you don't have an account, apply for one now.
    • CommentAuthorseb835
    • CommentTimeFeb 26th 2010 edited
     
    Hi Ian,

    I can't seem to get my text to flow around an image when using <img ... align="left" />

    Is this a known limitation? The text breaks above the image, then continues just below the image after. Please see the following link to a screenshot of it in action:

    Image align left not working - click here

    I'm really looking for the text to completely wrap around the image, as it would normally do in an html web page.

    Thanks,
    Seb
    • CommentAuthorIanBack
    • CommentTimeFeb 26th 2010
     
    You need to use <img style="float: left" ...

    Otherwise images are treated as inline elements.
    • CommentAuthorsuryadi
    • CommentTimeMar 3rd 2010
     
    Hi Ian,

    It doesn't work on my end,

    I have used the tinymce, and it generates:

    <p> here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text</p>

    <p><img src="/haloha.jpg"  alt="GT500" width="300" height="204" style="float: right;" /></p>

    <p> here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text here is the text</p>

    the image will always be treated as a block not a float element.

    Thank you,
    Suryadi
    • CommentAuthorfkrauthan
    • CommentTimeMar 3rd 2010
     
    I have a problem too. If i have a image with float:left and then a <p> element the <p>Element with text would go below the image. If i use only Text and <br /> then its work nice.
    • CommentAuthorIanBack
    • CommentTimeMar 3rd 2010
     
    You need to write the <img> inside the block element e.g.

    <p>.....<im style="float: right">......</p>
    • CommentAuthorIanBack
    • CommentTimeMar 4th 2010
     
    P.S. I've been thinking a bit more about suryadi's example and why it is different from the layout in a browser.

    The <img style="float:right"> is contained in a <p> block element.

    In CSS/browsers the image is considered outside the <p> element which therefore has a height of 0. The subsequent <p> containing text therefore starts next to the image and wraps around it.

    mPDF always extends the containing element <p> down to contain all of its contents. This is a known limitation.

    You can get the effect you want, but you have to do it a different way.
    • CommentAuthorfkrauthan
    • CommentTimeMar 4th 2010
     
    If i wrap the image with <p> and </p> tags now all the textes would be printed below the image. But i need that all the images would display on the right site auf the image. At the origin Page the Browser shows the code correct. And to write it in a block element in the same p blog element as the text is very tricky becouse its HTML code generatet by wordpress.
    • CommentAuthorIanBack
    • CommentTimeMar 6th 2010
     
    What you want is not supported by mPDF.
    • CommentAuthorfkrauthan
    • CommentTimeMar 8th 2010
     
    Is it planed to implement?
    • CommentAuthorIanBack
    • CommentTimeMar 8th 2010
     
    No. It's a fundamental change to the way mPD works at present.

    Could you use something like:

    $html = preg_replace('/(<p>\s*<img[^>]*float:.*?>)\s*<\/p>\s*<p>/','\\1',$html);

    It works with the sample you gave above.