[RD-THANK YOU, Eton Bones]Wrap text around photos?

[nowdocking]

Is there a way to make text fit better with images in posts? Right now, text either has to be above or below the pictures. If it's a small picture, text can be butted up next to it, but it leaves a large amount of blank space.

How can a block of text be made to fit alongside an image?

Thanks.

[poorman3]

Jul 18, 2009 7:09:23 GMT -8 nowdocking said:

Is there a way to make text fit better with images in posts? Right now, text either has to be above or below the pictures. If it's a small picture, text can be butted up next to it, but it leaves a large amount of blank space.

How can a block of text be made to fit alongside an image?

Thanks.

Like this?

text here text here text here text here text here

[Chris]

I could have sworn I saw Wrighty or Triad working on a [float] ubbc awhile back but I can't find the thread but if you have the enhanced UBBC code you could probably wrap the image in a single cell table then use the [atrb] tag to make the table borderless as well as float it left or right

[table]
    [tr]
        [td]
            [img]http://i31./c363/AnnaKneeMouse/2540246d39e6513c0bca5.gif[/img]
            [atrb=border,0,true]
            [atrb=style,float:left,true]
        [/td]
    [/tr]
[/table]

[nowdocking]

Thanks to both of you. Craig said that he once designed a code for this, but couldn't find it.

The thing is with my forum is that it has lots of threads about travel and different places, so people are encouraged to post sequences of pictures. Maybe it's the age group, but they seem to have enough trouble learning how to post images, even though there's a permanent tutorial thread about it.

I will definitely experiment with your help for my own posts, but I was looking for something that would be very simple for everyone to use.

[Chris]

<script type="text/javascript">
<!--
//Float images in posts (Global or board footer)
(function(){
    var e,t,o,n,bones
    for(e=document.getElementsByTagName('p'),t=0;(o=e[t]);t++){
        n=o.getAttribute('align');if(!n)continue;
        bones= o.innerText?o.innerText:o.textContent; bones=bones?bones.replace(/\n/g,''):''       
        if(n.match(/right|left/i) && bones=='' && o.getElementsByTagName('img').length ){
            o.style.cssFloat=o.style.styleFloat=n;
        }
    }
})()
// -->
</script>

Wrap the image in (left) or (right) UBBC to have it float left or right thus allowing text to wrap around it.

The image and only the image should be in the left/right tag. Any text inside there with the image and the image will be left untouched.

[Wormopolis]

kudos on the variable names there!

[Chris]

;D

[nowdocking]

Wow Wow Wow!!

This is great! It's exactly what I wanted and it's so easy to use.

Thank you very, very much. This was extremely generous. I really appreciate your time and effort.

Thanks!

[Chris]

you're welcome

[nowdocking]

Is there a way to automatically create a space between the text and right margin of the image?

When the image is against the left margin, the text is tight up against the right margin of the image. It doesn't look bad, but it looks a lot better with at least some space between image and text.

Right now I'm doing it by writing the text, then Previewing, then adding the & n b s p ; before each line of text where it butts up against the right margin of the image.

I tried using the block quote tags, but that doesn't work. Any suggestions?

Thanks.

[Chris]

try this


<script type="text/javascript">
<!--
//Float images in posts (Global or board footer)
(function(){
    var e,t,o,n,bones
    for(e=document.getElementsByTagName('p'),t=0;(o=e[t]);t++){
        n=o.getAttribute('align');if(!n)continue;
        bones= o.innerText?o.innerText:o.textContent; bones=bones?bones.replace(/\n/g,''):''
        if(n.match(/right|left/i) && bones=='' && o.getElementsByTagName('img').length ){
            o.style.cssFloat=o.style.styleFloat=n;
            o.style.padding= (n.match(/left/i))?'0px 18px 18px 0px':'0px 0px 18px 18px';
        }
    }
})()
// -->
</script>


adjust numbers in that new line to taste

[nowdocking]

OKAY! Yes, that's perfect.

I think anyone who sees this code is going to want to grab it for their forum. This is a great tool.

Thank you, Eton Bones -- brilliant!

[Chris]

enjoy

[silkydhp]

Jul 21, 2009 9:51:06 GMT -8 Chris said:

enjoy

Hi guys.
This is exactly the sort of thing I need to do, but I'm a massive newbie at the scripting side of things.
How do I make this script work?

[silkydhp]

To clarify my above post, I'd like to have the images alternate sides as shown here, but with the font wrapped around the images.