How to Wrap Text Around Images Using DSS

When you add an image to your website using DSS, you may want to wrap text around that image. You can do this for special alignment, for aesthetics, or because you want the image to be incorporated with your content. Wrapping text around an image can be an effective way to draw attention to a photo that is of particular importance to your content or to break up a long piece of text with a visual.

How to Wrap Text Around an Image

Before you begin, be sure that you’ve resized your image or photo, so it appears properly on your website. Because some images are too large for the page, you need to resize them before you upload them to DSS. If you need help with resizing, read through our instructions on this process.

Step 1: Log in to DSS, and display the content where you want the image to be added.

Tip: You can use the Search and Edit option under any of the site content topics to find the content you’re looking for. Or you can use the orange Search Items magnifying glass icon at the left side of the screen.

Step 2. It’s possible to insert your image into the content in one of two ways. A quick method for more advanced users is to use Copy/Paste. After you select the image, right-click to choose Copy, and then Paste the image into the desired location using Ctrl-V. However, this may not always produce the proper results, so it’s best to use the DSS method.

Step 3: To select the image you want to place, under the Rich Content Editor heading click the Image icon. This icon is designated by a picture of a mountain. If you mouse over the icon, the word “Image” displays.

The mountain icon allows you to select an image to display

Step 4: Click the Browse Server button next to the URL box.

The Browse Server button allows you to access images

Step 5: Click the Upload icon at the top of the window.

The Upload icon will let you find an image on your computer and save it to your website’s central storage

Step 6: Navigate to the location of the saved image, and double-click it.

Step 7: Once the image uploads, double-click it again to insert it into the content location you’ve chosen.

Step 8: At the bottom of the Image Properties dialog box, click the Alignment drop-down arrow, and choose Left or Right to place the image to the left or right of the text. You need to choose one or the other in order for the text to wrap.

Step 9: Click the orange OK button. Your image is placed in the specified location within the content, and the text wraps around the image according to the chosen alignment.

Notice that although the image has been placed in the desired location, the text may be wrapped too closely to the photo. Not only is this aesthetically less appealing, it may interfere with readability and clarity. It’s helpful to provide some space between the photo and the wrapped text.

The text may not be easy to read if it abuts your new picture

Step 10: Right click inside the photo, and choose Image Properties.

Step 11: In the Image Properties dialog box, input 5 for HSpace and 5 for VSpace. This will add space (additional pixels) between the image and the text. You can input whatever numbers you want in the HSpace and VSpace boxes to achieve the spacing you feel is most visually appealing.

Putting empty space between the picture and the text improves readability

Step 12: You can also add pixels (additional spacing) to just one side of the photo or to just the top or bottom. Right-click the image, and choose Image Properties.

Step 13: In the Images Properties dialog box, click Advanced.

Step 14: In the Style box, input the following after the word “margin”: 0 50px 50px 0;

Tip: This command is a series of four numbers separated by spaces, and the semicolon at the end must be included. This specifies the extra spacing to be added, respectively, above, to the right, below, and to the left of the image. The px code stands for “pixels,” the smallest dot the screen can produce. So, with the command in the example, we would expect to see quite a bit of extra space to the right and below the image.

Change the advanced settings to alter how the text flows around the image

This changes the layout to give more space on the right side. Although this example is exaggerated, it shows how you can change the spacing around your photo. You can also change the number of pixels to place the photo in the exact location you prefer.

Step 15. If you want to change the spacing to float the image to the right and give more space on the left, in the Style box, input the following after the word “margin”: 0 0 50px 50px;

Changing the advanced settings can position the image precisely to your liking

After you specify two zeroes (0 0) after the word “margin,” you can adjust the number of pixels to place the image exactly as you’d like. The photo floats to the right.

As always, Foster Web Marketing is dedicated to your success. If you need any help or feel something is not working properly, please contact us using the DSS Need Help button, emailing [email protected], or calling 888-886-0939. We will be happy to assist you!