Unofficial Tech Support ~ Lesson in Placing Photos Side by Side...

By
Real Estate Agent with The Berkshire Group Realtors

Blogs with properly placed photos mean a world of difference in presentation.  Nicely lined up photos without a lot of white space are more appealing and attractive to the viewer.   

When adding photos it's fairly easy to add one at a time, embedding the cursor into the text (not the other way around).

Adding photos that need to be placed right next to each other is a little more challenging.   Why?  The simplest explanation is this; the format of Active Rain is fluid in size.  Everyone is viewing it on a different size monitor.  What works on your computer screen will not work or even look the same in another. 

Frustrating?  Yes.  But it is possible to place your photos side by side using HTML and setting the photos in a table.  

The table is the framework that will keep the photos inside of each frame, so they don't travel to weird places on your blog!  

The steps to organize the process are important.  Taking time to follow the same routine will save you hours of frustration.  Here is how I do it.

  • Choose the photos to use
  • Process the photos so they are all the same size.  I used width of 350 pixels.  Keep in mind you don't want photos that are too large for the screen. When viewers have to scroll right and left to read your blog, it is a bother.  They will move on. NOTE: I honestly don't know if this is a good size.  Please if you have to scroll, let me know! :) NOTE: PHOTOSHOP ELEMENTS is a good program to use.  There are free ones on the market, so do some research if you don't care to spend the money.
  • Write your blog first.  When you are finished with the text portion, it is time to add the photos.

Here's how to begin:

 Demo html button


 

 

 

 

 

 

Click on the "HTML" button on your Active Rain Tool bar.  (see demo above)

Demo for HTML


 

 

 

 

 

 

 

 

 

 

 

 

 

A new window will pop up.  If you have text, it will appear here, probably looking like gobblygook; if you aren't used to looking at HTML code.

Your cursor should be in the area where you want to place the photos.  Don't worry about spaces, HTML doesn't recognize spaces, so give yourself some room to work. 

 Cut and paste this code into the HTML

html code for building a table


 

 

 

 

 

 

 

 

 

 

 

 

 

This is how the code will look in the HTML editor.  You will need to delete the <!--BEGIN TABLE--> and <!--END TABLE--> I used it as an example for you to see the beginning and ending of the code.

When you are finished adding the code, click "UPDATE".  The window will close and take you back to the Active Rain "ENTRY:" area.  Your table will resemble the example below:

demo

















If you have a table that looks like this, you did it right!  Now all you need to do is place your cursor inside of each individual "box" and add your photos.  If you don't know how to add photos, check out my previous blog on "How to Add Pictures in Your Blog" (tricky title!)   NOTE: When you are adding the image URL, in the "appearance" tab, be sure to align the images all the same.  In this instance, I chose "middle."   adding photos demo

See how the first photo enlarges the box?  The next box shrinks...don't fret, just add your cursor and photo, like normal.  Keep going with this same routine until the table is used up. When you are finished your blog should look like this:


  Dawn Patrol Albuquerque Sunrise in Albuquerque 
  Hot Air Balloons   Hot Air
  Fire up the balloon   Balloon aloof

THE REST OF THE SCOOP

Of course you are wanting to know the HTML code.  I used this code to build 3 rows with 2 columns:

Just cut and paste this code.<!--BEGIN TABLE-->
















 
 
 
 
 
 






<!--END TABLE-->

Learning HTML is not as difficult as many believe it to be.  If you are interested in learning more, pick up one the the many wonderful "how to" books.  Start off by doing, you will be surprised at how much you can learn and thus control your own destiny! 

GREAT RESOURCES

HTML and CSS by Molly E. Holzschlag

Head First HTML with  CSS & XHTML by Elisabeth Freemand & Eric Freeman ( I love this one because you do it in a classroom fashion. )

Inspiration for this blog goes to Stager Val Allocco in NY ~ VAL asked me how to do this yesterday, so I whipped up a post.  Thanks VAL!

 

Colorado Licensed Broker
ABR - Accredited Buyer Representative
CIPS - Certified International Property Specialist
CRS - Certified Residential Specialist
The Berkshire Group Realtors
3801 E. Florida Ave. Suite 400
Denver, Colorado, 80210
USA
Mobile: 303-589-2022
Fax: 303-953-5362
kristal@tbgdenver.com
Selling Denver and the 'burbs

close

This entry hasn't been re-blogged:

Re-Blogged By Re-Blogged At
Topic:
ActiveRain Community
Groups:
Active Rain Groups
Active Rain Newbies
Tags:
active rain photos
featured

Anonymous
Post a Comment
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the woman to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the key to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Show All Comments
Rainmaker
157,735
1SG (Ret.) David Kucic
Hawaii Military Realty, Inc. - Ewa Beach, HI
President and Owner
Kristal-I just got done trying it and I am not getting it.  I have followed all of the steps and I am able to get the HTML window to come up.  I pasted the code that you gave but it does not give me the table.  Hmmmm I will try a few more times.  Any thoughts on what I might be doing wrong?
Apr 14, 2007 11:29 PM #55
Ambassador
653,054
Kristal Kraft
The Berkshire Group Realtors - Denver, CO
Denver Real Estate - 303-589-2022

David? or is it Tonya?

Try holding down the "CTRL" key as you click on the HTML button.  I suspect your computer is blocking POP UPS and that would be one!

Let me know...I've got my fingers crossed.

kk 

Apr 14, 2007 11:32 PM #56
Rainmaker
95,494
David L. Britt
Platinum Realty, LLC - Olathe, KS
MBA
Kristal, very nicely done!  Looks like you may have used Adobe Photoshop to crop your pictures.  I like what you've done!  Thanks for the tips!
Apr 14, 2007 11:52 PM #57
Rainer
65,966
Paul Anyanwu
RE/MAX LLEWELLYN REALTORS - West Orange, NJ
CRS, SFR, Broker-Salesperson, Sales West Orange,NJ
Thanks for this great step by step ,though lots of steps but the finishing is fabulous.
Apr 15, 2007 11:09 AM #58
Rainmaker
157,735
1SG (Ret.) David Kucic
Hawaii Military Realty, Inc. - Ewa Beach, HI
President and Owner
Kristal-I still havent got it.  I tried to hold down the CTRL key while I pressed the HTML key but that didnt help.  I also disabled the pop up blocker and tried it again.  That didnt work either.  What I am noticing though is that when I press the HTML button, the window will open for less than 2 seconds and it will auto matically minimize itself.  Could that be an indication of what I am doing wrong?  Thanks!  Oh by the way, this is David.  I was trying to conceal my identity so people wouldnt know that it was me who is the dummy :)
Apr 15, 2007 06:58 PM #59
Rainer
85,900
Carol Williams
Nationwide: Self-employed Real Estate Copywriter, Blogger, Photographer and Real Estate Mentor - Wenatchee, WA
Wenatchee Real Estate
David & Tonya, Are you using Internet Explorer or some other browzer (like Firefox).  I've found when I have these kinds of problems it is an incompatibility issue with a minority browzer... and, inspite of hating iE, I have to give in and use it.  
Apr 15, 2007 07:43 PM #60
Ambassador
653,054
Kristal Kraft
The Berkshire Group Realtors - Denver, CO
Denver Real Estate - 303-589-2022

David L. Britt ~ Yes, you are correct I use PSE to manipulate the pics.  Glad you approve!

 Paul ~ Thank you.  I hope you and others benefit from it.  Sometimes all it takes is a little explanation and the light bulb goes off...

 

David ~ I think Carol Williams has a good point there. Are you using IE or Firefox?  I've had something like that happen with me, but I got over it.  Think about what Carol said and let us know.

Carol ~ Thanks for stepping up with an answer.  I wasn't sure how to respond.  I know exactly what you are talking about with IE.  Syncing my Palm TREO is one issue.  grerrrrrr 

Apr 15, 2007 09:33 PM #61
Anonymous
Anonymous
Anonymous
Bookmarked and I'm off to buy the books. I've avoided HTML like a plague. It's time to dig in. Thanks for the inspiration.
Apr 21, 2007 09:52 AM #62
Rainer
23,532
Daniel Gates
Insure Consulting - Palm Bay, FL
thanks so much, i have been trying to figure this out on my own, with no success.
Apr 30, 2007 09:41 AM #63
Rainer
26,181
Jordan M. Mackey
Overland Park Real Estate (No association with Inc) - Overland Park, KS
Overland Park Real Estate ::
Kristal, what software do you use to make your screenshot photos?
May 04, 2007 01:34 PM #64
Rainer
52,713
Sue Argue
Staged First Impressions - Hampton, NH
NH Home Stager

Kristal, After much time spent on writing this blog it still is visually unappealing; I wish I had read this blog first!

Is it possible to go back and edit a blog in HTML to "straighten it out"? Perhaps not worth the time.

 

May 20, 2007 03:08 PM #65
Anonymous
Anonymous
Anonymous
It seems that the format changed changed and there is not HTML icon as you show in the example, but does the technique change any from what you wrote.  I have not tried it because it does appear different.
Jun 10, 2007 01:38 AM #66
Ambassador
385,022
Tracy Santrock
Fonville Morisey/Santrock Realty Group, Inc. - Cary, NC
Raleigh - Cary Realtor

Crystal,

Just curious about how you embedded the copyright w/your name.  Very classy.

Aug 12, 2007 04:34 PM #67
Rainmaker
954,820
Kathy Clulow
RE/MAX All-Stars Realty Inc. Brokerage - Uxbridge, ON
CNE - ASP - SRES .... Uxbridge Ontario Real Estate
Great post exellent instructions
Aug 12, 2007 09:34 PM #68
Rainmaker
457,077
Jeff&Grace Safrin
F.C.Tucker 1st Team Real Estate - Valparaiso, IN
SpousesSellingHousesTM

You posted this Blog months ago ( we did not even know of AR back then :) and yet I just ran across it today and used it for the first time for a football games photos in a Blog and it worked awesome- thank you very much from newer members!

Oct 30, 2007 02:49 PM #69
Rainmaker
573,927
Terry & Bonnie Westbrook
Westbrook Realty Broker-Owner - Grand Rapids, MI
Westbrook Realty - Grand Rapids Forest Hills MI Re

Thanks for this blog, I am still trying to figure out the technical stuff and this html table code will help!

It always seems simple after you learn how.

Oct 31, 2007 04:30 PM #70
Rainmaker
412,298
Mesa, Arizona Real Estate Mesa Arizona Realtor
Teri Ellis at Homes Arizona Real Estate LLC - Mesa, AZ

Kristal, great stuff here. Just stumbled upon it after reading Maureen's post. ;-)

Pepper

 

Apr 07, 2008 11:26 PM #71
Rainmaker
420,226
Melissa Marro
Watson Realty Corp - Saint Augustine, FL
St Augustine, St Johns, Ponte Vedra

I also stumbled here after reading Maureen's post... great information.  I have been adding photos side by side by resizing them, but this has created a problem with the new skins (Thanks Brad).  This has kept me from using them.  This may answer that problem for me! 

Thank you so much!

Apr 18, 2008 09:50 AM #72
Anonymous
Anonymous
lynne pope

Thank you for the whole blog. Your active rain page looks great too...What fun to stop by. its never to late to find your info...I just found it on a search re photos

Jun 08, 2008 08:16 AM #73
Rainmaker
206,994
Nicky Dou
kw | Keller Williams Market Pro Realty - Rogers, AR
TOP LOCAL REALTOR in Northwest Arkansas

Thank you so much!!! I have been trying to figure this out and I am going to go get a good book about html and learn more about this. I always thought it must be "too difficult" but I think I need to re-think that now. Love your blog!

Mar 11, 2009 12:04 AM #74
Anonymous
Post a Comment
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the flag to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Show All Comments
Ambassador
653,054

Kristal Kraft

Denver Real Estate - 303-589-2022
Ask me a question
*
*
*
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the house to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Additional Information