wrapping text around an image

  • 5
  • Question
  • Updated 8 years ago
  • Answered
When adding an image in a text widget, how do you wrap the text around the image?
Photo of Katie Pearse

Katie Pearse

  • 3 Posts
  • 0 Reply Likes
  • frustrated

Posted 12 years ago

  • 5
Photo of Mstgrr

Mstgrr

  • 31 Posts
  • 4 Reply Likes
Hi Katie,

The current tool doesn't support text-wrapping per se. Your best bet is to use the Two-column widget in the following way:

- Drag the widget into place within your page.
- Insert a Text widget into the right column (or whichever suits you) and paste in your text
- insert another Text widget into the left column

Now this is where it gets interesting:

- click inside the Text editor in the left column
- click on the icon with the green tree for Insert Image (you'll find it with the other text editing tools like bold, etc.)
- select your image from the file manager or upload a new one
- resize your image using from any corner of the image (a black corner and arrow appears from which to drag - also useful here is the display of width and height)
- drag the centre column of the Two-column widget to allow for a wider text column and narrower image column.

Have a look at this page as an example: http://twentyten.synthasite.com/Socce...

I hope that this is some help, you know where we are if you're stuck!
t
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Official Response
Thanks Tracy!

That works for me. Although I have added an item to the requested features list asking for text wrapping in the text widget, so that you don't have to use this workaround, which is a bit clumsy. I know this is a pretty important feature, so I am sure it will get due attention in our planning!
Photo of clouda9

clouda9

  • 323 Posts
  • 3 Reply Likes
Am I correct in thinking that you could add an HTML tool to your work area, then use this code... use <p> before img, >after http", and </p before start.

img style="float:right; margin-left: 30px;" src="your online picture http" Start typing text you want wrapped around picture here...pic will be to the right, text will be to the left.

I have not tried this here, only on my Squidoo pages, let me know if it works.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Official Response
Thanks for sharing the HTML, and yes it will work!

In case you are wondering how to add this tag, you click on the "Edit HTML" icon (last icon on the text editing toolbar) to add the tag clouda9 suggests.
Photo of flybyknight

flybyknight

  • 4 Posts
  • 0 Reply Likes
I'm trying to wrap text around an image at the beginning of a blog post. I've looked at cloud9's explanation but there is no "http" within the code for my picture as you can see below. Here's the code for my picture:
  
If I added the before img. Right? At present, I have an image at the head of the blog post then the text begins at the bottom right of the image. Do I have to start the post all over, add the image, then the code? Is it possible to get the text to wrap around the image I already have? If so, could you show me how to make changes in the code I've included above?
Also, I sized the image way down in PhotoShop so it would look similar to a thumbnail. But when I added it to the blog post, it was the same size as before! How come?
Any help you could provide would be greatly appreciated. Merci.




Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello,

Please visit this site: http://forsite.synthasite.com/encoder... and paste your code in the proper field. You will then be given a new code that will display properly on this forum, allowing us to assist you further. Thanks!
Photo of flybyknight

flybyknight

  • 4 Posts
  • 0 Reply Likes
Hi - I followed cloud9's example except had it float left and margin right. Here's what the encoder gave me - <p></p><p><img style="float:left; margin-right: 30px;" src="squash 2 sized1.jpeg">
What I got was a little box with a "?" in the left margin before my text. I don't like what Mstgrr (also posted 3 years ago) suggests because I don't want the text in a column but to wrap around the picture. I'm about ready to give up. Thanks for your help.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello flybyknight,

Do you mind sharing your URL and I can give you a hand with this? If it's okay with you, can I go into your Sitebuilder and get this set up for you?
Photo of flybyknight

flybyknight

  • 4 Posts
  • 0 Reply Likes
Hi Sanja - I really appreciate your help. I'd like to know how to do this myself so I can continue posting to the blog and wrapping text around pictures. If you do it then I suppose I can look at the html to see what you've done, then copy it into a word doc. My site is - orcasislandveggieexchange. Do you need my username and password to go into Sitebuilder? I haven't published my changes yet so the published version is different. By the way, how come the profile pictures (mine in particular) are distorted (stretched wider)?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello flybyknight,

Thanks for sharing your URL. I took a look and there's a couple of things going on here. Although you have added a blog page, you are not actually using the Blog Widget. What you have done was added the picture using the Picture Widget and below that added your Text using the Text Widget.

If you do not wish to use the actual blog widget, then this is how you'd add the Text Wrap function:

1. Add a Text Widget to your page.
2. Click on the "Picture" button (the icon that looks like a green tree in a picture frame, roughly in the middle of the toolbar) on the Text Editing Toolbar .
3. The File Manager will open up and allow you to browse for and select an image
4. Once you have added your image, select it by clicking on it.
5. You will then see three new icons, a picture with text below (No Wrap), text on the right (Wrap Left) and text on the left (Wrap Right). NOTE: You will only see this when you select the image.
6. Select the option that suits you and start typing. Your text will then wrap around the image.

However, if you wish to use the Blog Widget (located in your Blogging section on the Sidebar), then this is how you'd add the Text Wrap:

1 .Add your image using the blog's Text Editing Toolbar like you would if you were using a Text Widget.
2. Click on the HTML button on the blog's Text Editing Toolbar.
3. Locate the image code; it would look something like this:
<img src="resources/yourimage.jpg">
4. Tweak that code to look like this:
<img style="float: left; padding:10px" src="resources/yourimage.jpg">

If you wish for the image to float to the right, then you can change "left" to "right". You can also adjust the padding value.

Please let me know if you have any trouble with this.
Photo of flybyknight

flybyknight

  • 4 Posts
  • 0 Reply Likes
Followed your instructions for adding an image not using the blog widget (which is too complicated because I don't understand why the default text ("Taylor Family Reunion") appears that can't be deleted). I selected the Text widget, then chose the picture icon from the Text Editing Toolbar. However, it would not allow me to highlight the picture once it was added. When I click on the picture it only shows a black line to the right of the image instead of outlining it in red. I also did not see any new icons appear in the Text Editing Toolbar when I clicked on the image. Do you do lobotomies? Maybe if I came there you could implant an enhanced intelligence chip in my brain then download everything from your cerebral cortex to mine. I'm also considering writing a book entitled: "Why Doesn't Stuff Work Me When It Works For Everybody Else?" This would be a sequel to: "Why Do I Always Get Lost Following Google Map Directions?"