Wrap Text Around Posted Images

This documentation applies to ZetaBoards only.

By default, when small images are posted with text, the text does not wrap around the image, and you are left with white space. See below for an example:

An example of unwrapped text in a post.

However, it is possible to edit your theme's CSS so that the text will wrap around the image, like so:

An example of wrapped text in a post.

Go to the Themes page of the Admin CP. For each theme, click Edit Theme Appearance and add the following to the bottom of the CSS:

td.c_post img, #c_post-preview img,  div.portal_content img {
float:left;
margin:5px;
}

dl.c_post-attachment img, a.member img {
clear:both;
margin:0;
}

User-controlled Version

ZetaBoards has a built in class tag that can be used to perform this function as needed. To set up the class tag for the bbcode, please add this snippet to the bottom of your CSS (Theme Appearance) INSTEAD of the one above for each theme you wish to have this option.

 /* post images with text wrapping around them - adds class tag to affect img tag */
.bbcode-imgright{
display:inline;
float:right;
padding: 10px;
}

.bbcode-imgleft {
display:inline;
float:left;
padding: 10px;
}

To activate the text wrap feature, posters would apply the class tag BBcode tags to the image tags in their text:

[class=imgright][img]IMG-URL-HERE[/img][/class]
or
[class=imgleft][img]IMG-URL-HERE[/img][/class]

This gives the individual poster the option to put the image to the either the left or right margin of the post.

To add buttons that will deposit the BBcode in the compose post screen, add this code to the bottom of the theme Layout. After activating the bbcode button, the user will then need to insert the image URL in between the image tags within the bbcode that has been deposited at his cursor point.

<script type="text/javascript">
$(function(){$("#c_bbcode button:contains(Quote)").after(' <button onclick="ZetaTag(\'class=imgleft][img][/img][/class\',true)" onmouseover="ZetaHelp(\'Wraps text around image on left\')"   type="button">ImgLeft</button> ');});

$(function(){$("#c_bbcode button:contains(ImgLeft)").after(' <button onclick="ZetaTag(\'class=imgright][img][/img][/class\',true)" onmouseover="ZetaHelp(\'Wraps text around image on right\')"   type="button">ImgRt</button> ');});
</script>

Please use the following version for zIFBoards.

Go to the Skinning & Styles > Manage Style Sheets page of the Admin CP. Add the following to the bottom of the page (CSS):

td.post1 img, td.post2 img, br[clear="all"] + br + div.tableborder td.row1 img {
float: left;
margin: 5px;
}



themes/wraptext.txt ยท Last modified: 2016/08/08 08:42 by Helena