BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Text wrapping around images
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
Brandon
Guest





PostPosted: Wed Apr 21, 2004 2:37 pm    Post subject: Text wrapping around images Reply with quote

Does anybody know how to make text wrap around images? I can't really post an example of what I mean, but it's where the image is on the left and the text is on the right.

Right now all I can do is have the image on the left at the very top, and then the text starts underneath it.
Back to top
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Wed Apr 21, 2004 4:39 pm    Post subject: Re: Text wrapping around images Reply with quote

Brandon wrote:
Does anybody know how to make text wrap around images? I can't really post an example of what I mean, but it's where the image is on the left and the text is on the right.

Right now all I can do is have the image on the left at the very top, and then the text starts underneath it.


Brandon, you need to switch the editor to "source" mode (that's the button to the left of the smiley button) and edit the IMG tag. To make text wrap around the image, either add the attrbute ALIGN=LEFT or ALIGN=RIGHT to the image tag. The former will put the image against the left margin and make the text wrap around it on the right, and the latter will put the image against the right margin and make the text wrap around it on the left. After you do this, click the mode button again to go back to display mode. If you did everything right, you should see your image with the text wrapped around it. If the image is too big to fit in the editor's textarea (John is there a way to make that bigger? It's awfully small) just hit the Preview button at the bottom of the page to see the image and the wrapped text.

There's no simple way to make the text wrap on both sides of the image at the same time that I know of.

Note: if you add the ALIGN attribue to the IMG tag, you may also want to add the HSPACE and possibly VSPACE attributes. The text will wrap very closely to the image, and if you want to have a little whitespace between the image and the text the HSPACE and VSPACE attributes will give you that.

For example, here's the source from the start of a blog entry I made yesterday that has the text wrapped around an image:

Chuck's Blog wrote:
<P><IMG hspace=8 src="http://unbecominglevity.blogharbor.com/pix/loudmouth.gif" align=left>So this past Saturday I took my wife and daughter to Bickfords in Leominster for breakfast...


As you can see, right after the opening tag for the first paragraph (<P>) is my IMG tag. It has three attributes HSPACE, SRC, and ALIGN.

SRC is the one we all use that tells the browser where the image comes from. ALIGN=LEFT tells the browser I want the image against the left margin with the text wrapping around the right side of the image. HSPACE=8 tells the browser to make sure there are 8 pixels of whitespace to the right and left of the image so the text won't wrap too closely.

You can see the end result of the above code here.
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
kim
Guest





PostPosted: Mon Aug 30, 2004 12:55 pm    Post subject: Image text Reply with quote

Thanks, Chuck. One question:
Is it possible to show image text (is it called Caption in english?) using this method?
Back to top
sgarfield



Joined: 07 Jan 2005
Posts: 18

PostPosted: Sun Jan 09, 2005 11:04 am    Post subject: Adding an image like TypePad Reply with quote

Hi,
As a TypePad user, I'd like to have something similar to their image upload feature over here.

When creatign a new post, you click on the image icon and a pop up window allows you to browse for an image.

After selecting your image, you can click a button to automatically add the alignment and space around the image.
Thanks,
--Steve
Back to top
View user's profile Send private message Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sun Jan 09, 2005 12:50 pm    Post subject: Re: Adding an image like TypePad Reply with quote

We do have a pretty neat way to add images to your article. When you click on the Add Image icon in the Rich Text Editor (that's the Mt. Fuji icon), a popup window appears whhich gives you the option of entering an image URL directly, selecting an image from a photo album, or choosing a file from your file manager.

You are correct that it does not currently allow for you to easily change the image alignment or spacing. As we noted earlier in this thread, for that you would need to switch the editor to Source Mode (that's the button to the left of the smiley button) and edit the IMG tag. To make text wrap around the image, either add the attribute ALIGN="LEFT" or ALIGN="RIGHT" to the IMG tag. The former will put the image against the left margin and make the text wrap around it on the right, and the latter will put the image against the right margin and make the text wrap around it on the left.

To add a little spacing to the top and bottom of an image, you can add this to the IMG tag:
vspace="5"
That would add 5 pixels space. This would add 5 pixels to the left and right:
hspace="5"

For very fine control over the formatting and display of your posts, your best bet with our service or any other service would be to use a blogging client like Blogjet for Windows or ecto for Mac. These clients offer much more functionality than can be squeezed into a web interface...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
lionel
Guest





PostPosted: Sun Jan 09, 2005 7:02 pm    Post subject: fine position Reply with quote

For a very fine position use this code :

<IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0.3em 0.5em 0.1em 0px; BORDER-RIGHT-WIDTH: 0px" src="http://site.com/images/image1.jpg">

lionel
Back to top
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum