Positioning images and wrapping text?

Rayc

Posted on 13 Jun 2010, 16:14:58

Access: Member
Total Posts: 74
Joined: 2010-06-13

Is there a way to position inserted images (left/right/centre) and have the news article text wrap around the image?

Would this require that you activate HTML for the author and use HTML tags?

Thanks,
Ray

#2444

Chris

Posted on 13 Jun 2010, 19:26:43

Access: Admin
Total Posts: 1395
Joined: 2006-05-19

If you make a small edit to bbparser.php you'll be able to use the

Code:


[left][/left][center][/center][right][/right]

Tags to wrap text around images, bbparser.php, around line 87~ you'll see this

Code:


    $bb2html = str_replace('[left]', '<div align="left">', $bb2html);
    $bb2html = str_replace('[/left]', '</div>', $bb2html);
    $bb2html = str_replace('[center]', '<div align="center">', $bb2html);
    $bb2html = str_replace('[/center]', '</div>', $bb2html);
    $bb2html = str_replace('[right]', '<div align="right">', $bb2html);

Change that to

Code:


    $bb2html = str_replace('[left]', '<div style="float: left">', $bb2html);
    $bb2html = str_replace('[/left]', '</div>', $bb2html);
    $bb2html = str_replace('[center]', '<div style="float: center">', $bb2html);
    $bb2html = str_replace('[/center]', '</div>', $bb2html);
    $bb2html = str_replace('[right]', '<div style="float: right">', $bb2html);

Then when adding an image you can wrap text around it doing something like this

Code:


[left][img="http://dev.network-13.com/news/uploads/batmangir.jpg"][/img][/left]This text will be wrapped around the right side of the image because the image is floated to the left

Alternatively you can of course just enable HTML and manually add the code each time you make a new post.

#2449

Rayc

Posted on 13 Jun 2010, 23:16:07

Access: Member
Total Posts: 74
Joined: 2010-06-13

Awesome. Thanks!

Now that I see where it's done, I made a slight mod to your mod.

Instead of:

Code:


    $bb2html = str_replace('[left]', '<div align="left">', $bb2html);

and

Code:


    $bb2html = str_replace('[right]', '<div align="right">', $bb2html);

I used:

Code:


    $bb2html = str_replace('[left]', '<div style="float: left; margin: 5px 10px 5px 0">', $bb2html);

Code:


    $bb2html = str_replace('[right]', '<div style="float: right; margin: 5px 0 5px 10px">', $bb2html);

This provides a bit of space between the image and surrounding text.
(But you already know that!) :eheheh:

-RayC

#2468

Rayc

Posted on 16 Jun 2010, 15:22:43

Access: Member
Total Posts: 74
Joined: 2010-06-13

Just thought I'd post for others that may see this thread:

There is no such thing in CSS as "float: center". The "center" tag will not be recognized, and will default to a standard left alignment with no wrapping.

I'm sure it was just a momentary lapse. :happy:

I didn't even realize at first because I did not make the suggested change to the center alignment code, as I didn't see a practical use for it. But out of curiosity, I tried it, then realized it wouldn't work anyway.

The left and right float works a treat, though.

Big :hug:

to Chris (in the most manly way possible)

-RayC

#2504