Ana Connell - Burbank Real Estate Expert asked for this tutorial.
And 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 }
Jeff Turner aka respres

Thank you soooo much! I can't wait to put this into action!
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.
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. :)
Jeff,
I will never miss a video you do. They are worth 1000 words.
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.
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
Tim... thank you.
Missy... ok, now I really want to know! :)
Carol... my pleasure.
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.
Ann... my pleasure.
Bill & Barbara... it's a lot more fun doing it for free. :)
Lisa... thank you.
Jeff - once again you are the master and yes I am trying to use Safari so I will go to firefox. Thanks so much.
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.
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.
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.
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..
Josette... it looks great!
Rich... thanks. I'm glad you think so. It means a lot.
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.
Candace... I'm cracking up right now!
Terry... you'll nail it on first try!
Kotambu... excellent! Happy to assist.
Diane... thank you!
Loreena... it's truly my pleasure.
Kathy... on those that don't have 5 already, I most certainly will.
Jeff,
You are the man. I also love that Anna is brave enough to ask for help. You definitely taught me a few things!
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.
THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU!
..And did I mention: THANK YOU!!!
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..
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
Seems so simple and easy....Thanks for the lesson. My next blog hshould look better.
Keith Hoffman
Hi Jeff:
I can't seem to download your video on wrapping text. Any problems with it?
Thanks for doing it too.
:-)
Thanks alot for this video. I needed badly!
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!
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.
You are the man!!
Patricia Aulson/ HAmpton NH Real Estate
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.
Hi Jeff. Thanks for sharing the great tip! Keep them coming.
Your videos are great thanks for the lessons ,
Jerry
Thanks for taking the time to do all the videos. It helps so much! :)
Jeff -- your video lessons are fantastic! Thanks for teaching us how to do this. My blogs will be so much better in the future!
havent been around here so checking out the tips to maske this stuff more useful.
Thanks for the video. Way more helpful
Thank you for the video... it really answered my questions on how to create space around my pictures!
how did you get the wonderful background on your AR site?
luv it!
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.
I'm so glad this was beneficial to even a seasoned vet! :)
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!!!
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!
Jeff, I always wonder. thanks for spending the time to help us.
I've been using the wrap text proceedure for awhile. I never really understood how or why- this tutorial was just amazing!
Thank You
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
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
Jeff thanks for clearing this up. All boats rise with tide.
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!
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
Thank you! Also I just sent you an email. ~ JC
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?
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.
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!
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!!!"
Absolutely great! I've been trying to figure this out, now I know how to do this. Glad I found your post. Thanks,
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?
Jeff,
As always...great info and easy to understand! Thank you sooooo much!
Jeff- Thank you! I've been playing around driving myself CRAZY with this wrap around text thing! Your tutorials are wonderful! Best to you~
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.
And to think that I have been trying to figure this out on my own. TY
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.
Hi Jeff - I know you wrote this several years ago, but I'm new, just found this video and thank you! I've been wondering how to do this, and alot of other questions regarding images, blogging, etc. I've bookmarked this page, but hope it stays for all since it is very clear. I'll have to see what other tips you've offered. Keep 'em coming.