Ana Connell - Burbank Real Estate Expert asked for this tutorial.

Appearance Panel On ActiveRainAnd since she's not the first to ask me, I thought I'd get this one up as quickly as possible. Earlier today, she wrote:

"I would love to know how you type around an image that's been added to a post. I know it's possible because I see it all the time, just don't know how! I've noticed it in your and Laurie Manny's posts and really like the overall presentation it creates.

Right now I add an image and can only start my text either beside the image (on the very bottom of the image), or below it. Hope I've explained this well enough! If you have any questions, shoot me an email or give me a call, thank you!"


So, let's wrap some text around an image.

The image you see to the right has already been added to this post in a way that makes it wrap around the text in the post. The video below will show you have we did it, but the graphic is what you will see when you add a graphic and then click on appearance. I personally like putting my images on the right of the post. I think it makes for easier reading to keep the left edge justified.

Now, to make this work the way Ana wants it to work, we need more text.

If you have a small amount of text and your image is large, there is very little you can do to make the text "flow" around the image. The best that can happen is that the image sits to the right or to the left. But if you have enough text, as I'm attempting to provide here by rambling on and on and on, then you can make the text flow above and below the image as well as to either side.

Here's the video. Enjoy.


blockquote {margin: 0pt 0pt 0pt 30px; padding: 10px 0pt 0pt 20px; width:500px; background: transparent url(http://www.realestateshows.com/jeff/quotes.gif) no-repeat scroll left top; font-size: 120%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #356D9E; line-height: 1.2em;} h2 { color:#356D9E!important; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; font-size:20px!important; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:0pt; line-height:24px;a margin:9pt 0pt 0px; padding:6px 0pt 0px; } h3 { color:#356D9E!important; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; font-size:20px!important; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; letter-spacing:0pt; line-height:24px; margin:9pt 0pt 0px; padding:6px 0pt 0px; } a { color:#356D9E; text-decoration:underline; } p{ margin-top:2px!important;} a:hover { color:#ffffff; text-decoration:none; background:#356D9E; border 1px solid #DDA603 }
 
Post is included in group: SHARE YOUR FREEBIES
Post is included in group: HELP/FAQ (Read 'Purpose Statement' Carefully!)
Post is included in group: Active Rain Newbies

90 Comments on AR Tutorials - Flowing Text Around Images

OCT
25
2007
2 Featured Posts Outside Blog Hit Router

Thank you soooo much!  I can't wait to put this into action!

 

5:24pm • #1
255,884 Points 7 Featured Posts Outside Blog

It's not like I didn't think I could figure this out.

It's just that I needed someone like Jeff Turner to put it in front of me.

Thanks, Jeff.

5:26pm • #2
425,755 Points 90 Featured Posts Outside Blog

Ana... go to town! :)

Mike... none of this stuff is hard. It's just hidden. I'm hoping that realization is one of the results of these tutorials. Most of this can be learned by NOT being afraid to press all of the buttons. Nothing is going to explode. :) 

5:30pm • #3
First view of your Tutorial.  You made it so simple and easy.   Thanks.  
5:47pm • #4
577,289 Points 95 Featured Posts Localism Sponsor Outside Blog Hit Router
I don't even want to tell you how I've been doing it. This is so much easier. LOL Thanks
6:53pm • #5
203,886 Points 4 Featured Posts Outside Blog
Jeff - thanks for pointing out the fine points of this tool.  Most of us have played around with the basics of it, but never bothered with frames, etc.
7:05pm • #6
148,811 Points 8 Featured Posts Outside Blog

Jeff,

I will never miss a video you do.  They are worth 1000 words.

7:39pm • #7
130,028 Points Outside Blog

Jeff,

Thank you for this presentation. I to have been wondering and I am glad that you did this post.

Next, Question? Who do you set AR to work on your Mac? I cannot get the submit comment button to work so it seams that I am doing my AR in Parallels until I figure it out. Thanks for you help.

8:06pm • #8
317,288 Points 45 Featured Posts Outside Blog

Jeff - I learned something new in your video, the vertical and horizontal spacing!  I had been fiddling around with mine on my own.  Sometimes my pictures went right where I wanted them, and sometimes they'd accidentally end up in places that looked good. 

I like that spacing you showed in the video - thanks for sharing that tip!!
Ann

8:09pm • #9
130,211 Points Outside Blog
you know, there are schools out there that would love to have you teach this stuff!!!!
8:11pm • #10
241,883 Points 15 Featured Posts Outside Blog
Thanks, Jeff!  I never knew what the spacing was for either...as always, you ROCK!
8:16pm • #11
425,755 Points 90 Featured Posts Outside Blog

Tim... thank you.

Missy... ok, now I really want to know! :)

Carol... my pleasure. 

8:57pm • #12
425,755 Points 90 Featured Posts Outside Blog

Judy... love the graphic!

Susan... my guess is that you're using Safari and the AR Gods have not seen fit to enable AR for the Safari browser. So, download Firefox and go to town. 

8:59pm • #13
425,755 Points 90 Featured Posts Outside Blog

Ann... my pleasure.

Bill & Barbara... it's a lot more fun doing it for free. :)

Lisa... thank you.

 

9:00pm • #14
130,028 Points Outside Blog

Jeff - once again you are the master and yes I am trying to use Safari so I will go to firefox. Thanks so much.

9:08pm • #15
130,028 Points Outside Blog
Jeff - I am now on Firefox for the first time and I want to thank you for your help with this comment I know will go through.
9:43pm • #16
139,667 Points 13 Featured Posts Outside Blog
Jeff - It's not possible to over-emphasize how much you contribute to our community. Thanks so much!
9:50pm • #17
2 Featured Posts

C'est formidable!

I finally figured out where the control was to flow the text but didn't know I could handle the white space.  Thanks!

Now how do I get those quotation marks in posts?  And how do I center something?  I've tried to use HTML but it didn't work.  I'm trying to figure out a better editor but not the raw HTML you say you use. 

I LOVE these posts because they make it so easy to get better.  Picnik was a great find and I use it all the time now.

10:12pm • #18
425,755 Points 90 Featured Posts Outside Blog

Susan... I'm so happy for you right now!

Tom... thank you. I've learned so much here. It only makes sense to give back.  

10:14pm • #19
425,755 Points 90 Featured Posts Outside Blog

Josette... Je ne comprends pas le français. :) My step-mother was a French teacher... I wish I had appreciated her forcing me to speak French at the dinner table. i've lost almost all of it now. 

Those quotes are controlled in the CSS I add to each post. As I mentioned in the comment stream on the tutorial list, it's trickier since AR set a limit on what can be in the sidebar outside of html tags. You have to put some CSS in the blog post itself. I actually stole what I'm using from Brad Carroll and edited the quote portion to put in a new graphic. I put this CSS code in LAST, once I'm finished with a post,  and at the end of the post in the HTML editor. Here is the code if you'd like to try. You'll notice a BLOCKQUOTE parameter. This is what signals the quote. To use it, you need to do this:  <blockquote>Your Quote Here</blockquote>

Here is the CSS:

<style type="text/css">
  blockquote {margin: 0pt 0pt 0pt 30px; padding: 10px 0pt 0pt 20px; width:500px; background: transparent url(http://www.realestateshows.com/jeff/quotes.gif) no-repeat scroll left top; font-size: 120%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #356D9E; line-height: 1.2em;}
 
h2 {
color:#356D9E!important;
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;
font-size:20px!important;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0pt;
line-height:24px;a
margin:9pt 0pt 0px;
padding:6px 0pt 0px;
}
h3 {
color:#356D9E!important;
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;
font-size:20px!important;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0pt;
line-height:24px;
margin:9pt 0pt 0px;
padding:6px 0pt 0px;
}

a {
color:#356D9E;
text-decoration:underline; }

p{ margin-top:2px!important;}

a:hover {
color:#ffffff;
text-decoration:none;
background:#356D9E;
border 1px solid #DDA603 }

</style>

I wish AR would just make it part of the overall post code... it would make everything look so much nicer. 

 

 

10:21pm • #20
2 Featured Posts

By George I think I've got it.  Now I hate the editor even worse, though...  I tested it on my blog with my daughter's pictures (flower girls in a pile of tulle at the end of a fun night!)  I see perfectly how it works. Thanks so much!! 

Merci beaucoup!  Your stepmother and I would have been fast friends - I was a French major in college but am really just awful now..

11:17pm • #21
OCT
26
2007
403,218 Points 179 Featured Posts Localism Sponsor Outside Blog
Way cool, Jeff. This is perhaps one of the most asked questions here on AR. Extremely practical and well presented. Thanks!
12:03am • #22
425,755 Points 90 Featured Posts Outside Blog

Josette... it looks great!

Rich... thanks. I'm glad you think so. It means a lot.

12:56am • #23
113,674 Points 13 Featured Posts Outside Blog
You are just the master of AR, I vote you President of ActiveRain Technology!!  Fantastic presentation, you do what I want to do! Please sign me up for enrollment, when will class begin??  Let's start with that fabulous video, is that your Real Estate Shows ??? I do need to look into that and see what I am missing! Audio too?
1:30am • #24
397,376 Points 1 Featured Post Localism Sponsor Outside Blog

Thanks for the tutorial, Jeff.  You make it look so easy. I should be able to handle that floating picture now.

Also glad to see you are posting and not in a shelter somewhere.

9:29am • #25
Thanks for sharing your master skills Jeff. This post was very helpful.
12:58pm • #26
OCT
27
2007
425,755 Points 90 Featured Posts Outside Blog

Candace... I'm cracking up right now!

Terry... you'll nail it on first try!

Kotambu... excellent! Happy to assist.  

4:37am • #27
OCT
28
2007
279,353 Points 29 Featured Posts Localism Sponsor Outside Blog
Jeff, we honestly should be paying per click to read your posts!  Even though I knew most of this I still learned something worthwhile.  Thanks for all that you do for us!
11:26am • #28
479,164 Points 50 Featured Posts Outside Blog
What more can I say........ I love your tutorials and keep them coming.
11:31am • #29
211,033 Points 1 Featured Post Outside Blog
Jeff - once again you have provided another great tutorial - Would you be so kind as to post links to your Tutorials directly to the Group "Share Your Freebies" as they are excellent and they are free
12:48pm • #30
OCT
29
2007
425,755 Points 90 Featured Posts Outside Blog

Diane... thank you!

Loreena... it's truly my pleasure.

Kathy... on those that don't have 5 already, I most certainly will. 

5:38pm • #31
211,033 Points 1 Featured Post Outside Blog
Jeff - If You go to the group and post direct there with a link to your post it won't matter if you already are listed in 5 groups. No points for direct posts but by linking to yours you will get the traffic. 
10:09pm • #32
425,755 Points 90 Featured Posts Outside Blog
Kathy... interesting idea. I've never even considered it.
10:17pm • #33
211,033 Points 1 Featured Post Outside Blog
Jeff - It helps all around You get the traffic others get freebies all in one place
10:30pm • #34
OCT
30
2007
234,685 Points 5 Featured Posts Outside Blog
Jeff, you have my vote for Time magazine's Man of the Year!  Thank You
10:40pm • #35
NOV
01
2007
7 Featured Posts Outside Blog
Hi - Just wanted to share something with you about tagging these tutorial blogs.... Bob Stewart wrote a blog about how they are going to come up with some stuff for community support - check it out here (http://activerain.com/blogsview/241901/Community-Support-From-the) - These blogs would probably be good ones to update with the tag. Sorry about the full link, for some reason I can't see the little icon editor bar on this page.
12:57pm • #36
NOV
02
2007
425,755 Points 90 Featured Posts Outside Blog
Angie... I'm on it.
9:08am • #37
NOV
04
2007
167,746 Points 3 Featured Posts Outside Blog
This is a fantastic tutorial.  I already knew how this works because of using it so frequently in Word Docs and presentations but...YOU ROCK!!
7:50am • #38
130,420 Points 2 Featured Posts Localism Sponsor Outside Blog

Jeff,

You are the man. I also love that Anna is brave enough to ask for help. You definitely taught me a few things!

10:57am • #39
NOV
12
2007
Thanks for putting up this useful post.
12:41am • #40
321,981 Points 64 Featured Posts Localism Sponsor Outside Blog

Jeff~

Thanks for your generous spirit,for your ability to share information...and for knowing you. This-post is an example of why i subscribe to your BLOG and read it every day.

7:34am • #41
425,755 Points 90 Featured Posts Outside Blog
JaneAnne... wow. Thank you!
4:58pm • #42
NOV
17
2007
1 Featured Post Localism Sponsor
This is awesome!  I'm going to have to bookmark it and see if I can produce something that reflects I've been here!!!!!!
9:26pm • #43
NOV
19
2007
357,912 Points 30 Featured Posts Outside Blog

THANK YOU! THANK YOU!  THANK YOU!  THANK YOU!  THANK YOU!  THANK YOU!  THANK YOU!  THANK YOU! 

..And did I mention:  THANK YOU!!!

7:34pm • #44
1 Featured Post

WOW WOW WOW WOW Jeff GREAT JOB>>>>>> I love the tutorial video... I've been trying to link but it's not working for me..... I know that your time is precious, so if it's possible could you walk me through it.

Many thanks in advance..... I also love how you did the video.... some day I would love to do a video too, but for now I need to cover the basic.

Thanks in advance for all your help..

8:31pm • #45
NOV
21
2007
425,755 Points 90 Featured Posts Outside Blog

Natalie... send us a link to show us. :)

Mirela... your welcome, your welcome, your welcome.

Donna... here you go:  http://activerain.com/blogsview/242101/AR-Tutorials-How-To

6:07pm • #46
NOV
23
2007
1 Featured Post

Seems so simple and easy....Thanks for the lesson. My next blog hshould look better.

Keith Hoffman

3:11pm • #47
DEC
03
2007
Oh man Jeff, thanks again. This tutorial was really helpful. And I have to say that I just love the intro to your video, you did and excellent job.
3:10pm • #48
DEC
04
2007
1 Featured Post
Sure wish I would have found this about 55hrs ago when trying to wrap text around my post. Thanks Jeff Awesome Job!
7:35pm • #49
DEC
27
2007
399,020 Points 15 Featured Posts Outside Blog
Hi Jeff:   I have tried to have several people explain this to me, and I have never understood it.  This time I actually got it.  Thanks so much for sharing.  You not only know your stuff, you also explain it very well.  A rare talent.  Thank you.
12:26am • #50
JAN
28
2008
Localism Sponsor
Hello Jeff - I just found this blog entry.  Your lesson is very helpful and extremely easy to understand.  Thank you!
6:24am • #51
JAN
29
2008
1 Featured Post
As a new member to Active Rain I really appreciate this post! Thanks!
8:32pm • #52
FEB
04
2008
200,135 Points 1 Featured Post Outside Blog
I now understand the vertical & horizontal spacing - thanks.
1:26pm • #53
FEB
24
2008

Hi Jeff:

 I can't seem to download your video on wrapping text.  Any problems with it?

 Thanks for doing it too.

 :-)

1:20pm • #54
FEB
25
2008
425,755 Points 90 Featured Posts Outside Blog
Angela, it plays fine for me. If you are attempting to actually download it, you will need to have a VEOH account and the VEOH player. 
12:28pm • #55
MAY
23
2008

Thanks alot for this video. I needed badly!

6:52am • #56
JUN
12
2008
128,963 Points 24 Featured Posts Outside Blog

Jeff!!!  I have been wanting to know how to do this for 9 months!!!!!  I even blogged about it....NO one told me this existed.  Thank you soooo much for posting this for us!!!!  You da man!

10:28am • #57

Thanks Jeff!  You should re-brodcast your post so others can find this.  Now I need to see if you have a video on how to buid a header for AR.

11:18am • #58

You are the man!!

 

Patricia Aulson/  HAmpton NH Real Estate  

12:07pm • #59
1 Featured Post

Jeff your videos are great to watch.  I enjoy watching and then putting to action, I have really learned alot and I keep coming back for more.  Keep up the great work.  I also thank you for the piknic piece.

10:59pm • #60
JUN
13
2008
JUN
15
2008
Localism Sponsor

Your videos are great thanks for the lessons ,

Jerry

7:07am • #62
JUL
25
2008
1 Featured Post Localism Sponsor

Thanks for taking the time to do all the videos. It helps so much! :)

9:17pm • #63
AUG
15
2008
203,393 Points 13 Featured Posts Outside Blog

Jeff -- your video lessons are fantastic!  Thanks for teaching us how to do this.  My blogs will be so much better in the future!

1:02am • #64
AUG
27
2008

havent been around here so checking out the tips to maske this stuff more useful.

4:18pm • #65
SEP
01
2008

Thanks for the video. Way more helpful

12:42am • #66
Localism Sponsor

Thank you for the video... it really answered my questions on how to create space around my pictures!

3:30pm • #67
SEP
03
2008

how did you get the wonderful background on your AR site?

luv it!

 

1:08pm • #68
OCT
02
2008
134,648 Points 12 Featured Posts Outside Blog

Thank you Jeff. I have been adding images all along, but there were a few little tweaks you mentioned that I didn't know about and that will be helpful.

4:20pm • #69
425,755 Points 90 Featured Posts Outside Blog

I'm so glad this was beneficial to even a seasoned vet! :)

4:23pm • #70
2 Featured Posts

Thanks Jeff!  While I was aware of the insert box and the aeas that you showed in your video - I still learned two things; 1) That once you have inserted the object, you can then grab and move it and 2) If you change your mind on the location, you don't have to cut the picture and start all over, you can just open the insert box again and make a different selection. Very helpful!!!  

4:34pm • #71

Jeff I am really getting into this! Your tutorials are taking the mystery out of the BLOG scene. You must be the STAR of Blogging?...I am a fan and will be searching out your stuff! Need it want it must have it!

 

4:41pm • #72
280,229 Points Outside Blog

Jeff, I always wonder. thanks for spending the time to help us.

5:59pm • #73
187,215 Points Localism Sponsor Outside Blog Hit Router

Welcome To Miami BeachJeff-

I've been using the wrap text proceedure for awhile. I never really understood how or why- this tutorial was just amazing!

Thank You

7:27pm • #74
3 Featured Posts

Hey Jeff, that was so cool that I believe you deserve to be paid for it, so here it goes... I have to write something more so I can show you Do not spend this all in one place Jeff.that I have actually learned how to do this text wrapping around the images. I couldn't say thank you enough, but thank you anyway.

Antonio

11:40pm • #75
OCT
03
2008

Jeff thanks for clearing this up. All boats rise with tide.

7:47am • #76
1 Featured Post Outside Blog Hit Router

very cool ...another master on active rain...hey like that dollar bill image antonio and alexia...can i borrow it?? promise to pay it back!

7:53am • #77
255,483 Points 34 Featured Posts Localism Sponsor Outside Blog

Jeff, I've been doing this a long time and I'm still playing with this feature. Thanks for the tutorial.

Later in the rain~Deb

11:45am • #78
OCT
04
2008
158,329 Points Localism Sponsor Outside Blog

Thank you for a clear explanation.  Although I have been using the basic idea, I did not know how to use the vertical and horizontal space boxes.  It will be great not to have the text right up against my pictures.  How do you know how many pixels translates to what size of how much space?  Also what are the class and style boxes for?  Are they something that we should know how to use?

8:48am • #80
425,755 Points 90 Featured Posts Outside Blog

Pam, after a while you just find a pixel number that you like. But sometimes you want more space than others. As for the class and style, AR no longer has the Class box available an neither you need to worry about.

9:14am • #81
OCT
13
2008
139,481 Points 11 Featured Posts Localism Sponsor Outside Blog Hit Router

Jeff, I knew some of this, but you greatly filled in some holes! Thanks a million! This is what I LOVE about AR....people helping people!

 

10:52pm • #82
NOV
14
2008
Outside Blog

Jeff,

You rock, dude.

By the way, we are never too busy to help your friends buy or sell a home.  Who do you know that is likely to move in the next 90 days?

Best Regards,
Erick Blackwelder
Nationally Recognized Real Estate Expert

Erick & Company at Exit 1st Choice Realty
Phone: 703-590-2252
Fax: 703-232-1049

God Bless America and All Who Serve in Peace and in Battle
Oh, and God Bless Texas!

Life is not a journey to the grave with the intention of arriving safely in a pretty and well preserved body, but rather to skid in broadside, thoroughly used up, totally worn out, and proclaiming, "Wow, what a ride!!!"

12:52pm • #83
NOV
25
2008
187,100 Points Localism Sponsor Outside Blog Hit Router

Absolutely great! I've been trying to figure this out, now I know how to do this. Glad I found your post. Thanks,

2:02pm • #84
JAN
07
150,557 Points 2 Featured Posts Localism Sponsor Outside Blog Hit Router

Jeff - I was talking to Clint Miller this morning. He was giving me some tips on my blog and suggested I read you, especially this blog on putting in the pictures. This was so incredibly helpful do you mind if I reblog it?

10:10am • #85
FEB
02

Jeff,

As always...great info and easy to understand! Thank you sooooo much!

11:01am • #86
FEB
19

Jeff- Thank you! I've been playing around driving myself CRAZY with this wrap around text thing! Your tutorials are wonderful! Best to you~

6:33pm • #87
JUN
21
2 Featured Posts

JEFF, Your tutorials are sensational posts of understandable instructions and explanations. I have posted many images but had never used the appearance tab. I now know how to make a frame around the photo and to add space using vertical and horizontal.  thank you

4:40pm • #88
JUL
28
Outside Blog

And to think that I have been trying to figure this out on my own.  TY

7:12am • #89
OCT
15
1 Featured Post Localism Sponsor Hit Router

Jeff, I liked the video & the explanation - BUT - it doesn't work if the photo comes into AR with style size attributes attributed to it already. See explanation below. Any ideas or solutions?

I create my posts in Kompozer... The blog post looks exactly the way I want it in Kompozer then when I copy and paste either the design or the html into AR & publish - the formatting is gone. (I've also tried Microsoft ExpressionWeb that creates even more issues)

I spent many a frustrating hour trying to edit the image & text wrap formatting on AR posts. I found the image appearance box & margins and alignment settings in AR that are in your tutorial & video. I edited the settings over & over and each time I published a post the formatting did not hold and was wiped out. Pasting same thing into Trulia comes out displaying correctly with all the formatting.

Eventually I went to the html section of the post and tried to figure it out. I saw that there were multiple size notations in the code for the image. I wiped out all references to style and typed in the settings I wanted (after a lot of trial and error) and finally got the result I was looking for.

I even tried creating a post with just text and then dragging and dropping in images to a post using my Picasa Web album and the settings still would NOT hold. I had to manually edit out all style references and then manually type in new style references. I am using FireFox if that is an issue.

 

 

2:35pm • #90

Leave a response…



(optional)
What does the graphic say?
 
Jeffblack800 Rainmaker_large

Jeff Turner

Santa Clarita, CA

More about me…

Real Estate Shows

Office Phone: (661) 244-5812

Email Me

Helping businesses grow by effectively using evocative Internet-based services. I am the President of Zeek Interactive and Founder of RealEstateShows.com.

Jeff Turner Info

The Real Estate Shows Blog

Active Rain Member Discount








Links

Archives

RSS 2.0 Feed for this blog

Find CA real estate agents and Santa Clarita real estate on ActiveRain.