<a onclick="surroundText('[imgl]', '[/imgl]', document.post_form.msg_body); return false;" href="javascript:void(0);" title="Image Left"> <img src="{THEME_IMAGE_ROOT}/b_imagel.gif" alt="Image Left"> </a> <a onclick="surroundText('[imgr]', '[/imgr]', document.post_form.msg_body); return false;" href="javascript:void(0);" title="Image Right"> <img src="{THEME_IMAGE_ROOT}/b_imager.gif" alt="Image Right"> </a>
Come to think of it, if someone prepares buttons that look similar to the exiting ones, we can add it, but leave it commented out.
To enable additional buttons would then be a matter of un-commenting what you need.
We can update the help (someone will have to write the text - I cannot).
Changing the html from LI to DIV is probably unnecessary. The same can be achieved by updating forum.css.tmpl.
<!--Start Wrapping text around Images --> <a name="img"><b>Wrap Text Around images</b></a> <br /> <table> <tr> <td width="300" align="center" valign="middle"><b>BBcode</b></td> <td width="300" align="center" valign="middle"><b>Result</b></td> </tr> <tr> <td valign="middle" align="center"><font color="#f00"><b>[imgl]</b></font><br /><font color="#060">http://www.prohost.org/img/pro_logo.gif<br /></font><font color="#f00"><b>[/imgl]</b></font></td> <td valign="middle" align="center"><img src="http://www.prohost.org/img/pro_logo.gif" alt="image With Text Wrapped Around it" width="204" height="31" /></td> </tr> </table> <br /> <i>Explanation:</i> You can use BBcode to Wrap text smoothly around images by enclosing the image url within [imgl][/imgl] "Image Left" or [imgr][/imgr] "image right" tags, These may also be used in conjunction with other text alignment and Styling tags. <br /><br /><br /> <!--End Wrapping text around images -->
The next challenge is to replace the ugly markup (tables and font tags) with DIV's and semantically correct HTML.
<a name="imglr"><b>Wrap text around images</b></a> <br /> <table> <tr> <td width="300" align="center" valign="middle"><b>BBcode</b></td> <td width="300" align="center" valign="middle"><b>Result</b></td> </tr> <tr> <td valign="middle" align="center"><font color="#f00"><b>[imgr]</b></font><br /><font color="#060">http://fudforum.org/forum/images/fudlogo.gif<br /></font><font color="#f00"><b>[/imgr]</b></font><br />Some text to the left.</td> <td valign="middle" align="center"><img class="r" src="http://fudforum.org/forum/images/fudlogo.gif" alt="Image with text wrapped around it" width="140" height="49" />Some text to the left.</td> </tr> </table> <i>Explanation:</i> You can use BBcode to wrap text smoothly around images by enclosing the image url within [imgl][/imgl] "image left" or [imgr][/imgr] "image right" tags. These may also be used in conjunction with other text alignment and styling tags. <br /><br />