NOTE:  The instructions presented here were designed for SiteSpinner version 2.7f and WebEngine. For a non-WYSISYG method using SiteSpinner version 2.91 and SiteSpinner Pro, please review the Text Wrapping tutorial in the Video section.

In the past, a few SiteSpinner forum members have asked about text wrapping. Unfortunately SiteSpinner does not provide a one-step tool to achieve this HTML effect. But it can be achieved using standard SiteSpinner tools. Two methods will be demonstrated in this tutorial.

The WYSIWYG Method

This is the simplest method to use. Basically you just need to place your image and text on the page, aligned next to each other how you want them, and then break the text object into two or more separate objects. Below is a sample image and text aligned as a first step. You can see that the text exceeds the height of the image around the start at the highlighted text (image borders have been turned on for clarity).

If the highlighted text is pasted to a separate text object (and removed from the original), the new text object can then be resized and repositioned to make it look like the text is wrapped around the image.

You may need to perform slight repositioning of the text objects to get the line spacing correct, but the text wrapping effect has been achieved in just a few easy steps. The only problem with using this method is if you need to change the text. Either adding or deleting text to the original object will require you to re-shift the text between the two objects. Before using this method, you should be sure the text is in its final version.

The HTML Method

In this method, HTML code is added to the text object to produce the text wrapping within the browser. (Refer to SiteSpinner’s Help→Tutorials→Advanced Topics or Mixing Text and Code for information on adding HTML to a text object.) The down-side to this method is that the effect is not visible on the work page, so you must preview the page to see the effect before you publish.

Using the sample text, we will embed the HTML <img> tag and image information within the text object. An example <img> tag is:

<img src="path/image.file" width="105" height="106" alt="" width="105" align="left" border="1" />

where path/image.file is the directory file info needed to locate the image on your site. The sample text and image using the HTML method is shown below.

The text and image spacing is still not quite right, but that can be fixed by adding in-line style code to adjust the margins around the top and right sides of the image. For example, adding:

style="marign-top:6px; margin-right:8px;"

inside the <img> tag results in the following:

As mentioned earlier, the text wrapping effect is not visible until you preview/publish the page. This can make object placement difficult since the final object will contain an image and the text will be shifted, thus changing the size of the published text object.

To help alleviate this problem, I use a copy of the image and overlay it on the text object. This gives a very rough estimate of how much space must be added to the text object to approximate the final size. Then before publishing, I remove the overlaid image.

Since this method is more difficult to use that the WYSIWYG method, why use it at all? There are a few advantages. For one, the image is easily moved to the right of the text by simply changing the <img> tag’s align attribute from “left” to “right”. Another is that the image size can be easily adjusted by changing the <img> tag’s width and height attributes. For example:

Also, the font style used for the text can be changed as desired and the browser will automatically adjust the text to fit around the image. The text itself can be changed as well as the size of the text box without having to redistribute the text between text objects as in the WYSIWYG method. For example:

Conclusion

Both method produce the desired effect, so either one can be used with SiteSpinner. Which method to use depends more on design than anything else. If your image and text is in a final state, then the WYSIWYG method would be quicker and easier to use. But if you are still testing your image size or placement, and/or text wording and style, then using the HTML method gives you greater flexibility to change things while you develop your page.